一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情
🎉前言
每天下班不知道该学习什么？看实体书籍食之乏味？没有目标和动力？怎么办，想学却又不想学，不学又怕被人卷。那好，我们找个 学习大转盘 来帮助我们摇号，摇到谁，我就去看看相关的文章，就看两篇哦~~，看完就上号😍 。我总结该方法为 摆烂学习法 ，太对了哥，哥太对 ~~
🏠 基础布局
采用技术：
Vue3 + TS + Vite
<template>
<div class="wrapper">
<div class="content"
v-for="item in contentList"
:class="{ choice: item.num === curStep, pointer: item.num === 0 }"
@click="handleClick(item.num)"
>
<img :src="item.image" alt="">
</div>
</div>
</template>
样式类名 choice 实现转盘轮播选中效果，我就加了个透明度 opacity 。
样式类名 pointer 是给中间div加入👆 。
🎯 转盘实现
先上代码（DJ），先上代码（DJ）~~
✏️ 数据结构：
const contentList = ref([
{
name: 'typescript',
content_id: 'jsBook',
image: '...',
num: 1
},
{
name: 'Vue',
content_id: 'vue',
image: '...',
num: 2
},
{
name: 'React',
content_id: 'react',
image: '...',
num: 3
},
{
name: '性能优化',
content_id: 'optimization',
image: '...',
num: 8
},
{
name: '开始学习',
content_id: 'box',
image: '...',
num: 0
},
{
name: '数据结构和算法',
content_id: 'data_structure',
image: '...',
num: 4
},
{
name: '摆烂',
content_id: 'bailan',
image: '...',
num: 7
},
{
name: '前端工程化',
content_id: 'engineering',
image: '...',
num: 6
},
{
name: '图解HTTP',
content_id: 'http',
image: '...',
num: 5
}
])
💥 核心代码：
<script setup lang="ts">
import {ref} from 'vue';
// 当前选中的步数
let curStep = ref(1);
// 总步数
let step = ref(0);
// 延迟毫秒
let delay = ref(100);
// alert弹出文字
let text = ref('');
// 是否可点击的开关
let isRun = ref(true);
const handleClick = (num) => {
// 不是中间div，或者开关为false
if (num !== 0 || !isRun.value) {
return;
}
start();
}
const start = () => {
// 随机生成总布数,24 ~ 48 之间 （大概3 ~ 6圈）
step.value = randomNumber(24, 48);
isRun.value = false;
let hasRun = 0;
move(hasRun);
}
const move = (hasRun) => {
const length = contentList.value.length - 1;
setTimeout(() => {
// 已经走的步数 小于等于 总的步数 说明还没到最后的一个
if (hasRun <= step.value) {
// (2) 怎么让最后两圈走得慢一些呢？
if (step.value - hasRun < length * 2) {
delay.value = 300;
} else if (step.value - hasRun < length) {
delay.value = 600;
}
// (1) 怎么让转盘 1,2,3,4,5,6,7,8 一直重复这几个数字呢？
curStep.value = hasRun % length + 1;
hasRun++;
move(hasRun);
} else {
// 最后一个到了!!
// 遍历找到对应的 name 属性，然后弹框
contentList.value.find(item => {
if (item.num === curStep.value) {
text.value = item.name;
if (curStep.value === 7) {
alert(`学什么学，今天我要 ${text.value}，耶稣都拦不住，我说的！！`);
return;
}
alert(`今天可以学一学 ${text.value} 哦！`);
}
})
// 初始化 delay 时间
delay.value = 100;
isRun.value = true;
}
}, delay.value)
}
// 随机数工具函数
const randomNumber = (min, max) => {
return Math.floor(Math.random() * (max - min)) + min;
}
</script>
上述代码中比较麻烦的点是：
- (1) 怎么让转盘 1,2,3,4,5,6,7,8 一直重复这几个数字呢？
- (2) 怎么让最后两圈走得慢一些呢？
❓ 问题一
(1) 怎么让转盘 1,2,3,4,5,6,7,8 一直重复这几个数字呢？
我们模拟一下如果不让转盘 1,2,3,4,5,6,7,8 一直重复会发生什么呢？
修改上述部分代码：
// (1) 怎么让转盘 1,2,3,4,5,6,7,8 一直重复这几个数字呢？
curStep.value = hasRun % length + 1;
// 修改为：
curStep.value = hasRun; // hasRun是正在执行的步数
看效果：
看左下角的 curStep，当数字到 8 时，转盘就不动了，是因为 hasRun 一直不断叠加，远远超过了 8 ，在HTML 结构中，我们是通过添加类名 choice: item.num === curStep 来判断走到哪个位置，超过了 8 那我给谁加样式呢~~
此时，我们需要处理一下 curStep 的赋值，利用取模运算来实现循环步数，先给大家看一张图：
假设总的步数是 29 ，从 0 走到 29 ，如果一圈是 8 步 ，那么可以走 3 圈多，用 0~29 一直不断的取模，就能实现 0~7 一直循环了，在此基础上 +1 就可以了
❓ 问题二
(2) 怎么让最后两圈走得慢一些呢？
总步数 减去 当前步数 等于 剩下的步数
上面我们知道一圈是 8 步，那么利用 剩下的步数 小于 (8 * 2) 时，也就是 最后两圈 要到了，就可以让轮盘走得慢一些了；同理 小于 8 时就代表要进入最后一圈了。
if (step.value - hasRun < length * 2) {
delay.value = 300;
} else if (step.value - hasRun < length) {
delay.value = 600;
}
👀 最终效果
哦？？ 一发入魂？ 看来今天是要... 😍😍
👉 演示的源代码在这里 Replit 链接。
✨总结
本文参考自 前端学习｜不知道学点啥好，不如搞一个学习盲盒，在此基础上加入摆烂功能 😎 ，代码精简化并详细介绍了逻辑代码。
摆烂是不可能摆烂的，社区里的人实力又强，讲话又好听，我超喜欢这里的~~
希望大家每天都不要停止学习哦，哪怕是每天学一丢丢~~😝😝
以上就是本次分享的全部内容~~
如果觉得文章写得不错，对你有所启发的，请不要吝啬 点个 赞 和 关注 并在 评论区 留下你宝贵的意见哦~~😃
