Implementing countdown effect with javascript

Use Javascript to achieve the countdown effect, for your reference, the specific content is as follows

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

In some shopping mall websites, we often see a countdown area on the website or app to remind users how much time is left before something happens. Let's use code to implement it.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 div {
  margin: 300px;
  border: 1px solid pink;
 }

 span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: blue;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 40px;
 }
 </style>
</head>
<body>
<div>
 <span class="hour">1</span>
 <span class="minute">2</span>
 <span class="second">3</span>
</div>
<script>
 var hours = document.querySelector('.hour')
 var min = document.querySelector('.minute')
 var sce = document.querySelector('.second')
 var inputTime=+new Date('2021-2-8 16:40:00')
 //countDown()//Call first to prevent blank space in the first refresh//Start the timer. This is the timer setInterval(countDown,1) that is started after waiting for 1000ms
 function countDown() {
 var nowTime = +new Date(); // Returns the total number of milliseconds of the current time var times = (inputTime - nowTime) / 1000; // times is the total number of seconds remaining var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
 hours.innerHTML = h; // Give the remaining hours to the hour black box var m = parseInt(times / 60 % 60); // minutes m = m < 10 ? '0' + m : m;
 min.innerHTML = m;
 var s = parseInt(times % 60); // Current second s = s < 10 ? '0' + s : s;
 sce.innerHTML = s;
 }
</script>
</body>
</html>

Demonstration effect:

Time counts down second by second

Code explanation:

Here I put three inline span elements inside the block div element. Since the width and height of inline elements cannot be changed, they are all replaced with inline block elements.

Here, because the countdown needs to be modified in three span boxes, corresponding to the hours, minutes, and seconds respectively, the events of these three spans are obtained. Then use the inputTime variable to receive our destination time.

Then create a function named countDown. The variable nowTime is used in the function to receive the current time. Because the received time is in milliseconds, a variable times is used to receive the time difference between the destination time and the current time, and then divided by 1000, because 1s=1000ms, the remaining seconds are obtained here.

Use h to represent the remaining hours: one day = 24 hours, one hour = 60 minutes, and 1 minute = 60 seconds. So here we use the total number of seconds/60/60%24 to get the remaining hours. Then, to make the style look better, we set the displayed decimal places to two digits, using the ternary operator: Is the hour less than 10? If it is less than 10, add '0' in front of it; if it is greater than 10, just return the number. And use h to receive, and then give h to the hours box. The same principle applies to the minutes and seconds below.
Then the function is written, and we use the timer to call this function with an interval of 1/1000ms.

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:

JS countdown implementation code (hours, minutes, seconds)
JS countdown (days, hours, minutes, seconds)
Simple and easy to use countdown js code
js code to realize the 60-second countdown when clicking the button
2 simple js countdown methods
Example of implementing a simple countdown function using native JS
js countdown jump example after a few seconds
A good js html page countdown can be accurate to seconds
js realizes the countdown effect of clicking to get the verification code
Javascript implements the countdown for product flash sales (time is synchronized with server time)

<<: MySQL PXC builds a new node with only IST transmission (recommended)

>>: Using Docker run options to override settings in the Dockerfile

Linux completely removes node.js and reinstalls it through the yum command

Implementing countdown effect with javascript

Linux completely removes node.js and reinstalls it through the yum command

MySQL 8.0.12 Installation and Usage Tutorial

How to set the page you are viewing to not allow Baidu to save its snapshot

The difference between html, xhtml and xml

Reasons and solutions for multiple executions of the watch method when Vue monitors route changes

Basic tutorial on controlling Turtlebot3 mobile robot with ROS

Analysis of the difference between placing on and where in MySQL query conditions

Vue implements multiple selections in the bottom pop-up window

How to set up Windows Server 2019 (with pictures and text)

MySQL Tutorial: Subquery Example Detailed Explanation

Recommend

Comprehensive summary of Vue3.0's various listening methods

Detailed explanation of the complete usage example of developing hyperf under Docker

Detailed example of using useState in react

Explanation of MySQL index types Normal, Unique and Full Text

How to modify mysql to allow remote connections

Understanding flex-grow, flex-shrink, flex-basis and nine-grid layout

JavaScript navigator.userAgent obtains browser information case explanation

Analysis of Vue element background authentication process

mysql 8.0.19 win10 quick installation tutorial

How to use VUE to call Ali Iconfont library online

Vue.js implements music player

HTML implements the function of automatically refreshing or opening a new window for the URL link of the a element href

Introduction to JavaScript Number and Math Objects

Reasons and solutions for failure of dynamically added routing pages in Vue when refreshing

Centos8 bridge static IP configuration method in VMware virtual machine