JS抽奖系列2-转轮

效果图 

CSS部分

			*{
				margin: 0px;
				padding: 0px;
			}
			table{
				border:none;
				margin: 100px auto;
			}
			.similar{
				width: 40px;
				line-height: 40px;
				text-align: center;
				border: none;
			}
			#go{
				border: none;
				text-align: center;
				line-height: 100%;
				font-size: 30px;
				font-weight: bold;
				color: white;
				background-color: red;
			}

HMTL部分

		<div class="outer">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<td class="same1 similar" style='background-color: pink;'>1</td>
					<td class="same2 similar" style="background-color: yellow;">2</td>
					<td class="same3 similar" style='background-color: pink;'>3</td>
					<td class="same4 similar" style="background-color: yellow;">4</td>
				</tr>
				<tr>
					<td class="same12 similar" style="background-color: yellow;">12</td>
					<td rowspan="2" colspan='2' id='go'>GO!!</td>
					<td class="same5 similar" style='background-color: pink;'>5</td>
				</tr>
				<tr>
					<td class="same11 similar" style='background-color: pink;'>11</td>
					<td class="same6 similar" style="background-color: yellow;">6</td>
				</tr>
				<tr>
					<td class="same10 similar" style="background-color: yellow;">10</td>
					<td class="same9 similar" style='background-color: pink;'>9</td>
					<td class="same8 similar" style="background-color: yellow;">8</td>
					<td class="same7 similar" style='background-color: pink;'>7</td>
				</tr>
			</table>
		</div>

JS部分

			window.onload=function(){
				var Go=document.getElementById('go');
				var simi=document.getElementsByClassName("similar");//获取所有的数字格子
				var i=1;

				Go.onclick=function(){//点击事件，让装盘动
					anytime=Math.random()*5000+4800;//保证2圈的基础上，随机停。
					var stime=setInterval(run,200);
					setTimeout(stop,anytime);
					function stop(){//让转轮停止
						clearInterval(stime);
					}
				}
				function run(){
						for(var j=1;j<=simi.length;j=j+2){
							var clear=document.getElementsByClassName("same"+j)[0];
							clear.style.backgroundColor='pink';
						}//将奇数颜色恢复默认
						for(var k=2;k<=simi.length;k=k+2){
							var clear2=document.getElementsByClassName("same"+k)[0];
							clear2.style.backgroundColor='yellow';
						}//将偶数颜色恢复默认
						var same=document.getElementsByClassName("same"+i)[0];//让滚轮动，给对应的格子变色
						same.style.backgroundColor='blue';
						i++;
						if(i>simi.length){
							i=1;
						}
					}
			}