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 可以拖动的DIV(二)
Jun 26 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
jquery实现广告上下滚动效果
Mar 04 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php 注释规范
2012/03/29 PHP
php中in_array函数用法分析
2014/11/15 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python实现批量压缩图片
2018/01/25 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
给排水专业应届生求职信
2013/10/12 职场文书
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
项目计划书范文
2014/01/09 职场文书
工作年限证明范本
2015/06/15 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
导游词之无锡梅园
2019/11/28 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python