抖音代运营公司简介,用软件做seo网站关键词推广,成都住建平台app,怎样创业白手起家开公司来到大学也是有二年了#xff0c;吃饭最多的地方就是在食堂#xff0c;经过这么久的时间#xff0c;已经几乎是把每个窗口的菜都吃腻了#xff0c;所以我打算做个轮盘抽奖的形式来决定我每天要吃些什么。 目录
实现效果图#xff1a; 静态搭建 js代码
1.实现此功能的思路… 来到大学也是有二年了吃饭最多的地方就是在食堂经过这么久的时间已经几乎是把每个窗口的菜都吃腻了所以我打算做个轮盘抽奖的形式来决定我每天要吃些什么。 目录
实现效果图 静态搭建 js代码
1.实现此功能的思路 2.先获取需要用到的dom元素定义一些会用到的变量
3.给按钮绑定一个点击事件触发轮盘旋转
4.实现函数
5.我大概说说实现思路 完整代码
总结 实现效果图 静态搭建
html结构 div classboxul!-- 注意这里的类名是按照旋转速度来规范的 : item_index 为了方便我们后续再写js代码操作时更方便--li classitem_1iphone14/lili classitem_2冰箱/lili classitem_3洗衣机/lili classitem_8代金券/lili classbtn stylebackground-color: #fff;button stylemargin: 14px; width: 120px;height: 120px;background-color: pink;border: #fff;点击抽奖/button/lili classitem_4电脑/lili classitem_7电视/lili classitem_6空调/lili classitem_5特斯拉/li/ul!-- 这里到时候放中奖信息的文字 --div classtext/div/div 我这里的类名命名是为了后面改变它们的类名时更好的操作所以就是按照轮盘旋转的顺序来依次命名的 css * {margin: 0;padding: 0;}.box {width: 500px;height: 500px;margin: 100px auto;}ul {display: flex;flex-wrap: wrap;justify-content: space-between;}ul li {list-style: none;width: 150px;height: 150px;background-color: beige;margin: 5px;font-size: 25px;text-align: center;line-height: 150px;}ul li img {width: 100%;height: 100%;}.text {text-align: center;margin-top: 20px;font-size: 25px;color: red;}.active {background-color: rgb(93, 221, 157);} css也是简单的美化了一下页面active是旋转时要切换的颜色其他的就是一些居中布局等 js代码
1.实现此功能的思路 主要就是需要写一个执行函数此函数的主要功能就是对选中的 li 元素进行类名的增删操作主要还是使用一个定时器来实现此功能。 2.先获取需要用到的dom元素定义一些会用到的变量
const obj {text: document.querySelector(.text),btn: document.querySelector(.btn),}const item document.querySelectorAll(ul li)let rollTime; // 定义定时器变量用来清除定时器let time 0; // 转动次数let speed 10; // 转动时间间隔let times; // 总转动次数let sum 0; //计算切换总次数
3.给按钮绑定一个点击事件触发轮盘旋转 //按钮点击事件obj.btn.addEventListener(click, () {obj.text.innerHTML ; //清空文字times parseInt(Math.random() * (20 - 30 1) 50, 10); // 定义总转动次数随机40 - 60次console.log(times);time 0 //每次点击需要将这几个数字进行初始化sum 0spin()})
4.实现函数 function spin() {time; // 转动次数加1sum; //总转动次数加1//判断time是否大于8time time 8 ? 1 : time;//先清空其他的带有active类的liitem.forEach(item {item.classList.remove(active)})clearTimeout(rollTime);//给带有类名item_1的加上类名document.querySelector(.item_${time}).classList.add(active)rollTime setTimeout(() {window.requestAnimationFrame(spin); // 进行递归动画 这段代码的作用是启动一个动画帧以便在浏览器中渲染动画效果。动画帧是通过调用requestAnimationFrame()方法实现的它允许你在动画帧中执行代码而不是直接设置元素的样式。这样可以确保在渲染过程中不会出现跳帧的情况从而实现毫秒级的渲染效果。}, speed * sum)if (sum times) {clearTimeout(rollTime); //清除定时器//找出带有active类名的文字const active document.querySelector(.active).innerHTMLobj.text.innerHTML 恭喜你抽中了${active}return}}
代码中也有一些相应的注释
5.我大概说说实现思路 总共有8的物品所以我们要对time标使进行判断如果大于8就要变为1然后是循环遍历将所有的active类名清除这里清除上一个定时器是因为在定时器中用到了递归渲染所以要清除上一个定时器否则可能会出现卡顿的情况最后就是做判断退出函数渲染页面 window.requestAnimationFrame(spin)的作用在代码注释中有主要也是为了渲染更流畅不出现卡顿这里直接调用递归也是ok的 完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {width: 500px;height: 500px;margin: 100px auto;}ul {display: flex;flex-wrap: wrap;justify-content: space-between;}ul li {list-style: none;width: 150px;height: 150px;background-color: beige;margin: 5px;font-size: 25px;text-align: center;line-height: 150px;}ul li img {width: 100%;height: 100%;}.text {text-align: center;margin-top: 20px;font-size: 25px;color: red;}.active {background-color: rgb(93, 221, 157);}/style
/headbodydiv classboxul!-- 注意这里的类名是按照旋转速度来规范的 : item_index 为了方便我们后续再写js代码操作时更方便--li classitem_1iphone14/lili classitem_2冰箱/lili classitem_3洗衣机/lili classitem_8代金券/lili classbtn stylebackground-color: #fff;button stylemargin: 14px; width: 120px;height: 120px;background-color: pink;border: #fff;点击抽奖/button/lili classitem_4电脑/lili classitem_7电视/lili classitem_6空调/lili classitem_5特斯拉/li/ul!-- 这里到时候放中奖信息的文字 --div classtext/div/divscript//简易的抽奖功能const obj {text: document.querySelector(.text),btn: document.querySelector(.btn),}const item document.querySelectorAll(ul li)let rollTime; // 定义定时器变量用来清除定时器let time 0; // 转动次数let speed 10; // 转动时间间隔let times; // 总转动次数let sum 0; //计算切换总次数//按钮点击事件obj.btn.addEventListener(click, () {obj.text.innerHTML ; //清空文字times parseInt(Math.random() * (20 - 30 1) 50, 10); // 定义总转动次数随机20-30次console.log(times);time 0sum 0spin()})//写一个函数用来模拟轮盘抽奖旋转次数也是模拟的function spin() {time; // 转动次数加1sum; //总转动次数加1//判断time是否大于8time time 8 ? 1 : time;//先清空其他的带有active类的liitem.forEach(item {item.classList.remove(active)})clearTimeout(rollTime);//给带有类名item_1的加上类名document.querySelector(.item_${time}).classList.add(active)rollTime setTimeout(() {window.requestAnimationFrame(spin); // 进行递归动画 这段代码的作用是启动一个动画帧以便在浏览器中渲染动画效果。动画帧是通过调用requestAnimationFrame()方法实现的它允许你在动画帧中执行代码而不是直接设置元素的样式。这样可以确保在渲染过程中不会出现跳帧的情况从而实现毫秒级的渲染效果。}, speed * sum)if (sum times) {clearTimeout(rollTime); //清除定时器//找出带有active类名的文字const active document.querySelector(.active).innerHTMLobj.text.innerHTML 恭喜你抽中了${active}return}}/script
/body/html
总结
如果你跟我一样每天不知道吃啥可以试试用这个轮盘来决定哦。
好好吃饭好好学习祝天天开心
