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 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:
|
>>: Installation, activation and configuration of ModSecurity under Apache
I recently encountered a feature while working on...
1. Docker ps lists containers 2. Docker cp copies...
Table of contents 1. Overview 2. Parameters for c...
This article example shares the specific code of ...
Imagine a scenario where, when designing a user t...
1 Effect Demo address: https://www.albertyy.com/2...
First download VMware Workstation 15.1 version. I...
This article shares the specific code of typescri...
vue-element-admin import component encapsulation ...
This article introduces Online preview and downlo...
Table of contents Overall Effect Listen for conta...
Preface In the development of small programs, we ...
Native js realizes the carousel effect (seamless ...
Record the problems you solve for others. Problem...
There is a table in the project that needs to be ...