Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Native JS to achieve the rotation lottery function

Simulation do the end of the world bright moon knife has come to an end, summed up some later can also be used to use the small function ——– this is the lottery function

This is a lottery page, to achieve a click on the lottery after each piece of prize highlighted. And then it keeps spinning, slowing down, until it stops.

First this highlight is achieved by overlaying each prize with a changed opacity grey image

So this is what you see above, and the code to do that is to add a div to the HTML

 <div id="swfcontent_hover" class="swfcontent_hover"></div>
Copy the code

Add styles to the CSS to make it shiny

.swfcontent_hover{
   position: absolute;
   left: 0px;
   top: 0px;
   width: 304px;
   height: 204px;
   display:none;
   background: url("images/sel.png") no-repeat;
   opacity:.6;
}
Copy the code

The logic of the whole thing is,

1. Click the raffle swfContent_hover display need = “block”, 2. Then limit it according to the width and height of the lottery interface, control the left and top of SWfContent_hover to make it move clockwise, first move left, move 340px each time (the width of the prize grid), move to its left=680 and stop, move down. 3. Move down 250 at a time, move to the right when you reach top=500px… And so on, clockwise rotation.

// Lottery module
var lottery = document.getElementById("swfcontent_start"); ---- gets the div that clicks the lottery button in the middle// Set two variables for the following move judgment
var number = 0; ---- represents the variable leftvar number1 = 0; ---- represents the variable lottery.onclick = of topfunction () {
    autoplay3();
}
// Change left and top for the white box
function directionshift() {
    var leap = document.getElementById("swfcontent_hover");
    leap.style.display = "block";
    leap.style.left = number + "px";
    leap.style.top = number1 + "px";

}
// Move right and down timers
var timer1 = null;
var time = 50;
function autoplay3() {
    timer1 = setInterval(function () {
        directionshift();
        // Move the judgment
        if (number < 680 && number1 == 0) {               / / to the left
            number += 340;
        } else if (number1 < 500&& number ! =0) {        / / down
            number1 += 250;
        } else if (number <= 680 && number > 0) {         / / to the right
            number -= 340;
        } else if (number == 0 && number1 > 0) {          / / up
            number1 -= 250; 
        }
        if (number == 0 && number1 == 0) {        // When you return to the origin, make the next circle slow down
            clearInterval(timer1);                // Clear the original time
            time += 100;                          // Each time time is extended by 100
            autoplay3();
            if (time == 450) {                    // Make the highlighted image stop moving until the speed is very slow and time equals 450
                clearInterval(timer1);            // Clear the timer
                lottery.onclick = function () {    // If you click again, judge
                    alert("I've run out of raffles for today.");
                    return false;
                }
                alert("Congratulations on getting grade 1 Cold Stone *3, please note check!");        // The prize block that falls when time

            }
        }
    }, time);
}
Copy the code

There is a small knowledge point about timer, timer if you want to change the time value each time, you must first clear the original timer, and then change the time time. For example, you can’t make time+=100 directly in your code.

For this lottery function, this content can be implemented, if there are any questions, please correct.