本文主要是介绍JavaScript制作轮盘,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
首先制作小轮盘主要用到的知识点有:定位、数组、一次性定时器、周期性定时器、循环。
为什么要说两个定时器呢?首先周期性定时器能完成的功能一次性定时器也能完成,至于你想用那个,根据实际情况来定。
制作轮盘的布局就直接搬图:↓↓
根据边框布满方块,用数组里准备好的style样式,在用for创建li标签同时添加到ul标签
以此类推,布满边框一周
给开始按钮绑定事件处理函数(运用周期性定时器或一次性定时器)
var index = 0; //当前active div应该和哪个下标的小方块重合
var btn = document.getElementById(‘btn’);//获取按钮
var div = document.getElementById(‘active’);要移动的div(红灯)
这就是周期性定时器实现的,它转动的速度是一样的,不会发生变化。现在转灯的转动已经实现,但还没有达到想要的效果,我要的转动是从快到慢,那么就要用到一次性定时器,它有个特点,就是它自己会停止。
这篇关于JavaScript制作轮盘的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!