js如何实现时、分、秒倒计时

 时间:2024-10-13 14:53:22

1、新建一个html页面,命名为test.html ,用于讲解js如何实现时、分、秒倒计时。

js如何实现时、分、秒倒计时

2、在test.html页面,使用span标签创建时间显示区,并设置其id属性为oTime。

js如何实现时、分、秒倒计时

3、使用css设置倒计时的样式,颜色为蓝色,时间大小为40px,代码如下:

js如何实现时、分、秒倒计时

4、在js中,初化化变量,_h变量为小时,_m变量为分钟,_s变量为秒数,这里设置倒计时时间为2小时,代码如下:

js如何实现时、分、秒倒计时

5、在js中,新建一个formatTime()函数,用于初化时间格式,代码如下:

js如何实现时、分、秒倒计时

6、在js中,新建一个doTime()函数,用于实现时间的倒数,当时间为00:00:00时,即倒计时结纰墁于氡束时,输出“倒计时结束了”,同时使用clearTimeout方法清除定时器。如果倒计时未到结束时间,则继续执行倒数程序,主要利用setTimeout定时器方法每隔一秒更新一次时间实现倒计时效果。代码如下:

js如何实现时、分、秒倒计时

7、通过onload事件,在打开页面后,执行function函数,倒计时开始,代码如下:

js如何实现时、分、秒倒计时

8、在浏览器打开test.html页面,倒计时开始,效果如下:

js如何实现时、分、秒倒计时
  • MFC应用实例:[23]颜色对话框选择颜色
  • 利用jquery如何在网页中显示时间?
  • 关于html内嵌video的一些参数设置
  • 两种纯html+css3实现六边形
  • php+mysql怎样一次插入多条记录到数据库
  • 热门搜索
    2035年的家乡手抄报 冬天的手抄报 植树手抄报内容 漫游语文世界手抄报 创建文明城市手抄报内容 红领巾相约中国梦手抄报 热爱劳动手抄报 党史国史手抄报 抗击病毒手抄报 我的书屋我的梦手抄报