javascript如何使用函数random来实现课堂随机点名方法详解

2024-02-20 00:32:12

如何使用函数random来实现课堂随机点名

1.最初的样子如下

2.点击开始点名，上面一行的文字变成名字，名字在不停的变化，开始点名变成停止点名，如下

3.点击停止点名，上面名字不动，停止点名变成开始点名，如下：李四同学回答老师问题

代码如下

<!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来实现课堂随机点名方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js实现随机点名器精简版

本文实例为大家分享了js实现随机点名器的具体代码,供大家参考,具体内容如下此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求.姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进. <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo
JavaScript实现随机点名程序

本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下效果: 录制的gif效果图没那么理想,其实速度是比这个快的思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时间不断调用函数 3.Math.random()获取随机下标,根据下标的随机变换取出数组中对应的元素 4.逻辑代码完成后,通过DOM对象把变化的结果呈现在页面上 JS代码: <script> var arr = ["唐僧", "孙悟空", "猪八戒&
javascript网页随机点名实现过程解析

主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机点名</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1
JS实现随机点名器

本文实例为大家分享了JS实现随机点名器的具体代码,供大家参考,具体内容如下实现一个简单的随机点名器需求分析: 两个按钮实现随机点名的开始和结束创建ul元素,添加到父级div中,实现了每个名字需要放在一个单独的盒子中根据随机数进行随机选择,(涉及到了两个函数 setInterval clearInterval)在选择之前,先清空盒子的所有类样式,如果被选中,则重新赋予类样式当点击停止按钮时,根据上一步拥有重新选择出来的li标签获取标签内容,并且直接可以展示到对应的文本框. 下面开始实现
原生js实现随机点名

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随
JavaScript实现随机点名器

本文实例为大家分享了JavaScript实现随机点名器效果图的具体代码,供大家参考,具体内容如下 js实现随机点名器的思路利用setTimeout()计时器实现随机的效果,功能函数 function show(){ var box=window.document.getElementById("box"); var num=Math.floor((Math.random()*100000))%namelist.length; box.innerHTML=namelist[num];
js实现课堂随机点名系统

本文实例为大家分享了js随机点名系统的具体代码,供大家参考,具体内容如下 style样式 <style> .cor { background-color: #6083cd; } #box { width: 500px; border: 2px solid black; margin: 0 auto; height: 500px; } ul { list-style: none; } li { width: 50px; height: 50px; margin: 20px; float: lef
原生js实现随机点名功能

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下原生js实现随机点名,js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
js实现随机点名程序

最近用到了一下随机点名程序,就自己整理一下.代码实现后的截图如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ
JavaScript实现简单随机点名器

本文实例为大家分享了js随机点名器的具体代码,供大家参考,具体内容如下 <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat

javascript如何使用函数random来实现课堂随机点名方法详解

相关推荐

随机推荐