本文实例为大家分享了js实现随机点名程序的具体代码，供大家参考，具体内容如下
思路：
1.定义一个数组，存放名单
2.启动定时器，设定间隔时间不断调用函数
3.Math.random()获取随机下标，根据下标的随机变换取出数组中对应的元素
4.逻辑代码完成后，通过DOM对象把变化的结果呈现在页面上
JS代码：
1
2 var arr = [“唐僧”, “孙悟空”, “猪八戒”, “沙悟净”, “白骨精”, “玉皇大帝”, “红孩儿”, “白骨精”, “太上老君”]
3
4 var myTimer = null //定时器编号
5
6 // 既是启动定时器的函数，也是停止定时器的函数
7 function goAndStop(){
8 // 如果当前没有定时器在执行，则启动，否则，停止定时器；
9 if(myTimer == null){
10 // 启动定时器，随机下标，取出名字
11 myTimer = setInterval(function(){
12 // 1、随机下标
13 var index = parseInt(Math.random()*arr.length)
14
15 // 2、根据下标取出学生的姓名，显示在页面上
16 document.getElementById(“stuName”).innerHTML = arr[index]
17
18 },10);
19
20 //启动定时器的同时，改变按钮状态，为下次单击做准备
21 document.getElementById(“btn”).value = “停 止”
22 }else{
23 // 当前若有有定时器在执行，则停止定时器, 恢复初始状态
24 window.clearInterval(myTimer)
25 myTimer = null
26 document.getElementById(“btn”).value = “开 始”
27 }
28 }
29
HTML + CSS + JS 源码：
1
2
3
4
5
6
7
Document
8
9 #box{
10 width:200px;
11 height: 300px;
12 margin: 100px auto;
13 }
14
15 #stuName{
16 width: 100%;
17 height: 80px;
18 border: 2px solid gray;
19 line-height: 80px;
20 text-align: center;
21 font-size: 30px;
22 color:orange;
23 font-weight: bold;
24 }
25
26 input{
27 margin-top:30px;
28 width: 100%;
29 height: 50px;
30 font-size: 20px;
31 font-weight: bold;
32 }
33
34
35
36
37
38
39 随机名单
40
41
42
43
44
45
46 var arr = [“唐僧”, “孙悟空”, “猪八戒”, “沙悟净”, “白骨精”, “玉皇大帝”, “红孩儿”, “白骨精”, “太上老君”]
47
48 var myTimer = null
49 function goAndStop(){
50 if(myTimer == null){
51 myTimer = setInterval(function(){
52 var index = parseInt(Math.random()*arr.length)
53
54 document.getElementById(“stuName”).innerHTML = arr[index]
55
56 },10);
57 document.getElementById(“btn”).value = “停 止”
58 }else{
59 window.clearInterval(myTimer)
60 myTimer = null
61 document.getElementById(“btn”).value = “开 始”
62 }
63 }
64