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 相关文章推荐
js类 from qq
Nov 13 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
深入分析php之面向对象
2013/05/15 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python判断两个对象相等的原理
2017/12/12 Python
python判断自身是否正在运行的方法
2019/08/08 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
铣床操作工岗位职责
2014/06/13 职场文书
班主任开场白
2015/06/01 职场文书
大学军训心得体会800字
2016/01/11 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL