JS抽奖系列1-生死簿

效果图

CSS部分：

			ul{
				list-style: none;
				width: 800px;
				margin: 0 auto;
				border: 1px solid;
			}
			li{
				width: 80px;
				line-height: 80px;
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				float: left;
				margin: 10px;
				background-color: greenyellow;
			}
			#head{
				width: 100%;
			}
			#head>div{
				width: 100px;
				margin: 0 auto;
				background-color: yellow;
			}
			#head>span{
				font-size: 16px;
				display: inline-block;
				width: 100px;
				float: right;
				background-color: red;
			}
			#foot{
				width: 100%;
			}
			#foot{
				background-color: blue;
			}

HTML部分：

		<ul>
			<li id="head"><div class="headline">一阳指</div><span id="Stop">幸运儿</span></li>
			<li class="same">2</li>
			<li class="same">3</li>
			<li class="same">4</li>
			<li class="same">5</li>
			<li class="same">6</li>
			<li class="same">7</li>
			<li class="same">8</li>
			<li class="same">9</li>
			<li class="same">10</li>
			<li class="same">11</li>
			<li class="same">12</li>
			<li class="same">13</li>
			<li class="same">14</li>
			<li class="same">15</li>
			<li class="same">16</li>
			<li class="same">17</li>
			<li class="same">18</li>
			<li class="same">19</li>
			<li class="same">20</li>
			<li class="same">21</li>
			<li class="same">22</li>
			<li class="same">23</li>
			<li class="same">24</li>
			<li class="same">25</li>
			<li id="foot"><div class="congra">谁将获得本次机会！</div></li>
		</ul>

JS部分：

			window.onload=function(){
				var same=document.getElementsByClassName('same');
				var start=document.getElementById('head').getElementsByTagName('div')[0];
				var txt=document.getElementById('foot').getElementsByTagName('div')[0];
				var stop=document.getElementById('Stop');
				var key=true;//设置开关，使得定时器不会执行多次
				start.onclick=function(){//一阳指
					if(key){
						go=setInterval(run,100);//开启定时器
					}
					key=false;
				}
				function run(){
					for(var i=0;i<24;i++){
						same[i].style.backgroundColor='greenyellow';//遍历使得样式默认
					}
					random=Math.floor(Math.random()*24);
					same[random].style.backgroundColor='red';//给随机数加样式
				}
				stop.onclick=function(){幸运儿
					clearInterval(go);
					txt.innerHTML=same[random].innerHTML;
					key=true;
				}
			}