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

The perfect solution for highlighting keywords in HTML

I recently encountered a feature while working on...

How to modify the contents of an existing Docker container

1. Docker ps lists containers 2. Docker cp copies...

js to implement file upload style details

Table of contents 1. Overview 2. Parameters for c...

jQuery implements shopping cart function

This article example shares the specific code of ...

Which one should I choose between MySQL unique index and normal index?

Imagine a scenario where, when designing a user t...

Pure CSS to implement iOS style open and close selection box function

1 Effect Demo address: https://www.albertyy.com/2...

Typescript+react to achieve simple drag and drop effects on mobile and PC

This article shares the specific code of typescri...

Implementation of importing and exporting vue-element-admin projects

vue-element-admin import component encapsulation ...

Example code for circular hover effect using CSS Transitions

This article introduces Online preview and downlo...

Example of using store in vue3 to record scroll position

Table of contents Overall Effect Listen for conta...

WeChat applet implementation anchor positioning function example

Preface In the development of small programs, we ...

Native js to achieve seamless carousel effect

Native js realizes the carousel effect (seamless ...

The process of using vxe-table to make editable tables in vue

There is a table in the project that needs to be ...