<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{
padding: 0;
margin: 0;
}
#uls{
width: 500px;
height: 500px;
margin: 50px auto;
}
li{
width: 150px;
height: 150px;
background: skyblue;
float: left;
list-style: none;
margin:5px;
color: #fff;
text-align: center;
line-height: 150px;
font-size: 20px;
font-weight: bold;
}
#uls li button{
width: 50px;
height: 30px;
}
.light{
width: 150px;
height: 150px;
background: #666;
color: #fff;
}
</style>
</head>
<body>
<ul id='uls'>
<li>10元优惠券3</li>
<li>30元优惠券0</li>
<li>100元优惠券1</li>
<li>谢谢参与6</li>
<li οnclick="start()">抽奖4</li>
<li>谢谢参与2</li>
<li>50元优惠券7</li>
<li>30元优惠券8</li>
<li>10元优惠券5</li>
</ul>
<script>
var arr=[0,1,2,5,8,7,6,3];//按这个下标依次旋转
var lis=document.getElementsByTagName("li");
var flag = false;
function start(){
if(flag == false){
var num = Math.floor(Math.random()*9);
flag = true;
var second = 50;
if(flag){
time=setInterval(function(){
lis[arr[num]].className="";
num++;
if(num>7){
num=0;
}
lis[arr[num]].className="light";
second+=50;
if(second>1200){
flag = false;
clearInterval(time);
}else{
flag = true;
}
},50)
}
}else{
flag = false;
}
}
</script>
</body>
</html>
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
