JavaScript uses setTimeout to achieve countdown effect

In order to enhance the ability to write JavaScript native code and consolidate the use of setTimeout(), a countdown demo was made. Countdown is a common small function in today's websites. If you like it, you can keep it and treat it as a practical small script for daily use.

Implementation ideas

1. Get the hour value first, subtract 1 from the hour value and start the countdown. Minutes 59 Seconds 59
2. The units digit of the seconds decreases from 9. When the units digit of the seconds is less than 0, the tens digit of the seconds decreases by 1.
3. When the tens digit of the second is less than 0, the ones digit of the minute is reduced by 1.
4. When the unit digit of the minute is less than 0, the tens digit of the minute is reduced by 1.
5. When the tens digit of the minute is less than 0, subtract 1 from the hour.
6. When the hours are less than 0, the timer stops and all the hours are set to 0.

Implementation Code

html

<p>Countdown:</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(){
 /*Hour*/
 var hourTxt = document.getElementById("hour");
 var hour = parseInt(document.getElementById("hour").innerHTML);
 /*minute*/
 var minuteTenTxt = document.getElementById("minuteTen");
 var minuteBitTxt = document.getElementById("minuteBit");
 var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
 var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
 /*Second*/
 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 starts to decrease*/
 function second(){
  secondBit--;
  secondBitTxt.innerHTML = secondBit;

  /*Ten seconds later*/
  if(secondBit < 0){
  secondTen--;
  secondTenTxt.innerHTML = secondTen;
  secondBit = 9;
  secondBitTxt.innerHTML = secondBit;
  /*Continue countdown*/
  setTimeout(second,1000);

  /*One minute later*/
  if(secondTen < 0){
   minuteBit--;
   minuteBitTxt.innerHTML = minuteBit;
   secondTen = 5;
   secondTenTxt.innerHTML = secondTen;
   secondBit = 9;
   secondBitTxt.innerHTML = secondBit;

   /*Ten minutes later*/
   if(minuteBit < 0){
   minuteTen--;
   minuteTenTxt.innerHTML = minuteTen;
   minuteBit = 9;
   minuteBitTxt.innerHTML = minuteBit;
   }

   /*After one hour*/
   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;
   }

   /*Countdown ends*/
   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);
}

Execution Page

End Page

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

What are the basic uses of JavaScript setTimeout()
JavaScript setInterval() vs setTimeout() Timers
Simply use settimeout to see the operating mechanism of javascript
How to understand the JS operation mechanism through setTimeout
Look at the js function execution process from setTimeout
js learn to use setTimeout to implement round-robin animation
Analysis of JavaScript timer usage [setTimeout and clearTimeout]
Detailed explanation of the this pointing problem of timer setInterval and setTImeout in JS
Things about setTimeout in JavaScript
Four solutions for using setTimeout in JS for loop

<<: Detailed explanation of solving the problem of cross-domain access of nginx/apache static resources

>>: Installation, activation and configuration of ModSecurity under Apache