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中使用new与不使用实例化对象的区别
Jun 22 Javascript
php基于redis处理session的方法
Mar 14 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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版本号
2006/10/09 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python多项式回归的实现方法
2019/03/11 Python
Python 线程池用法简单示例
2019/10/02 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
材料会计岗位职责
2014/03/06 职场文书
大学军训感言400字
2014/03/11 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
应届大专生求职信
2014/06/26 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
总经理检讨书范文
2015/02/16 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python