JS动效--双色球

主要思路

前面六个为红色球，选号范围01-33，最后一位是蓝色球，选号范围01-16。

蓝球数字有可能跟红色球一样

所以写了一个生成六位不重复的数组

让后通过innerHTML赋值给className相对应的div里面

i 控制模拟转动的时间在if判断中数字越大转动时间越久

最后就会产生一组对应的随机数

主要是练习创建DOM

然后用innerHTML或者 innerText 来添加文本内容

  1 <head>
  2     <meta charset="UTF-8">
  3     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5     <title>双色球！！！</title>
  6 </head>
  7 <style>
  8     .cont {
  9         width: 700px;
 10         height: 100px;
 11         border: solid;
 12         display: flex;
 13         justify-content: space-around;
 14         align-items: center;
 15     }
 16 
 17     .cont div {
 18         width: 75px;
 19         height: 75px;
 20         border-radius: 50%;
 21         border: 1px solid;
 22         background-color: red;
 23         text-align: center;
 24         line-height: 75px;
 25     }
 26 
 27     #ball7 {
 28         background-color: blue;
 29     }
 30 </style>
 31 
 32 <body>
 33     <div class="cont">
 34         <div class="ball1"></div>
 35         <div class="ball2"></div>
 36         <div class="ball3"></div>
 37         <div class="ball4"></div>
 38         <div class="ball5"></div>
 39         <div class="ball6"></div>
 40         <div id="ball7"></div>
 41     </div>
 42     <button id="refresh">点击生成</button>
 43     <script>
 44         let isRepeat = function (arr) {
 45             for (let i = 0; i < arr.length; i++) {
 46                 for (let j = i + 1; j < arr.length; j++) {
 47                     if (arr[i] == arr[j]) {
 48                         return 1;   //有重复值
 49                     }
 50                 }
 51             }
 52             return 0; //无重复值
 53         }
 54         let randomNum = function () {
 55             let num;
 56             let comNum = [];//用于装6个随机数
 57             while (1) {
 58                 comNum = [];//重要!必须重新初始化数组,否则会造成死循环
 59                 for (let i = 0; i < 6; i++) {
 60                     num = Math.floor(Math.random() * 34 + 1);
 61                     comNum.push(num);
 62                 }
 63                 //在不重复的情况下才返回该数组
 64                 if (!isRepeat(comNum)) {
 65                     return comNum;
 66                 }
 67             }
 68         }
 69         let red1 = document.getElementsByClassName("ball1")[0];
 70         let red2 = document.getElementsByClassName("ball2")[0];
 71         let red3 = document.getElementsByClassName("ball3")[0];
 72         let red4 = document.getElementsByClassName("ball4")[0];
 73         let red5 = document.getElementsByClassName("ball5")[0];
 74         let red6 = document.getElementsByClassName("ball6")[0];
 75         let blue = document.getElementById("ball7");
 76         let startBtn = document.getElementById("refresh");
 77         // let endBtn = document.getElementById("end")
 78         let stopTimer;
 79         startBtn.onclick = function () {
 80             var i=0;
 81             stopTimer = setInterval(function () {
 82                 let arr = randomNum();
 83                 i++;
 84                 console.log(i);
 85                 red1.innerText = arr[0];
 86                 red2.innerHTML = arr[1];
 87                 red3.innerHTML = arr[2];
 88                 red4.innerHTML = arr[3];
 89                 red5.innerHTML = arr[4];
 90                 red6.innerHTML = arr[5];
 91                 if(i==30){
 92                 clearInterval(stopTimer);
 93                 }
 94                 blue.innerHTML =  Math.floor(Math.random() * 17 + 1);
 95             }, 10);
 96             
 97         }
 98     </script>
 99 </body>
100 
101 </html>

猜你喜欢