Code sharing and code sharing

Code sharing and code sharing

The demo is as follows:

I am not talking nonsense. I am posting Code directly to you.

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> <td tag = "13" class = "even">  </td> <td colspan = "2" rowspan = "3" class = "zpBtn">  </td> <td tag =" 4 ">  </td> </tr> <td tag = "12">  </td> <td tag = "5" class = "even">  </td> </tr> <td tag = "11" class = "even">  </td> <td tag = "6">  </td> </tr> <td tag = "10">  </td> <td tag = "9" class = "even">  </td> <td tag =" 8 ">  </td> <td tag =" 7 "class =" even ">  </td> </tr> </table> </div>

Css part. Because the turntable is made on the mobile phone end, the response layout is adopted.

.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 Section

$ (". TurntableWap. table "detail .css ({" height ": $ (". turntableWap. table "). width ()}); // make a responsive layout. The outer table is var isdo = true; $ (". zpBtn "). on ("click", function () {var num = 13; // The prize var rotaNum = 14 in the background; // The number of prizes var count =-1; // highlight, rotation effect var jishi = 0; // time range var speed = 50; // fast speed var speedSlow = 200; // slow speed choujiang () // call the lottery method. choujiang () is called for judgment, and the 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! Get it" + jp) }}, speedSlow) }}, speed)} else {return ;}}})

The above is the code for the mobile phone turntable lottery, which we will share with you.