源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: url("bg.jpg") no-repeat;
background-size: 100%;
}
#box{
position: absolute;
left: 50%;
top: 50%;
margin: -300px 0 0 -300px;
width: 600px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 3em;
text-shadow: 0 0 50px #f00;
color: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.5);
border-radius: 10px;
box-shadow: 0 0 20px rgba(255,255,255,0.5);
}
h1{
text-align: center;
color: #eee;
letter-spacing: 10px;
}
#btn{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 50px;
font-size: 1.2em;
margin: 100px 0 0 -100px;
background: aqua;
border: aqua;
border-radius: 15px;
color: white;
outline: none;
}
</style>
</head>
<body>
<h1>圣诞大狂欢</h1>
<div id="box">
</div>
<button id="btn">抽奖</button>
<script>
let arr = ["赵一","钱二","孙三","李四","周五","吴六","郑七","王八"];
function extruct(){
if(arr.length == 0) {
document.getElementById('box').innerText="抽奖结束";
return;
}
let index = parseInt(Math.random() * arr.length);
let lucker = arr[index];
arr.splice(index,1);
document.getElementById('box').innerText = lucker;
}
let start = false;
document.getElementById('btn').addEventListener('click',function (){
if (start){
clearInterval(flag);
extruct();
} else {
flag = setInterval(function (){
document.getElementById('box').innerText = arr[parseInt(Math.random() * arr.length)];
},10)
}
start = !start;
})
</script>
</body>
<html>
1282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
