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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 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利用cookie实现自动登录的方法
2014/12/10 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
js css自定义分页效果
2017/02/24 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
实例介绍Python中整型
2019/02/11 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
大专自我鉴定范文
2013/10/01 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
大国崛起英国观后感
2015/06/02 职场文书
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL