js实现随机抽奖效果，简单易上手，适合新手小白

本文案讲解了，随机抽奖的过程和源码。分享给大家供大家参考。

首先我们先看一下效果图看看是不是你想要的呢

        

 接下来就是给它写一下我们想要的样式css：

body{
	background: white;
	color: white;
	}
	table{
	    position: relative;
		background: rgb(231,155,178);
		width: 562px;
		height: 320px;
		margin: 0 auto;
	}
	td{
		width: 80px;
		height: 50px;
		background: aqua;
		line-height: 50px;
		text-align: center;
		}
	button{
		position: absolute;
		top: 20px;
		left: 800px;
		width: 100px;	
		height: 50px;
		}

 现在开始给html开始布局啦！

<table border="0" cellspacing="10" cellpadding="">
		<tr>
			<td>手机</td>
			<td>平板</td>
			<td>电磁炉</td>
		</tr>
		<tr>
			<td>电视</td>
			<th>开始</th>
			<td>洗衣机</td>
		</tr>
		<tr>
			<td>电脑</td>
			<td>冰箱</td>
			<td>衣柜</td>
		</tr>
</table>

最后写它的js效果吧！

var but=document.getElementsByTagName("th")[0];
	var ot=document.getElementsByTagName("td");
	but.onclick=function(){
		if(but.innerHTML=='开始'){
			but.innerHTML='停止'    //这里需要去判断当点击开始时用innerHtml去赋值为停止
			g=setInterval(function(){
				for(var i=0; i<ot.length; i++){
					ot[i].style.background='aqua'
				}
				k=Math.floor(Math.random()*8)//这里用到了随机数，并向下取值
				ot[k].style.background='pink'
			},100)
		}else{
			but.innerHTML='开始'
			clearInterval(g) //清楚间歇调用
			alert(ot[k].innerHTML)
		}
	}