效果展示
HTML
<div id="circle">
点击开始，开始抽奖
</div>
<button id="btn">开始</button>
JS
定义数组等
var arr = ["iPhoneX", "平衡车","洗衣机","鞠婧祎","邓紫棋","抽纸一包","电吹风","行李箱","兰博基尼","一百万现金","遥控车","波音747","印度7日游","小爱同学","笔记本电脑","洗发水","泡面一箱","拼多多助力","女朋友一个","回到过去","香槟","一句话","一个拥抱","一个眼神","一支笔"];
var result = document.getElementById("circle"); //结果展示
var btn = document.getElementById("btn"); // 开始按钮
var count = 0; //点击次数
setInterval()，clearInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
btn.onclick = function() {
count++; //每点击一次btn按钮，count自增一次
if (count % 2 != 0) {
btn.innerText = "暂停"; //点击次数为 奇数 时，按钮显示为暂停
timer = setInterval(function() {
var i = Math.round(Math.random() * (arr.length - 1)); //随机获取下标i，范围0 ~ arr.length-1
result.innerText = arr[i] //将随机选中的元素，输出到result上
}, 1) //每 一毫秒 调用一次函数
} else {
clearInterval(timer); //再次点击count自增加 1，执行else，停止timer的setInterval（）
btn.innerText = "开始"; //改变按钮显示为开始
}
}
setInterval()的应用
bug：加载过程中再点击按钮，会再调用函数，导致来回闪烁情况。
解决方案:暂无 2021/6/13
效果图
JS
function move() {
var elem = document.getElementById("myBar");
var hp = document.getElementsByTagName("h1")[0];
var width = 0;
var id = setInterval(frame, 100); //每100毫秒执行一次frame函数
function frame() {
if (width == 100) { //当width为100时，停止 id
clearInterval(id);
} else {
width++;
elem.style.width = width + '%'; //给elem元素添加css样式 宽度width
hp.innerText = width+'%'; //将当前宽度输出到 hp 上
}
}
}
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
</head>
<style>
#myProgress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
}
#myBar {
background-color: #4CAF50;
width: 1px;
height: 30px;
position: absolute;
}
</style>
<body>
<h1>JavaScript 进度条</h1>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">点我</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var hp = document.getElementsByTagName("h1")[0];
var width = 0;
var id = setInterval(frame, 100);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
hp.innerText = width+'%';
}
}
}
</script>
</body>
</html>
