JS realize large turntable lottery game example

This article describes the JS realization of the large turntable lottery game. Share to everyone for your reference. The implementation methods are as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139-140

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <title>js draw </title> <style type= "Text/css" > td{width:50px;height:50px;border:3px solid #ccc; Text-align:center;vertical-align:middle} </style > </head> <body> <table id= "TB" > <tr> <TD>1</TD><TD>2</TD><TD >3</td><td>4</td><td>5</td> </tr> <tr> <TD>16</TD><TD ></td><td></td><td></td><td>6</td> </tr> <tr> <td> 15</td><td></td><td></td><td></td><td>7</td> </tr> <tr> <td>14</td><td></td><td></td><td></td><td>8 </td> </tr> <tr> <TD>13</TD><TD>12</TD><TD>11</td><td>10</td><td>9</td> </tr> </table> <p></p> Please enter one of 1-16 integers that represents the location to stop <input id= "Txtnum" value= "type=" text "/><input type=" button "value=" Start "onclick=" Startgame () "/> <script type=" Text/javascript "> * * Delete the left and right ends of the space/function Trim (str) {return str.replace (/(^s*) | (s*$)/g, ""); /* Define array/function Getside (m,n) {//initialize array var arr = []; for (var i=0;i<m;i++) {Arr.push ([]); for (Var j=0;j<n;j++) { Arr[i][j]=i*n+j; }//Get array var resultarr=[on the outermost ring]; var tempx=0, tempy=0, direction= "along", count=0; while (tempx>=0 && tempx<n && tempy>=0 && tempy<m && count<m*n) {count++; Resultarr.push ([tempy,tempx]); if (direction== "along") {if (tempx==n-1) tempy++; else tempx++; if (tempx==n-1&&tempy==m-1) direction= "Inverse" } else{if (tempx==0) tempy--else tempx--; if (tempx==0&&tempy==0) break;} return Resultarr; var index=0,//Current highlight location previndex=0,//Previous position SPEED=300,///initial speed time,//define Object arr = Getside (5,5),//Initialize array endindex=0,//decide in which grid to slow TB = document.getElementById ("TB"),//obtained Take TB object cycle=0,//rotation number of endcycle=0,//Calculate the number of laps flag=false,//end rotation flag quick=0; Accelerated function Startgame () {cycle=0; flag=false; Endindex=math.floor (Math.random () *16); Endcycle=math.floor (Math.random () *4); endcycle=1; Time = SetInterval (star,speed); The function Star (num) {//Horse speed variable if (flag==false) {//Walk five grid start acceleration if (quick==5) {clearinterval (time); speed=50; Time=setinterval (Star,speed); }//Run n-Ring deceleration if (cycle==endcycle+1 && index==endindex) {clearinterval (time); speed=300; Flag=true; Trigger End Time=setinterval (star,speed); } if (index>=arr.length) {index=0; cycle++;}//End rotate and select number if (Flag==true && index==parseint (Trim ( document.getElementById ("Txtnum"). Value)-1) {quick=0; clearinterval (time);} tb.rows[arr[index][0]].cells[arr[ Index][1]].style.border= "3px solid red"; if (index>0) previndex=index-1; else{previndex=arr.length-1;} tb.rows[arr[previndex][0]].cells[arr[pRevindex][1]].style.border= "3px solid #ccc"; index++; quick++; }/* Window.onload=function () {time = SetInterval (star,speed);} */</script> </body> </html>

The

wants this article to help you with your JavaScript programming.