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 浮动广告实现代码
Dec 25 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 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实现用户在线时间统计详解
2011/10/08 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php pdo操作数据库示例
2017/03/10 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
python格式化字符串实例总结
2014/09/28 Python
Python中os.path用法分析
2015/01/15 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
培训演讲稿范文
2014/01/12 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
个人租房协议书范本
2014/09/30 职场文书
高中教师个人总结
2015/02/10 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
爱心捐助活动总结
2015/05/09 职场文书