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注入技巧
Jun 22 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
javascript变量声明实例分析
Apr 25 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 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动态生成JavaScript代码
2009/03/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
vue.js的提示组件
2017/03/02 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
使用python绘制温度变化雷达图
2019/10/18 Python
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
《雨点》教学反思
2014/02/12 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
销售会议开幕词
2016/03/04 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python