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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
React Native项目框架搭建的一些心得体会
May 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实现把数字ID转字母ID
2013/08/12 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
php解决安全问题的方法实例
2019/09/19 PHP
深入分析PHP设计模式
2020/06/15 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
信号生成及DFT的python实现方式
2020/02/25 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
爱国口号
2014/06/19 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
追悼词范文大全
2015/06/23 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL