Native JS to achieve the nine grid lottery effect!!

First let’s take a look at the effects:

Note: In this case, the stop position input ranges from 0 to 7, representing 8 stop positions (clockwise), and then we set the winning position to 1 in the background.

Distribution of 8 stop locations:

</span> <input type="text" value="0" id=" TXT ">< /div> 0-7, default stop position: 0</span></div> <div id="main"> <div class="num"><img src="./xingyun.jpg" alt=""></div> <div class="num"><img src="./xingyun.jpg" alt=""></div> <div class="num"><img src="./xingyun.jpg" alt=""></div> <div class="num"><img SRC = ". / xingyun. JPG "Alt =" "> < / div > < div class =" num "id =" mid "> < input type =" button "value =" lucky draw "id =" start "> < / div > < div class="num"><img src="./xingyun.jpg" alt=""></div> <div class="num"><img src="./xingyun.jpg" alt=""></div> <div class="num"><img src="./xingyun.jpg" alt=""></div> <div class="num"><img src="./xingyun.jpg" alt=""></div> </div>Copy the code

html, body { width: 100%; height: 100%; } #box { width: 100%; height: 100%; background-color: silver; } #header { width: 600px; height: 70px; margin: 0 auto; text-align: center; padding-top: 30px; background-color: aquamarine; Opacity: 0.65; } #header span { line-height: 35px; font-size: 35px; color: black; } #header input { height: 40px; font-size: 35px; } #comment{ width: 600px; height: 50px; margin: 0 auto; color: black; background-color: aquamarine; Opacity: 0.65; text-align: center; font-size: 30px; } #main { width: 600px; height: 600px; margin: 0 auto; } .num { width: 200px; height: 200px; float: left; Opacity: 0.3; } img { width: 100%; height: 100%; Opacity: 0; opacity: 0; } #mid input { width: 100%; height: 100%; background-color: red; font-size: 40px; color: aliceblue; }Copy the code

Var interval = null; Var inTime = 100; / / to get 1-8 div var divNum = document. GetElementsByClassName (" num "); DivNum = []; divNum = []; divNum = []; for (let i = 0; i < 3; i++) { divList.push(divNum[i]) } divList[3] = divNum[5]; divList[4] = divNum[8]; divList[5] = divNum[7]; divList[6] = divNum[6] divList[7] = divNum[3]; Function animation() {var index = 0; interval = setInterval(function () { //divList[index].style.opacity = 1; If (index > 7) {index = 0; if (index > 7) {index = 0; DivList [7]. Style. Opacity = 0.5; } else if (index ! Opacity = 0; opacity = 0; opacity = 0; } // Set opacity to 1 divList[index].style.opacity = 1; index++; }, 1000)} // When the page is loaded, it will automatically rotate window.onload = animation; Var inputStart = document.getelementById ("start"); var inputStart = document.getelementById ("start"); var valTxt = document.getElementById("txt"); Inputstart. onclick = function () {inputstart. onclick = function () { The default position is 0 if (valtxt.value.length == 1 && parseInt(valtxt.value) >= 0 && parseInt(valtxt.value) <= 7) {// Disable button inputStart.disabled="disabled"; Inputstart. value = "in the lottery..." // Cancel the timer set after the page is loaded (that is, disable automatic rotation) clearInterval(interval); For (let I = 0; i < divList.length; Animation-opacity = 0; animation-opacity = 0; } // Set the faster timer, the interval is inTime=0.1s var index =0; interval = setInterval(function () { //divList[index].style.opacity = 1; If (index > 7) {index = 0; if (index > 7) {index = 0; DivList [7]. Style. Opacity = 0.5; } else if (index ! Opacity = 0; opacity = 0; opacity = 0; } // Set opacity to 1 divList[index].style.opacity = 1; index++; }, inTime) // After two seconds of fast rotation, execute stop function // think a question? After two seconds, will the fast turn continue? SetTimeout (function () {stop(parseInt(valtxt.value)); setTimeout(function () {stop(parseInt(valtxt.value)); }, 2000)} else {alert(" Dear users, please input the correct value of the stop position!" ); } // Stop the rotation, Function stop(luckPosition) {// Clear timer clearInterval(interval) // Get the position of the box with opacity 1 current var current = - 1; for (let i = 0; i < divList.length; i++) { if (divList[i].style.opacity == 1) { current=i; }} // Note: Current +1 stopLuck(luckPosition,current+1,inTime,10)//inTime is the interval for the timer to be executed after clicking "Start". The size is 100. Is the speed of circle} / / function stopLuck (luckPosition, index, time, stepTime) {/ / set a delay timer, 0.1 s later execution (incoming time = 100) / / thinking about a problem, Why is it necessary to set a delay timer here, and to begin with, the delay time is the inTime=100 that was passed in? Answers are in the comments below! SetTimeout (function () {// resetting opacity // // First question: Also, setting opacity // is unnecessary. In fact, the purpose of resetting opacity // is to reset opacity while recursing the function. Second question: When stopLuck is first executed (the same time that stop calls stopLuck at the beginning), the index value is actually 1 higher than the box with opacity of 1, because the output is: Current +1, therefore, the following type of resetting opacity will cause an error, but here's the point! The first time the stopLuck function is performed, the box with opacity 1 has already been performed one more time, so the first time the stopLuck function is performed, If (index > 7) {index = 0; DivList [7]. Style. Opacity = 0.5; } else if (index ! Opacity = 0) {opacity [index - 1].style. Opacity = 0} / / if the rotation time is too short, or the current position is not equal to the stop position, recursive, until the rotation to the stop position / / (note: the first delay time for time = inTime = 0.1 s) if (time < 400 | | index! = luckPosition) {// Think about two questions? // If index == luckPosition // Since time < 400, this will still be executed, that is, even if the current position is equal to the stop position, in order to slow down the speed first. // Index is then ++ until time>=400 and index==luckPosition is no longer executed. // Second question, why is it getting slower? // At the beginning, time=100, stepTime=10, and index = current opacity is the subscript of the box 1. If the time value and //stepTime value increase, the delay time of the time-lapse inside stopLuck() will also increase, resulting in a slower turn. So as to achieve the effect of turning stepTime++; time += stepTime; index++; stopLuck(luckPosition, index, time, stepTime); SetTimeout (function () {setTimeout(function () {setTimeout(function ()) {setTimeout(function ()) { If (luckPosition == 1) {alert(" Congratulations on winning! ") {alert(" Congratulations on winning!" // Restore button inputstart. disabled=false; Inputstart. value = "draw "; animation(); } else {alert(" Sorry, you didn't win the lottery!" // Restore button inputstart. disabled=false; Inputstart. value = "draw "; animation(); } },1000) } },time) } }Copy the code