<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: aqua;
width: 400px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
p {
text-align: center;
}
button {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<p>点名器</p>
<p class="p1">姓名</p>
<button>开始抽取</button>
</div>
<script>
// var a = Math.floor(Math.random() * (21) + 0);
var but = document.querySelector('button')
var p1 = document.querySelector('.p1')
var a;
var isTrue = true
var arr1 = ["赵艳", "林明", "郭秀英"]
but.addEventListener('click', function() {
if (isTrue) {
isTrue = false;
if (!arr1.length) {
// 空数组
if (confirm('所有的人都被抽过，是否进行下一轮')) {
// 进行下一轮
arr1 = ["赵艳", "林明", "郭秀英"]
} else {
// 不进行下一轮
return;
}
}
but.innerText = '开始点名...'
var time1 = setInterval(function() {
a = arr1[Math.floor(Math.random() * arr1.length)]
p1.innerHTML = a;
}, 100);
setTimeout(function() {
clearInterval(time1)
but.innerText = '开始点名'
var index = arr1.indexOf(a)
arr1.splice(index, 1);
isTrue = true
console.log(a)
}, 1000)
}
})
</script>
</body>
</html>
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
