Vue3 实现九宫格抽奖组件

实现思路:首先最简单的HTML 布局,使用了 flex 布局,同时利用一个定时器,动态控制选中的项,1,2,3,4,5,6,7,8,循环选中,我这里写得比较垃圾,就是判断一直让 active 项加加,然后遇到 8 的时候,就重置 为 1 ,看来其就是连贯的效果;然后还有先慢再快再慢的效果, 我是判断了 定义的定时器的时间除以5,也就是 每次执行代码都是对时间相减一定的数量,这样定时器执行时间就会变短,当大于这个 时间除以5,就对当前时间进行相加,也就是定时器会变慢执行,直接上码看看吧

Vue3 实现九宫格抽奖组件_第1张图片

 






你可能感兴趣的:(vue.js)