首页 > web前端 > js教程 > 基于javascript实现彩票随机数生成(升级版)_javascript技巧

基于javascript实现彩票随机数生成(升级版)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-05-16 15:20:32
原创
1258 人浏览过

本文实例讲解了JavaScript 实现彩票中随机数组的获取详细代码,分享给大家供大家参考,具体内容如下

效果图:

具体代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Math.random方法彩票随机数的生成-升级版</title>

  <style type="text/css">

   *{

     margin: 0;

     padding: 0;

   }

   .wrap{

     width: 600px;

     height: 300px;

     background-color: #f8e2e2;

     margin: 0 auto;

   }

   .list{

     width: 440px;

     /*border: 1px solid red;*/

     margin: 0px auto;

   }

   .list li{

      list-style: none;

      width: 30px;

      height: 30px;

      display: inline-block;

      border: 1px solid #fff;

      border-radius: 30px;

      line-height: 30px;

      text-align: center;

      margin: 15px auto 15px;

      /*background-color: #f8f8f8;*/

      /*background-color: rgba(255,255,255,1);*/

   }

   .wrap p{

     text-align: center;

   }

   .wrap p button{

     text-align: center;

     width: 100px;

   }

   #setBtn{

     background-color: red;

     color: #fff;

     border: none;

   }

   .active{

     background-color: red;

     color: #fff;

   }

  </style>

</head>

<body>

    <div class="wrap" id="wrap">

       <ul class="list">

         <li>01</li>

         <li>02</li>

         <li>03</li>

         <li>04</li>

         <li>05</li>

         <li>06</li>

         <li>07</li>

         <li>08</li>

         <li>09</li>

         <li>10</li>

         <li>11</li>

         <li>12</li>

         <li>13</li>

         <li>14</li>

         <li>15</li>

         <li>16</li>

         <li>17</li>

         <li>18</li>

         <li>19</li>

         <li>20</li>

         <li>21</li>

         <li>22</li>

         <li>23</li>

         <li>24</li>

         <li>25</li>

         <li>26</li>

         <li>27</li>

         <li>28</li>

         <li>29</li>

         <li>30</li>

         <li>31</li>

         <li>32</li>

         <li>33</li>

       </ul>

       <p>

         <button id="setBtn">随机红球</button>

        <button id="clearBtn">清空</button>

       </p>

    </div>

    <script type="text/javascript">

       var ballList = document.getElementById("wrap").getElementsByTagName("li");

       var setBtn =document.getElementById("setBtn");

       var clearBtn =document.getElementById("clearBtn");

       //定义随机数组

       function rnd(min, max) {

       return parseInt(Math.random()*(max - min + 1) + min);

     }

     function rndArray(min, max, length) {

    //先定义一个空数组

    var arr = [];

    //生成一个长度为7的数组

    while(arr.length < length) {

      //生成一个随机数

      var rand = rnd(min, max);

      //判断生成的随机数rand是否在数组arr里,果然不在,就将这个随机数插入到数组里,如果在,执行下一次循环

      if(arr.indexOf(rand) == -1) {

        arr.push(rand);

      }

    }

    arr.sort(function(a, b){return a - b;})

    return arr;

  }

 

  function selectBall() {

    for(var j = 0; j < ballList.length; j++) {

      ballList[j].className = ""

    }

    var arr = rndArray(1,33,7);

    // console.log(arr);

    for(var i = 0; i < arr.length; i++) {

      ballList[arr[i]-1].className = "active";

    }

  }

  var timer = 0;

  setBtn.onclick = function() {

    clearTimeout(timer);

    timer = setInterval(selectBall,100);

    setTimeout(function() { 

      clearTimeout(timer);

    },3000)

    // clearTimeout(timer);

  }

 

  clearBtn.onclick = function() {

    clearTimeout(timer);

    for(var j = 0; j < ballList.length; j++) {

      ballList[j].className = ""

    }

  }

    </script>

</body>

</html>

登录后复制

以上就是本文的详细内容,希望对大家的学习javascript程序设计有所帮助。

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板