xxx网站建设规划书,cms系统排行榜,广州品牌网站建设公司,WordPress二级目录404冬奥大抽奖
介绍
蓝桥云课庆冬奥需要举行一次抽奖活动#xff0c;我们一起做一个页面提供给云课冬奥抽奖活动使用。
准备
开始答题前#xff0c;需要先打开本题的项目代码文件夹#xff0c;目录结构如下#xff1a;
├── css
│ └── style.css
├── effect.g…冬奥大抽奖
介绍
蓝桥云课庆冬奥需要举行一次抽奖活动我们一起做一个页面提供给云课冬奥抽奖活动使用。
准备
开始答题前需要先打开本题的项目代码文件夹目录结构如下
├── css
│ └── style.css
├── effect.gif
├── index.html
└── js├── index.js└── jquery.js其中
css/style.css 是样式文件 。index.html 是主页面。js/jquery.js 是 jQuery 文件。js/index.js 是需要补充的 js 文件。effect.gif 是最终实现的效果图。
在浏览器中预览 index.html 页面效果如下 目标
找到 index.js 中 rolling 函数使用 jQuery 或者 js 完善此函数达到以下效果
点击开始后以 class 为 li1 的元素为起点黄色背景.active 类在奖项上顺时针转动。当转动停止后将获奖提示显示到页面的 id 为 award 元素中。获奖提示必须包含奖项的名称 该名称需与题目提供的名称完全一致 。转动时间间隔和转动停止条件已给出请勿修改。
完成后的效果见文件夹下面的 gif 图图片名称为 effect.gif提示可以通过 VS Code 或者浏览器预览 gif 图片。
规定
转动时间间隔和转动停止条件已给出请勿修改。请严格按照考试步骤操作切勿修改考试默认提供项目中的文件名称、文件夹路径等。请勿修改项目中提供的 id、class、函数名等名称以免造成无法判题通过。
判分标准
本题完全实现题目目标得满分否则得 0 分。
解答
我的解答
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() {document.querySelector(.li1).classList.add(active)time; // 转动次数加1clearTimeout(rollTime);rollTime setTimeout(() {window.requestAnimationFrame(rolling); // 进行递归动画}, speed);let liNum 1if(time 8 ) liNum time;else if(time 9 time 17) liNum time - 8;else if(time 18 time 24) liNum time - 16;else if(time 25 time 36) liNum time - 24;console.log(liNum,time);// 删除颜色
const list document.querySelectorAll(li)
for(const imte of list) imte.classList.remove(active)// 添加document.querySelector(.li${liNum}).classList.add(active)// time times 转动停止if (time times) {clearInterval(rollTime);time 0;return;}
} 问题一对于liNum的控制不够灵活 因为这里的li的num只有1 ~ 8但是这个time又一直是递增的所以就需要进行重置操作 但是我这里仅仅只是从数学的角度考虑这个问题虽然也能通过但是这样的代码十分不好一旦修改了对应的随机数将需要添加代码逻辑 问题二未使用jQuery对代码进行优化 因为我本人对于jQuery使用的较少所以并没有直接一上手就开始用jQuery操作而是采用JS的原生方法进行实现。存在优化空间 官方答案
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请完善此函数
let num 0;
function rolling() {num ;if(num 9){num 1;}time; // 转动次数加1clearTimeout(rollTime);rollTime setTimeout(() {window.requestAnimationFrame(rolling); // 进行递归动画}, speed);$(.li num).addClass(active).siblings().removeClass(active)console.log(num);// time times 转动停止if (time times) {clearInterval(rollTime);$(#award).text($(.active).text())time 0;time 0;return;}
} 巧妙点一直接重置 上面我自己的代码对于这个num的控制十分粗糙但是官方答案对于这个数的控制直指本源 我们仅需要让其自增并在出界时及时拉回来即可num 1 巧妙点二通过siblings直接修改所有的兄弟节点 很巧妙的是这里直接采用siblings删除兄弟节点这样的代码会更加简洁、高效 虽然本质上就是循环删除但是这里直接采用函数去remove还是值得学习的
