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 相关文章推荐
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
Vuex中的Mutations的具体使用方法
Jun 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
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
pip install命令安装扩展库整理
2021/03/02 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
公司担保书格式范文
2014/05/12 职场文书
迎新生欢迎词
2015/01/23 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
详解Python常用的魔法方法
2021/06/03 Python
什么是SOLID
2022/03/24 Javascript