The code address

preface

This component is I have written about the mobile terminal H5 activity rotary table lottery page, at that time after the completion of the determination of good look, pretty cool, so put it out separately, later to write similar pages, you can refer to some of the implementation principle!

The main technology used

  • Math.random() is used to implement a range of random numbers, which are used to randomly obtain the number of disks that the user needs to rotate each time they click the lottery. The code principle is as follows:
    // Get a value between two numbers
    function getRandomNumber(min,max){
        return Math.floor(Math.random() * (max - min)) + min;
    };Copy the code

  • In the realization of the turntable, with two random number, a smaller, a larger, mainly used to control the pointer and prize turntable rotation at different speeds, to achieve parallax to the user!

  • Before rotation, different initial Angle represents different different prizes, so the final rotation Angle is: random number N 360. For example, the default Angle of “XX prize” is 45 degrees relative to the turntable, and the random number is 2 when drawing, then the turntable should rotate 2 360 + 45 = 765 degrees. In this way, the Angle of each turntable can be corresponding to the product!

  • Animation is mainly used to implement setTimeout and window requestAnimationFrame, but at the time of using setTimeout, mainly in order to prevent the jitter of animation, should guarantee the draw 60 frames page 1 s, that is to say, the wheel to turn 3 laps, in 3 seconds, So every time you call setTimeout, the rotation Angle is:

    var perAngle = 3 * 360 / 3 * 60;/ / 6 °Copy the code
  • After writing this code, it is to view the effect on THE PC. When producing the effect on the mobile phone, there will be problems such as slow loading of pictures on the lottery page and slow rotation of flashing lights. We can solve the problems by using the following methods:

1, images, the problem of low load we can use one of the most primitive, the most stupid and most cost-effective method (other ways to use the CDN, etc., are not covered here) – preload, method is prior to entering this page, other pages on the same server to load the corresponding pictures again, so that when entering to the current page, The images that need to be loaded are already in the cache, so it will be faster to load the images directly from the cache. For example, if we need picture 1 on page B, we can load it on page A first. Remember, page A and page B are under the same server.


    <! - a page - >
    <div>
        <img src="Picture 1" />
    </div>


    <! - b page - >
    <! Load the image from the cache.
    <div>
        <img src="Picture 1" />
    </div>Copy the code

2, flashing lights stuck, the problem can be adjusted to respond to the picture of the animation of the update frequency to solve

  • In addition, in order to prevent users click the lottery, many times to send data to the background, and to a certain the ajax request, of course, in order to prevent continuous click the draw button, also many times the animation, also has carried on the response of the processing, the main idea is to click on the draw, show a mask layer, the layer mask of z – the index is greater than the draw button, This prevents the user from clicking the lucky draw button again, and then hides the mask once the draw is successful. The main principle code is as follows:
    var isRequesting = false;
    function getData(){
        // Returns if the current user is raffling
        if(isRequesting)return false;
        isRequesting = true;
        // Display the mask layer
        $("._mask").css('display'.'block');
        // Other code omitted
        $.ajax({
            url:server_api_address,
            type:'GET'.success : function(data){
                isRequesting = false;
                // Other code omitted


                // After the current rotation animation is complete
                // Hide the mask layer
                animationComplate(function(){$("._mask").css('display'.'none');
                });
            },
            error:function(data){
                // code omitted}}); };Copy the code

Areas for improvement

  • So far, the only thing I can see missing is that the dials and hands are always spinning at a constant speed, which makes it hard to give users the thrilling, expectant feeling of a real lottery. So the speed of the turntable algorithm should do some improvement! Make the raffle feel closer to the real thing!

  • Of course, other local problems, here do not pay attention to talk about, because it involves the specific front and back of the docking problem!