大学网站模板下载,个人做网站如何推广,站长平台社区,企业网站首页flash思路#xff1a;
使用模板字符串#xff0c;借助time的值选择添加或移除样式的盒子#xff0c;由于盒子的类名最多为li9#xff0c;所以要将time的值取余#xff0c;且判断余数为0时#xff0c;就取1#xff0c;否则会获取空值报错
.ul .li${time%9!0?time%9:1}
代码…思路
使用模板字符串借助time的值选择添加或移除样式的盒子由于盒子的类名最多为li9所以要将time的值取余且判断余数为0时就取1否则会获取空值报错
.ul .li${time%9!0?time%9:1}
代码:
let rollTime; // 定义定时器变量用来清除定时器
let time 0; // 转动次数
let speed 300; // 转动时间间隔
let times; // 总转动次数// 开始按钮点击事件后开始抽奖
$(#start).on(click, function () {$(#award).text(); //清空中奖信息times parseInt(Math.random() * (20 - 30 1) 20, 10); // 定义总转动次数随机20-30次rolling();
});// TODO请完善此函数
function rolling() {time; // 转动次数加1//添加黄色样式的类document.querySelector(.ul .li${time%9!0?time%9:1}).classList.add(active);clearTimeout(rollTime);rollTime setTimeout(() {//移除类document.querySelector(.ul .li${time%9!0?time%9:1}).classList.remove(active);window.requestAnimationFrame(rolling); // 进行递归动画}, speed);// time times 转动停止if (time times) {clearInterval(rollTime);//将结果显示在上面$(#award).text(${document.querySelector(.ul .li${time%9!0?time%9:1}).innerText}); //清空中奖信息time 0;return;}
}
