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代码和jquery对比体会
Sep 10 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
船舶专业个人求职信范文
2014/01/02 职场文书
小学家长会邀请函
2014/01/23 职场文书
销售业务员岗位职责
2014/01/29 职场文书
物业管理专业求职信
2014/06/11 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
会计试用期自我评价
2014/09/19 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
消夏晚会主持词
2015/06/30 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
导游词之长城八达岭
2019/09/24 职场文书