定时器的作用

本文介绍了如何使用JavaScript创建一个定时器来实时显示时间。首先,创建HTML结构,包含用于显示时间的span元素和控制按钮。接着,应用CSS样式,设置背景和元素样式。在JavaScript中,获取时间戳和当前时间,并使用setInterval创建定时器每秒更新时间显示。同时,处理start和stop按钮的点击事件,确保定时器能正确启动和停止。最后,修复了一个可能导致连续点击start按钮后,stop按钮无法正常停止所有定时器的bug。通过学习定时器,可以更好地实现实时更新和动画效果等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 2开始在vs软件操作代码,首先要把HTML框架敲打出来。给它设置一个类class里面设置三个span标签表示时间三个数数字显示,下面给它设置一个无序列表,无序列表里面设置一个span标签一个img标签,给这些标签添加id后面js代码要获取它们属性。

 3. 继续给这些框架敲打css样式代码,首先给给页面添加一个背景图片,然后把三个span标签设置样式,还有无序列表里面的span标签和img标签。。

 

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

 5开始进入js代码阶段,先敲打出一个页面加载事件和获取元素。

 6然后获取到时间戳和当时时间。

 

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

 

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

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

 

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值