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

以此类推,布满边框一周
JavaScript制作轮盘

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

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

JavaScript制作轮盘

相关文章:

  • 2022-12-23
  • 2021-06-04
  • 2021-07-03
  • 2021-09-05
  • 2021-12-17
  • 2021-08-29
  • 2021-05-11
  • 2021-05-19
猜你喜欢
  • 2021-08-03
  • 2022-12-23
  • 2021-08-08
  • 2022-01-03
  • 2021-07-24
  • 2022-02-09
  • 2023-01-13
相关资源
相似解决方案