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重复绑定事件造成的后果说明
Mar 02 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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+DBM的同学录程序(3)
2006/10/09 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
vue实现组件之间传值功能示例
2018/07/13 Javascript
Python的一些用法分享
2012/10/07 Python
python实现绘制树枝简单示例
2014/07/24 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
阿德的梦教学反思
2014/02/06 职场文书
生日主持词
2014/03/20 职场文书
企业文化标语口号
2014/06/09 职场文书
社团活动总结书
2014/06/27 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
运动会加油稿100字
2014/09/19 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
追悼会悼词大全
2015/06/23 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
python实战之用emoji表情生成文字
2021/05/08 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
Windows server 2016服务器基本设置
2022/08/14 Servers