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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
jquery退出each循环的写法
Feb 26 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 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 读取文件的正确方法
2009/04/29 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python实现栈的方法
2015/05/26 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Django的CVB实例详解
2020/02/10 Python
Python中求对数方法总结
2020/03/10 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python中append函数用法讲解
2020/12/11 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
给老师的一封建议书
2014/03/13 职场文书
cf收人广告词
2014/03/14 职场文书
个人年终总结开头
2015/03/06 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Python中字符串对象语法分享
2022/02/24 Python
Redis keys命令的具体使用
2022/06/05 Redis