javascript如何使用函数random来实现课堂随机点名方法详解


Posted in Javascript onJuly 28, 2020

如何使用函数random来实现课堂随机点名

1.最初的样子如下

javascript如何使用函数random来实现课堂随机点名方法详解

2.点击开始点名,上面一行的文字变成名字,名字在不停的变化,开始点名变成停止点名,如下

javascript如何使用函数random来实现课堂随机点名方法详解

3.点击停止点名,上面名字不动,停止点名变成开始点名,如下:李四同学回答老师问题

javascript如何使用函数random来实现课堂随机点名方法详解

代码如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
  
   #d2{cursor:pointer;}/*让鼠标移到开始点名的时候变成手型*/
  </style>
 </head>
 <body>
 <div id="d1">亲,准备好了吗?</div> 
  <div id="d2" onclick="fun()">开始点名</div><!--触发事件句柄onlick,调用fun函数-->
  <script>
   
   var mytime=null;
   var d1=document.getElementById("d1");
   var d2=document.getElementById("d2");
   function fun()
   {if(mytime==null)
    {d2.innerHTML="停止点名";
    show();
    
    }
   else {
    
     clearTimeout(mytime);
     d2.innerHTML="开始点名";
     mytime=null;
   }
  }
   function show()
   {var s=["张三","李四","王五","王二","小二"];
    var name=Math.floor(Math.random()*10%s.length);//让name在下标0-4之间取得
    d1.innerHTML=s[name];
    mytime=setTimeout("show()",1);
   
   }
   </script>
  </body>
</html>

注意:random是Math中的函数,所以要写成Math.random()

到此这篇关于javascript如何使用函数random来实现课堂随机点名方法详解的文章就介绍到这了,更多相关javascript 使用函数random来实现课堂随机点名方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
node.js中 stream使用教程
Aug 28 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
jQuery实现全选按钮
Jan 01 jQuery
Node.js 深度调试方法解析
Jul 28 #Javascript
vue-列表下详情的展开与折叠案例
Jul 28 #Javascript
js 数组当前行添加数据方法详解
Jul 28 #Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 #Javascript
JS代码简洁方式之函数方法详解
Jul 28 #Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 #Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 #Javascript
You might like
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python爬虫常用的模块分析
2014/08/29 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python之语音识别speech模块
2020/09/09 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
学生党支部先进事迹
2014/02/04 职场文书
绿色环保标语
2014/06/12 职场文书
党校毕业心得体会
2014/09/13 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
感谢信格式范文
2015/01/22 职场文书
通知的格式范文
2015/04/27 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
信仰纪录片观后感
2015/06/08 职场文书
学习经验交流会策划书
2015/11/02 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript