JavaScript uses setTimeout to achieve countdown effect

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

Recommend

Detailed explanation of MySQL precompilation function

This article shares the MySQL precompilation func...

How to create an index on a join table in MySQL

This article introduces how to create an index on...

JavaScript css3 to implement simple video barrage function

This article attempts to write a demo to simulate...

How to use the vue timeline component

This article example shares the specific implemen...

Native JS to achieve directory scrolling effects

Here is a text scrolling effect implemented with ...

How to quickly deploy Gitlab using Docker

1. Download the gitlab image docker pull gitlab/g...

Who is a User Experience Designer?

Scary, isn't it! Translation in the picture: ...

Vue component encapsulates sample code for uploading pictures and videos

First download the dependencies: cnpm i -S vue-uu...

Solution to span width not being determined in Firefox or IE

Copy code The code is as follows: <html xmlns=...

The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10

In order to download this database, it takes a lo...

MySQL merges multiple rows of data based on the group_concat() function

A very useful function group_concat(), the manual...