一、案例描述

点击开始按钮，所有的开始滚动显示，在不点击停止的情况下，“开始”按钮无法再次点击。之后停止之后才能再开始点名。

二、案例效果演示

请添加图片描述

三、案例局部代码

html代码：

<h1 id="h1"></h1>
<button onclick="start()">开始</button>
<button onclick="stops()">停止</button>

js代码：

<script>var h1 = document.getElementById('h1');var startbtn = document.querySelector('button');var arr = ['王一博', '肖战', '杨洋', '易烊千玺', '迪丽热巴', '许佳琪', '赵今麦'];var dong;function start() {startbtn.disabled = true; //点过开始按钮后就不能再点击了。只有停止过后才可以再点。dong = setInterval(getRandom, 50); //想改时间的话从这里改名字切换的时间。}function stops() {clearInterval(dong); //清除定时器if (startbtn.disabled == true) {startbtn.disabled = false;}}function getRandom() {var runNum = Math.floor(Math.random() * arr.length); //含最大值，含最小值 索引值的随机数。h1.innerHTML = arr[runNum];}
</script>

四、案例整体代码

<!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>点名</title>
</head><body><h1 id="h1"></h1><button onclick="start()">开始</button><button onclick="stops()">停止</button><script>var h1 = document.getElementById('h1');var startbtn = document.querySelector('button');var arr = ['王一博', '肖战', '杨洋', '易烊千玺', '迪丽热巴', '许佳琪', '赵今麦'];var dong;function start() {startbtn.disabled = true; //点过开始按钮后就不能再点击了。只有停止过后才可以再点。dong = setInterval(getRandom, 50); //想改时间的话从这里改名字切换的时间。}function stops() {clearInterval(dong); //清除定时器if (startbtn.disabled == true) {startbtn.disabled = false;}}function getRandom() {var runNum = Math.floor(Math.random() * arr.length); //含最大值，含最小值 索引值的随机数。h1.innerHTML = arr[runNum];}</script>
</body></html>