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 = ElementById("shu_t1");var span = ElementById("span");//获取元素var king_right = ElementsByClassName("king_right")[0];var prize = ElementsByClassName("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';lick = function () {if (state === true) { //如果是true即开始随机，变为false时结束，不是true时执行elseclearInterval(tr); //清除定时器tr = setInterval(function () {var a1 = und(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.效果如下：
本文发布于:2024-01-30 15:52:00，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170660112221125.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
