<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
list-style: none;
}
li{
text-align: center;
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
background: #ccc;
}
.box{
width: 306px;
margin: 100px auto 0;
position: relative;
}
ul{
width: 306px;
}
.ok{
width: 200px;
border: 1px solid #000;
text-align: center;
padding: 10px 30px;
background: #ccc;
position: absolute;
top: -50px;
left: 50%;
margin-left: -100px;
}
#ok span{
color: red;
}
#go{
position: absolute;
right:63px;
top: 103px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="ok">恭喜你中了<span id="ok"></span>等奖</div>
<input type="button" id="go" value="抽奖" />
<ul>
<li>女朋友</li>
<li>幸运奖</li>
<li>一个亿</li>
<li>考试全过</li>
<li>新手机</li>
<li>新电脑</li>
<li>哈哈哈</li>
<li>崩溃了</li>
<li>写完了</li>
</ul>
</div>
</body>
<script>
var go = document.getElementById('go');
var ok = document.getElementById('ok');
var lis = document.getElementsByTagName('li');
var num ;
var n=-1;
function run () {
n++;
num--;
for (var i=0;i<lis.length;i++) {
lis[i].style.background = '';
}
lis[n].style.background = 'red';
if (num<=0) {
clearInterval(dsq);
ok.innerHTML = n+1;
}
if (n>=8) {
n=-1
}
}
var dsq;
go.onclick = function () {
clearInterval(dsq);
n=-1
num = parseInt(Math.random()*10)+9;
dsq = setInterval('run()',100);
}
</script>
</html>
