<!DOCTYPE html>
<html lang="en" style="height: 100%;width: 100%;overflow:hidden;">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<p id="winner"> </p>
<button type="button" id="start">抽奖</button>
</div>
<img src="bg.jpg" class="img"/>
<script>
var names = ["方块A","方块2","方块3","方块4","方块5","方块6","方块7","方块8","方块9","方块10","方块J","方块Q","方块K",
"黑桃A","黑桃2","黑桃3","黑桃4","黑桃5","黑桃6","黑桃7","黑桃8","黑桃9","黑桃10","黑桃J","黑桃Q","黑桃K",
"梅花A","梅花2","梅花3","梅花4","梅花5","梅花6","梅花7","梅花8","梅花9","梅花10","梅花J","梅花Q","梅花K",
"红桃A","红桃2","红桃3","红桃4","红桃5","红桃6","红桃7","红桃8","红桃9","红桃10","红桃J","红桃Q","红桃K",
"大王","小王","1","2","3","4","5","6","7"];
function extrust(){
var index = parseInt(Math.random()*names.length);
document.getElementById('winner').innerText = names[index];
names.splice(index,1);//从参与人中删除中奖人
}
let start = false;
//定时任务标记
var flag;
document.getElementById("start").addEventListener('click',function () {
if(names.length == 0){
document.getElementById('winner').innerText ="抽奖结束";
return;
}
if(start) {
//清除指定标记的定时任务
clearInterval(flag);
extrust();
}else{
flag =setInterval(function () {
document.getElementById('winner').innerText = names[parseInt(Math.random()*names.length)];
},20)
}
//状态取反
start = !start;
})
</script>
</body>
<style>
body{
width: 100%;
height: 100%;
/*background: url("bg.jpg") no-repeat;*/
/*background-size: */
/*background-size: contain;*/
margin: 0;
bottom: 0;
}
.img {
width: 100%;
height: 100%;
background: url("bg.jpg") no-repeat;
/*background-size: */
/*background-size: contain;*/
}
#box{
position: absolute;
left: 50%;
top: 65%;
margin: -250px 0 0 -250px;
text-align: center;
line-height: 100px;
font-size: 40px;
width: 500px;
height: 300px;
background: rgba(255,255,255,0.5);
border-radius: 10px;
box-shadow: 8px 8px 15px rgba(0,0,0,0.5);
}
#start{
margin: 0;
height: 50px;
width: 120px;
font-size: 30px;
color: darkred;
opacity: 0.6;
box-shadow: 3px 3px 3px #f00;
}
#winner{
border-radius: 5px;
background: pink;
margin-left: 100px;
margin-right: 100px;
opacity: 0.5;
}
</style>
</html>
