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 写类方式之九
Jul 05 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
javascript实现计算器功能详解流程
Nov 01 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP Document 代码注释规范
2009/04/13 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
php文件包含的几种方式总结
2019/09/19 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
javascript 简练的几个函数
2009/08/29 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
webpack常用构建优化策略小结
2019/11/21 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
踏青活动策划方案
2014/08/19 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
一年级小学生评语大全
2014/12/25 职场文书
护理实习生带教计划
2015/01/16 职场文书
国家助学金感谢信
2015/01/21 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android