I. Introduction
When the website is doing an activity, a prompt will appear with a countdown to the deadline. The effect is as shown in the figure:
2. Analysis
①Reminder time is constantly changing every second, you need to use timer (setInterval)
//1000表示每隔一秒变化一次，单位为毫秒setInterval(countDown, 1000);
②The three boxes are assigned values through innerHTML, and the hours, minutes, and seconds are placed
③ Calculate the time from the current time to the deadline (timestamp: not the current time, but how many milliseconds have passed since January 1, 1970)
new Date()④ The timestamp of the deadline minus the timestamp of the current time
⑤ Calculate the hour, minute, and second (the result is converted into an integer) by the number of milliseconds and assign it to the box
3. Code
html part
<div> <span class="hour">1</span> <strong>:</strong> <span class="minute">2</span> <strong>:</strong> <span class="second">3</span> </div>
css part
<style> span { /* Convert span mode, so that span can set width and height */ display: inline-block; width: 40px; height: 40px; background-color: #333;
…
The post JS Implementing a Countdown Function first appeared on Lenix Blog .
This article is reprinted from https://blog.p2hp.com/archives/9292
This site is for inclusion only, and the copyright belongs to the original author.