Principle of lottery: Click the wheel pointer to get a random number (each number corresponds to a prize) and determine the approximate Angle of each prize on the wheel. Then call the jquerysearchable. js plug-in to rotate the wheel and stop at the corresponding Angle of the prize. Of course, you can also use the probability of the lottery for the lottery, anyway, is the first set of things in the draw, and then stop.

Use the jquery. Js jqueryrotation.js // rotation plugin which you can check out.

The HTML code

<html> <head> <meta charset="utf-8" /> <link href="css.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="bg"> <div class="pointer" id="pointer"><img src="images/pointer.png" /></div> <div class="turntable" Id ="turntable"><img SRC ="images/turntable.png" /></div> </div> <script SRC ="jquery-3.3.1.min.js" type="text/javascript" rel="stylesheet"></script> <script src="rotate.js" type="text/javascript" rel="stylesheet" ></script> <script src="js.js" type="text/javascript"></script> </body> </html>Copy the code

Js logic code method 1:

$(function(){ var bRotate=false; $("#pointer").click(function(){ if(bRotate) return false; Var item = RND (0, 10); Console. log(item); // Generate random numbers from 0 to 10 console.log(item); Switch (item){case 0: rotateFn(337,' not winning '); break; Case 1: rotateFn(26, 'c '); break; Case 2: rotateFn(88, 'win 2'); break; Case 3: rotateFn(137, 'win 3'); break; Case 4: rotateFn(185, 'win 4'); break; Case 5: rotateFn(185, 'win 5'); break; Case 6: rotateFn(235, 'winning 6'); break; Case 7: rotateFn(287, 'win 7'); break; RotateFn (337, 'not winning '); break; Case 9: rotateFn(337, 'not winning '); break; Case 10: rotateFn(0, 337, 'not winning '); break; } }) function rnd(n,m){ var num=Math.floor(Math.floor(Math.random()*(m-n+1)+n)) return num; } function rotateFn(angles, TXT){function rotateFn(angles, TXT){ bRotate; $('#turntable').stopRotate(); $(" # turntable "). The rotate ({Angle: 0, / / rotation Angle animateTo: angles + 1800, / / from the point of view of the current rotating duration: how many degrees 3000, Callback :function(){alert(TXT); bRotate=! bRotate; }})}})Copy the code

Of course, we divide the probability of winning into 10 shares, and if we need a higher probability of winning, we can divide it into 10,000 shares. Then 1 to 10 wins 1 to 11 to 20 wins 2…. The rest were losers.

Of course, the actual working lottery probability is written by the back end, our front end just need to play the animation, according to the back end data to stop the wheel in the right place.

If you want to learn more about specific cases of work, you can pay attention to the official account: poetic code, and discuss it together.