Mobile phone end turntable lottery code sharing _javascript Tips

The demo effect is as follows:

No nonsense, directly to everyone to paste the code.

HTML section

<div class= "Turntablewap top10" > <table border= "0" cellspacing= "0" > <tr> <td tag= "0" ></td> <td tag=" 1 "class=" even "></td> <td tag=" 2 "></td> <td tag=" 3 "class=" even "></td> </tr> <tr> <td tag= "class=" even "></td> <td colspan=" 2 "rowspan=" 3 "class=" zpbtn "></td> <td tag=" 4 "></td> </tr> <tr> <td tag=" "></td> <td tag=" 5 "class=" even "></td> </tr> <tr> <td tag= "class=" even ">&lT;/td> <td tag= "6" ></td> </tr> <tr> <td tag=" "></td> <td tag=" 9 "class=" even "></td> <td tag=" 8 "></td> <td tag=" 7 "class=" even "></td> </tr> </table> </div>

CSS part, because this turntable is done by the mobile phone, the use of the response-style layout

. turntablewap{Padding:1rem Background:url (. /images/zptabbg.jpg) No-repeat Center; background-size:100% 100%}
. Turntablewap table{width:100%;
Turntablewap table td{vertical-align:middle; text-align:center; Background-color: #ecd295;}
. Turntablewap table TD img{width:100%;
Turntablewap table Td.even{background-color: #f6e8c5}
. turntablewap table td.active{Background-color: #ed9351;}

JS part

$ (". Turntablewap. Table"). css ({"Height": $ (". Turntablewap. Table"). Width ()});//Do Responsive layout, outer table is equal width high var isdo = true;  $ (". Zpbtn"). On (' click ', function () {var num = 13;//background-Incoming prizes var rotanum = 14;//Prize quantity var count = -1;//Highlight, rotate effect var Jishi = 0;//time period var speed = 50;//fast speed var Speedslow = 200;//Slow Speed Choujiang ()//lottery method call, where to make a judgment call Choujiang (), and give Num value function
  Choujiang () {if (ISDO) {isdo=false; $ (". Turntablewap"). CSS ({"background-image": "url (...)
  /images/1.gif) "}" var c = setinterval (function () {if (count >12) {count =-1;
  Count = count+1;
  Jishi = jishi+1;
  $ (". Turntablewap TD"). Removeclass ("active");
  $ (". Turntablewap td[tag=" +count+ "]"). AddClass ("active");
   if (jishi>rotanum*2) {clearinterval (c);
   c = setinterval (function () {count = count+1;
   Jishi = jishi+1;
   $ (". Turntablewap TD"). Removeclass ("active");
   $ (". Turntablewap td[tag=" +count+ "]"). AddClass ("active");
    if (jishi>num+rotanum*2) {clearinterval (c); $ (". Turntablewap"). CSS ({"BackgrounD-image ":" url (..
    /images/zptabbg.jpg) "}) ISDO = true; var JP = $ (". Turntablewap td[tag=" +count+ "]"). FIND ("img"). attr ("alt") alert ("Congratulations on getting" +JP)}},speedslow)}},s
 peed)}else{return; }
 }
})

Above is this article to share the mobile phone end of the Dial lottery code to share, I hope you like.