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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
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新手上路(十三)
2006/10/09 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
Javascript 解疑
2009/11/11 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python导入时小括号大作用
2017/01/10 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
小学体育课教学反思
2016/02/16 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
教你用python实现12306余票查询
2021/06/30 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript