<style>
*{
margin: 0;
padding: 0;
}
.title{
width: 100%;
text-align: center;
}
.title>h1{
font-size: 24px;
font-weight: 400;
padding: 30px 0;
}
.itme-case{
width: 400px;
height: 360px;
background-color: pink;
margin: 0 auto;
}
.itme{
width: 100px;
height: 60px;
box-sizing: border-box;
margin: 15px 15px;
background-color: #0f0;
display: inline-block;
text-align: center;
line-height: 60px;
color: #fff;
}
.btn{
width: 400px;
margin: 0 auto;
/* background-color: red; */
text-align: center;
margin-top: 30px;
}
.btn>div{
width: 100px;
height: 40px;
line-height: 40px;
background-color: blue;
margin: 0 auto;
margin-bottom: 30px;
}
.btn>div:nth-child(2){
margin-top: 15px;
}
</style>
</head>
<body>
<div class="title">
<h1>抽奖系统</h1>
</div>
<div class="itme-case" id="itme-case"></div>
<div class="btn">
<div id="btn1">开始</div>
<!-- <div id="btn2">结束</div> -->
</div>
<script>
var eat=['鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝','鱼香肉丝'];
var html='';
var _itme_case=document.getElementById('itme-case');
for(let i=0;i<eat.length;i++){
html+= '<div class="itme">'+eat[i]+'</div>'
}
_itme_case.innerHTML=html;
var _btn1=document.getElementById('btn1');
_btn1.οnclick=function(){
if(_btn1.innerHTML=='开始'){
_timer=setInterval(function(){
let _index=Math.floor(Math.random()*eat.length);
for(let j=0;j<_itme_case.children.length;j++){
_itme_case.children[j].style.backgroundColor='#0f0';
}
_itme_case.children[_index].style.backgroundColor='red';
},100);
_btn1.innerHTML='结束'
}else{
clearInterval(_timer);
_btn1.innerHTML='开始';
}
}
// var _btn2=document.getElementById('btn2');
// _btn2.οnclick=function(){
// clearInterval(_timer);
// }
</script>
</body>