前端入门篇（四十九）JS应用4转盘抽奖活动记录

效果：

4.在”开始“添加点击事件，当点击时才开始跑转盘

---

在”开始“添加一个id，方便在JS中使用

然后将计时器的开启放在”开始“的点击事件中

var start = document.getElementById(‘start’);

start.onclick = function(){

setInterval(tdFunc, 100);

}

效果：点击”开始“，转盘转动；不清除线程的情况下再次点击”开始“，会加速转盘转速

5.跑三圈后在一个随机位置停下

---

需要引入一个随机数，在点击事件里初始化，设定一个随机数，并开启计数器，当转盘转的步数到达这个随机数时，停止

效果：

6.前面转的慢，中间转得快速，最后面转得缓慢

---

当步数到达指定值时，清除线程，重新开启一个新速度的线程

function tdFunc(){

//之前选中的取消

tdList[tdAry[tdId]].className = ‘’;

//下一个被选中

tdId = tdId + 1 >= tdAry.length ? 0 : tdId+1;

tdList[tdAry[tdId]].className = ‘select’;

runNum ++;//步数计数，逐步增加

if (runNum > this.maxNum){

clearInterval(run);

return;

}//当步数到达指定值时，停止

if (runNum == 6){

clearInterval(run);

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

(runNum == 6){

clearInterval(run);

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

[外链图片转存中…(img-GECZSmZe-1720121546915)]