JavaScript制作轮盘

首先制作小轮盘主要用到的知识点有:定位、数组、一次性定时器、周期性定时器、循环。
为什么要说两个定时器呢?首先周期性定时器能完成的功能一次性定时器也能完成,至于你想用那个,根据实际情况来定。
制作轮盘的布局就直接搬图:↓↓在这里插入图片描述在这里插入图片描述
根据边框布满方块,用数组里准备好的style样式,在用for创建li标签同时添加到ul标签
在这里插入图片描述

以此类推,布满边框一周
在这里插入图片描述

给开始按钮绑定事件处理函数(运用周期性定时器或一次性定时器)
var index = 0; //当前active div应该和哪个下标的小方块重合
var btn = document.getElementById(‘btn’);//获取按钮
var div = document.getElementById(‘active’);要移动的div(红灯)
在这里插入图片描述

这就是周期性定时器实现的,它转动的速度是一样的,不会发生变化。现在转灯的转动已经实现,但还没有达到想要的效果,我要的转动是从快到慢,那么就要用到一次性定时器,它有个特点,就是它自己会停止。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44560799/article/details/108068971