湛江专业建站优质商家,国外经典手机网站设计,电器网站建设策划书,零基础网站开发设计目录 介绍
准备
目标
规定
思路
知识补充
解法参考 介绍
蓝桥云课庆冬奥需要举行一次抽奖活动#xff0c;我们一起做一个页面提供给云课冬奥抽奖活动使用。
准备
开始答题前#xff0c;需要先打开本题的项目代码文件夹#xff0c;目录结构如下#xff1a;
├──…目录 介绍
准备
目标
规定
思路
知识补充
解法参考 介绍
蓝桥云课庆冬奥需要举行一次抽奖活动我们一起做一个页面提供给云课冬奥抽奖活动使用。
准备
开始答题前需要先打开本题的项目代码文件夹目录结构如下
├── 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 是最终实现的效果图。
注意打开环境后发现缺少项目代码请手动键入下述命令进行下载
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/05.zip unzip 05.zip rm 05.zip
在浏览器中预览 index.html 页面效果如下 目标
找到 index.js 中 rolling 函数使用 jQuery 或者 js 完善此函数达到以下效果
1.点击开始后以 class 为 li1 的元素为起点黄色背景.active 类在奖项上顺时针转动。
2.当转动停止后将获奖提示显示到页面的 id 为 award 元素中。获奖提示必须包含奖项的名称该名称需与题目提供的名称完全一致。
3.转动时间间隔和转动停止条件已给出请勿修改。
规定
转动时间间隔和转动停止条件已给出请勿修改。请严格按照考试步骤操作切勿修改考试默认提供项目中的文件名称、文件夹路径等。请勿修改项目中提供的 id、class、函数名等名称以免造成无法判题通过。先自己做一下吧传送门 思路
这道题目主要需要使用到jQuery的知识点使用jQuery来进行相关的操作类名的添加以及删除等DOM中文字的获取。类名的添加使用addClass类名的删除使用removeClass。兄弟节点的获取使用siblings()方法。
知识补充
选择器
Jquery中的后代选择器我们使用 $(#father p) 来选择 id 名为 father 的 div 元素中的所有后代 p 元素。
子代选择器我们使用 #fatherp 只选择出 idfather 的子代 p 元素即儿子节点这就是它和后代选择器的区别
兄弟选择器$(“M~N”);
相邻选择器$(“MN”); (选择下一个兄弟节点 N)
属性选择器 伪类选择器 绑定事件
绑定事件jQuery对象.on(事件类型, 事件处理函数);
jQuery对象.bind(事件类型, 事件处理函数);
创建元素节点
$(“标签名文本内容/标签名”);
$(“标签名 属性‘属性值’文本内容/标签名”); var div $(div stylewidth:50px; height:50px; background-color: #ddffbc嗨/div); // 创建带有属性的元素节点$(body).append(div); // 将创建的 div 元素放入 body 中元素的插入prepend() 与 prependTo() 是在元素子级的开头插入元素。
// 在 A 元素的子级最前面的位置插入B
$(A).prepend(B);// 在 A 元素的子级最前面的位置插入B
$(B).prependTo(A);append() 与 appendTo() 是在元素子级的尾部插入元素。
before() 与 insertBefore() 是在该元素的前面插入元素。
after() 与 insertAfter() 是在元素的后面插入元素。
empty 方法是用来清空指定元素的后代元素和内容的。
replaceWith 方法和 replaceAll 方法都可以用来把指定元素替换成其他元素只是在使用格式上有些差别。
// 将 A 替换为 B
$(A).replaceWith(B);// 将 A 替换为 B
$(B).replaceAll(A);元素的遍历
$().each(function (index, element) {});each 方法会接收一个匿名函数作为参数函数中的 index 表示元素的索引号而函数中的 element 表示当前元素。
attr 方法可以用来获取指定元素的属性值也可以用来设置指定属性的属性值。
jQuery对象.attr(属性名); // 获取属性
jQuery对象.attr(属性名, 属性值); // 修改属性removeAttr 方法可以删除指定元素的某个属性。
toggleClass 方法是用来切换类选择器的。通过使用 toggleClass 让 div 元素的 circle1 样式在添加和移除之间切换没有 circle1 这个类就加上有则移除。
val 方法用于获取表单元素的值也可以给表单元素设置值。
$().prev(); // 查找指定元素前向第一个元素
$().preAll(); // 查找指定元素前向所有元素
$().next(); // 查找指定元素的第一个后向兄弟元素
$().nextAll(); // 查找指定元素的所有后向兄弟元素
$().siblings();//查找所有兄弟元素
jQuery对象.children();//获取元素的儿子节点
jQuery对象.find(selector);//查找到指定元素的所有后代元素
$().hasClass(类名);//用来判断指定元素是否包含该类名的元素
$().eq(n);//使用 eq 方法可以实现下标过滤
$().is(selector);//使用 is 方法来判断指定元素中是否有符合条件的存在
$().not(selector|function)//用 not 方法可以选择不符合条件的元素。
解法参考
let num 0;function rolling() {time; // 转动次数加1num;if(num8){num1;}$(.linum).addClass(active).siblings().removeClass(active);clearTimeout(rollTime);rollTime setTimeout(() {window.requestAnimationFrame(rolling); // 进行递归动画}, speed);// time times 转动停止if (time times) {$(#award).text(恭喜你抽到了${$(.linum).text()}); clearInterval(rollTime);num 0;time 0;return;}
}我们先声明一个num赋值为0用于来进行追踪转盘中转到的元素当开始进行转动时先将num增加当num大于8时说明转了一圈则给它赋值为1回到起点。然后为对应的元素添加类使用addClass来进行增加其他的兄弟节点去除到该类使用removeClass兄弟节点的获取直接调用siblings()方法。
当停止转动时使用text方法来获取元素的文本。最后再将num重新赋值为0。
好啦本文就到这里啦
