服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript使用setTimeout实现倒计时效果

JavaScript使用setTimeout实现倒计时效果

2022-01-21 15:28清水拌墨茶 js教程

这篇文章主要为大家详细介绍了JavaScript使用setTimeout实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

为了加强对JavaScript原生代码的编写能力,以及巩固setTimeout()的使用方法,制作了一个倒计时的demo,倒计时在现在的网站中算是一个常见的小功能,如果大家喜欢的话可以留下,就当作一个日常实用的小脚本。

实现思路

1、先获取小时值 将小时值减1开始进行倒计时 分钟59 秒数59
2、秒数的个位从9开始递减,当秒数个位小于0时,秒数的十位减1
3、秒数的十位小于0时,分钟的个位减1
4、分钟的个位小于0时,分钟的十位减1
5、分钟的十位小于0时,小时减1
6、小时数小于0后停止计时全部为0

实现代码

html

?
1
2
3
4
5
6
7
8
<p>倒计时:</p>
<span id="hour">5</span>
<span>:</span>
<span id="minuteTen">0</span>
<span id="minuteBit">0</span>
<span>:</span>
<span id="secondTen">0</span>
<span id="secondBit">0</span>

css

?
1
2
3
4
5
6
7
8
span{
 display: inline-block;
 width: 20px;
 height: 20px;
 background-color: #000000;
 color: #ffffff;
 text-align: center;
 }

JavaScript

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
function time(){
 /*小时*/
 var hourTxt = document.getElementById("hour");
 var hour = parseInt(document.getElementById("hour").innerHTML);
 /*分钟*/
 var minuteTenTxt = document.getElementById("minuteTen");
 var minuteBitTxt = document.getElementById("minuteBit");
 var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
 var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
 /*秒*/
 var secondTenTxt = document.getElementById("secondTen");
 var secondBitTxt = document.getElementById("secondBit");
 var secondTen = parseInt(document.getElementById("secondTen").innerHTML);
 var secondBit = parseInt(document.getElementById("secondBit").innerHTML);
 function start(){
 hour--;
 hourTxt.innerHTML = hour;
 minuteTen = 5;
 minuteTenTxt.innerHTML = minuteTen;
 minuteBit = 9;
 minuteBitTxt.innerHTML = minuteBit;
 secondTen = 5;
 secondTenTxt.innerHTML = secondTen;
 secondBit = 9;
 secondBitTxt.innerHTML = secondBit;
 
 /*secondBit开始自减*/
 function second(){
  secondBit--;
  secondBitTxt.innerHTML = secondBit;
 
  /*十秒过后*/
  if(secondBit < 0){
  secondTen--;
  secondTenTxt.innerHTML = secondTen;
  secondBit = 9;
  secondBitTxt.innerHTML = secondBit;
  /*继续倒计时*/
  setTimeout(second,1000);
 
  /*一分钟过后*/
  if(secondTen < 0){
   minuteBit--;
   minuteBitTxt.innerHTML = minuteBit;
   secondTen = 5;
   secondTenTxt.innerHTML = secondTen;
   secondBit = 9;
   secondBitTxt.innerHTML = secondBit;
 
   /*十分钟过后*/
   if(minuteBit < 0){
   minuteTen--;
   minuteTenTxt.innerHTML = minuteTen;
   minuteBit = 9;
   minuteBitTxt.innerHTML = minuteBit;
   }
 
   /*一个小时过后*/
   if(minuteTen < 0){
   hour--;
   hourTxt.innerHTML = hour;
   minuteTen = 5;
   minuteTenTxt.innerHTML = minuteTen;
   minuteBit = 9;
   minuteBitTxt.innerHTML = minuteBit;
   secondTen = 5;
   secondTenTxt.innerHTML = secondTen;
   secondBit = 9;
   secondBitTxt.innerHTML = secondBit;
   }
 
   /*倒计时结束*/
   if(hour < 0 ){
   hour = 0;
   hourTxt.innerHTML = hour;
   minuteTen = 0;
   minuteTenTxt.innerHTML = minuteTen;
   minuteBit = 0;
   minuteBitTxt.innerHTML = minuteBit;
   secondTen = 0;
   secondTenTxt.innerHTML = secondTen;
   secondBit = 0;
   secondBitTxt.innerHTML = secondBit;
   clearTimeout(second);
   clearTimeout(start);
   }
  }
  }else{
  setTimeout(second,1000);
  }
 }
 setTimeout(second,1000);
 
 }
 setTimeout(start,1000);
}

执行页面

JavaScript使用setTimeout实现倒计时效果

结束页面

JavaScript使用setTimeout实现倒计时效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/zm_nizhi/article/details/74388709

延伸 · 阅读

精彩推荐
  • js教程JS中循环遍历数组的四种方式总结

    JS中循环遍历数组的四种方式总结

    这篇文章主要给大家总结介绍了关于JS中循环遍历数组的四种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    前端小混混5432022-01-06
  • js教程Jquery+javascript实现支付网页数字键盘

    Jquery+javascript实现支付网页数字键盘

    这篇文章主要为大家详细介绍了Jquery+javascript实现支付网页数字键盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一...

    юноша 25822021-12-15
  • js教程小程序实现列表倒计时功能

    小程序实现列表倒计时功能

    这篇文章主要为大家详细介绍了小程序实现列表倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    好想再胖十斤8922022-01-12
  • js教程使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    这篇文章主要介绍了使用Typescript开发微信小程序的步骤详解,本文分步骤通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考...

    陈希章6762021-12-30
  • js教程JavaScript 获取滚动条位置并将页面滑动到锚点

    JavaScript 获取滚动条位置并将页面滑动到锚点

    这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...

    丶Serendipity丶9732022-01-20
  • js教程JavaScript 防盗链的原理以及破解方法

    JavaScript 防盗链的原理以及破解方法

    这篇文章主要介绍了JavaScript 防盗链的原理以及破解方法,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    LuckyChou10342021-12-22
  • js教程js动态添加带圆圈序号列表的实例代码

    js动态添加带圆圈序号列表的实例代码

    这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参...

    一晃的春夏秋冬7072022-01-21
  • js教程JavaScript的一些小技巧分享

    JavaScript的一些小技巧分享

    这篇文章主要介绍了JavaScript的一些小技巧分享,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    小蘑菇9122021-12-27