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

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

span{
     display: inline-block;
     width: 20px;
     height: 20px;
     background-color: #000000;
     color: #ffffff;
     text-align: center;
 }
    

JavaScript

 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 setInterval()与setTimeout()计时器
• 简单通过settimeout看javascript的运行机制
• 如何通过setTimeout理解JS运行机制详解
• 从setTimeout看js函数执行过程
• js学使用setTimeout实现轮循动画
• JavaScript计时器用法分析【setTimeout和clearTimeout】
• 详解JS中定时器setInterval和setTImeout的this指向问题
• JavaScript中setTimeout的那些事儿
• JS关于for循环中使用setTimeout的四种解决方案

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！