JS动效--双色球
Posted ATnTent!on
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于JS动效--双色球的主要内容，如果未能解决你的问题，请参考以下文章
CSS动效实战（纯CSS与JS动效）02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探
CSS动效实战（纯CSS与JS动效）02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探