码迷,mamicode.com
首页 > Web开发 > 详细

JS 模拟彩票

时间:2016-05-31 22:24:39      阅读:762      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 

JS 模拟彩票

标签:

原文地址:http://www.cnblogs.com/PowellZhao/p/5547613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!