本文主要是介绍JavaScript_9_练习:随机点名,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习:随机点名</title><style>div {margin: 50px auto;width: 500px;height: 300px;border: 3px solid #ccc;text-align: center;}div p {margin: 50px;font-size: 50px;color: red;}div button {margin: 20px;width: 90px;height: 40px;}</style>
</head><body><div><h2>随机点名</h2><p>???</p><button class="start">开始</button><button class="end" disabled>结束</button></div><script>const arr = ['张三', '李四', '王五', '赵六', '冯七']const start = document.querySelector(".start")const end = document.querySelector(".end")const p = document.querySelector("p")let alter = 0let num = 0start.addEventListener("click", () => {alter = setInterval(() => {num = Math.floor(Math.random() * arr.length)p.innerText = arr[num]}, 25)start.disabled = trueend.disabled = false})end.addEventListener("click", () => {clearInterval(alter)arr.splice(num, 1)if (arr.length === 1) {start.disabled = trueend.disabled = true} else {end.disabled = truestart.disabled = false}})</script>
</body></html>
这篇关于JavaScript_9_练习:随机点名的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!