HTML部分
<div class="content">
<div id="box">随机点名器</div>
<button id="btn">开始</button>
</div>
CSS部分
.content {
width: 400px;
margin: 100px auto;
text-align: center;
}
#box {
line-height: 150px;
font-size: 80px;
}
#btn {
width: 200px;
height: 80px;
font-size: 40px;
border: none;
}
JavaScript部分
(function () {
//定义数组
var nameList = ['李信', '百里守约', '上官婉儿', '庄周', '关羽', '桑启', '莱西奥', '云中君', '武则天', '张良', '妲己', '海月', '蔡文姬', '大乔', '鲁班大师', '马可波罗', '孙尚香', '鲁班', '王昭君', '东皇太一', '夏侯惇', '貂蝉', '米莱迪', '瑶', '孙膑', '李白', '芈月'];
//获取元素
var box = document.querySelector('#box');
var btn = document.querySelector('#btn');
//定义变量,保存定时器标记
var intervalId = null;
//点击按钮,监听单击事件
btn.onclick = function () {
//判断当前按钮上的文字
if (btn.innerHTML === '停止') {
btn.innerHTML = '继续';
//停止定时器
clearInterval(intervalId);
} else {
//开始与停止时修改为继续
btn.innerHTML = '停止';
//开启定时器
intervalId = setInterval(function () {
//从数组中随机取索引
var index = Math.floor(Math.random() * nameList.length);
//根据索引取出元素 显示在box上
box.innerHTML = nameList[index];
}, 100);
}
};
})();