Lucky Draw,

Lucky Draw,

Var oPointer = document. getElementsByTagName ("img") [0]; var oTurnable = document. getElementsByTagName ("img") [1]; var cat = 15; // each region is 15 degrees long. A total of 24 regions var num = 0; var offOn = true; // whether the lottery is in progress. // click the pointer to start drawing oPointer. onclick = function () {if (offOn) {oTurnable. style. transform = "rotate (0deg)"; offOn =! OffOn; ratating () ;}/// rotate the function ratating () {var timer = null; var rdm = 0; // random degrees clearInterval (timer ); timer = setInterval (function () {if (Math. floor (rdm/360) <3) {rdm = Math. floor (Math. random () * 3600);} else {oTurnable. style. transform = "rotate (" + rdm + "deg)"; clearInterval (timer); setTimeout (function () {offOn =! OffOn; num = rdm % 360; // The clockwise angle of the turntable is positive if (num <= cat * 1) {alert (""); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 2) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 3) {alert ("second prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "second prize");} else if (num <= cat * 4) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 5) {alert ("third prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "third prize");} else if (num <= cat * 6) {alert ("4th Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 7) {alert ("Lucky Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "Lucky Prize");} else if (num <= cat * 8) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 9) {alert ("First Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "First Prize");} else if (num <= cat * 10) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 11) {alert ("Lucky Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "Lucky Prize");} else if (num <= cat * 12) {alert ("4th Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "IV");} else if (num <= cat * 13) {alert ("third prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "third prize");} else if (num <= cat * 14) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 15) {alert ("second prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "second prize");} else if (num <= cat * 16) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 17) {alert ("4th Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 18) {alert ("Lucky Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "Lucky Prize");} else if (num <= cat * 19) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 20) {alert ("Lucky Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "Lucky Prize");} else if (num <= cat * 21) {alert ("4th Prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "IV");} else if (num <= cat * 22) {alert ("third prize"); console. log ("rdm =" + rdm + ", num =" + num + "," + "third prize");} else if (num <= cat * 23) {alert ("Zhou Jun Kee"); console. log ("rdm =" + rdm + ", num =" + num + "," + "");} else if (num <= cat * 24) {alert ("Lucky Prize ");

Console. log ("rdm =" + rdm + ", num =" + num + "," + "Lucky Prize") ;}, 4000) ;}, 30 );}

 

# Bg {width: pixel PX; height: 600px; margin: 0 auto; background: url(turnable-bg.jpg) no-repeat; position: relative;}/* img matches from alt, until pointer ends */img [alt = "pointer"] {position: absolute; top: 125px; left: 310px; z-index: 10 ;} img [alt = "turnable"] {position: absolute; z-index: 5; top: 50px; left: 80px; transition: all 4S ;}

 

<Div id = "bg">   </div>

Note the rotation angle in the lottery code: In computer languages, the clockwise rotation is the positive direction, while the clockwise rotation is the negative direction.

Summary steps: 1. Find the picture material, of course, you can also design one by yourself. (Disc and pointer)

2. Use html to write the materials to the page.

3. Set the style to display the nice page effect.

4. The most important part is the implementation of js:

. (1) Click events;

(2) setting of Rotation Degree (intermittent call, judgment Statement)

The effect is as follows: