效果展示
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>
