1.话不多说，直接上代码了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="fk.PNG">
<title>随机抽奖</title>
<style>
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
background: url("big.jpg") no-repeat;
}
.boxKing{
width: 1500px;
display: flex;
position: relative;
margin: 0 auto;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}
.king_left{
width: 800px;
height: 900px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
margin-right: 50px;
}
#shu_t1 {
width: 100%;
height: 300px;
color: #ff8b00;
box-shadow: 0 0 50px #009bfd inset;
font-size: 50px;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
line-height: 300px;
text-align: center;
margin-bottom: 20px;
border-radius: 10px;
}
.prize{
width: 100%;
height: 150px;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
.prize>div{
width: 120px;
height: 50px;
color: #ff8b00;
box-shadow: 0 0 20px #009bfd inset;
text-align: center;
line-height: 50px;
cursor: pointer;
border-radius: 10px;
}
#span {
display: block;
width: 100%;
height: 70px;
line-height: 70px;
background: linear-gradient(#b100ff,deepskyblue);
border-radius: 10px;
color: #fff;
text-align: center;
margin: 0 auto;
font-size: 24px;
font-family: 华文细黑;
}
#span:hover {
background: linear-gradient(darkorange,red);
cursor: pointer;
}
.king_right{
width: 500px;
height: 800px;
color: #ff8b00;
overflow: auto;
box-shadow: 0 0 50px #009bfd inset;
font-size: 26px;
border-radius: 20px;
}
.king_right>li{
margin-top: 10px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="boxKing">
<div class="king_left">
<div id="shu_t1">中奖名字</div>
<div class="prize">
<div>特等奖</div>
<div>一等奖</div>
<div>二等奖</div>
<div>三等奖</div>
<div>幸运奖</div>
</div>
<span id="span">开 始</span>
</div>
<ol class="king_right"></ol>
</div>
<script>
var arr1 = ["小明", "小王", "小赵", "小红", "小亮", "小强", "小云", "小芳", "小原", "小马", "小虎"];
var shu_t1 = document.getElementById("shu_t1");
var span = document.getElementById("span");//获取元素
var king_right = document.getElementsByClassName("king_right")[0];
var prize = document.getElementsByClassName("prize")[0];
var prizeChi = prize.children;
var state = true;//定义状态，开始和结束
var tr;
for (let i=0;i<prizeChi.length;i++){
prizeChi[i].onclick = function () {
for (let i=0;i<prizeChi.length;i++){
prizeChi[i].style.boxShadow = '';
}
prizeChi[i].style.boxShadow = '0 0 20px #fff inset';
span.onclick = function () {
if (state === true) { //如果是true即开始随机，变为false时结束，不是true时执行else
clearInterval(tr); //清除定时器
tr = setInterval(function () {
var a1 = Math.round(Math.random() * (arr1.length - 1));
shu_t1.innerHTML = arr1[a1];
}, 0.1);
span.innerHTML = "停 止";//更改按钮的内容
}else{
clearInterval(tr); //清除定时器
span.innerHTML = "开 始";
arr1.splice(arr1.indexOf(shu_t1.innerHTML),1); //抽中它就将它从数组中删除
console.log(arr1);
king_right.innerHTML += "<li>"+ shu_t1.innerHTML+" : "+"<b style='color: red'>"+prizeChi[i].innerHTML+"</b>" +"</li>";
}
state = !state;
}
}
}
</script>
</body>
</html>
————————————————
2.效果如下：
