1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 p{
8 margin: 0;
9 padding: 0;
10 }
11 </style>
12 </head>
13 <body>
14 <input type="button" name="randBtn" id="randBtn" value="随机一注" />
15 <p id="text"></p>
16 </body>
17
18 <script type="text/javascript">
19 // 获取到点击按钮
20 var button = document.getElementById("randBtn");
21
22 // 获取到 p 标签
23 var messageP = document.getElementById("text");
24
25
26
27 // 产生5个随机数的函数
28 function randFiveNumber(){
29 // 定义一个数组，用来存放随机的5个数字
30 var numberArray = [];
31 for (var i = 0;i < 5;i++) {//for循环,i<5,循环了5次，每次循环，都取一组数
32 // 产生1-30的随机数
33 var number = parseInt(Math.random() * (30 - 1 + 1) + 1);
34 // 把每次产生的随机数加入数组
35 numberArray.push(number);
36 }
37 // 返回数组
38 return numberArray;
39 }
40
41
42 // 给 button 绑定点击事件
43 button.onclick = function(){
44
45
46 // 采用定时器，每隔一段事件随机一组数据
47 var timer = setInterval(function(){
48 // 1、拿到5个随机数
49 var resultArray = randFiveNumber();
50 // 把这5个数字显示到 p 标签
51 messageP.innerHTML = resultArray;
52 },100);
53
54 // 1s之后移除上述的 timer，让随机数停下来
55 setTimeout(function(){
56 clearInterval(timer);
57 },1000);
58
59
60 }
61
62
63 </script>
64
65 </html>