0
点赞
收藏
分享

微信扫一扫

定时器的运用

你带来了我的快乐 2022-03-13 阅读 50

共有10内容可能操作顺序不一样。

定时器又可以分两个,一个是setInterval(间隔定时器),一个是setTimeout(延时定时器),这次我们主要讲间隔定时器

  1. 首先我们还是要养成好习惯,先创建一个属于这个案列的专属文件夹,然后取名为该案列名字,里面再创建属于各个的存放该代码的文件夹。

 

 

 

2.开始在vs软件操作代码,首先要把HTML框架敲打出来。给它设置一个类class里面设置三个span标签表示时间三个数数字显示,下面设置一个类class负责包裹三个button按钮,然后给它们设id因为后面要获取它们的属性。

 

3.继续给这些框架敲打css样式代码,首先给给页面添加一个背景颜色,然后把三个span标签设置样式,还要三个按钮也是一样设置上样式。

 

4.然后css效果就显示出来了。

 

5.开始进入js代码阶段,先敲打出一个页面加载事件和获取元素,前面设置到的id就是现在需要获取到它们的部分。

 

6.然后获取到时间戳和当时时间,声明一个d获取当前时间然后赋值给三个span标签。

 

7.给start按钮绑定点击事件和添加定时器,这次我们使用的定时器是setInterval间隔性 定时器,间隔为1000毫秒调动一次。

 

8.这里获取到效果点击它有可能不是我们理想想要那个展示效果还要添加一个属性。

 

 

9.既然添加了定时器那就是要给它复一个值为timer为停止。

 

10.到了这里是有个bug要修复的,就是如果连续点击start按钮,你再想点stop按钮 停止是停不了,因为连续点击它会生成多个start,而你点击stop停止按钮只会停止 最后一个start,这时我们就要添加两个属性给它一个是true,一个是false。

11.总结一下学到定时器这个功能,可以让我们在关于时间或者动画轮播什么的功能地 方可以有帮助,让我们的代码可以轻松敲打,更加方便。

12.上面就是我所学到的定时器运用功能,新手上路,多多指教,如果有更好的方法或不 懂得地方欢迎在评论区教导和提问喔!

举报

相关推荐

0 条评论