c语言随机点名程序rand,Js实现随机点名程序小例子

本文实例为大家分享了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