Table of contents
1. Main idea
1. Get the current time new Date by instantiating the date object through the built-in time function.
2. Because time cannot be subtracted from time, negative numbers may be generated, so the method of timestamp is used to obtain the remaining time in milliseconds, and then the remaining time is converted into the format of days, hours, minutes, and seconds.
3. Finally, assign the obtained content to the defined variable.
Two, css style
Mainly for the content to display beautifully on the page, a little beautification.
<style>
p{
font-size: 36px;
margin: 0 auto;
text-align: center;
line-height: 500px;
}
span{
color: red;
}
</style>Three, html code
Defines a default format for JavaScript import definition variables.
<p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>Four, js content
1. First get all the tags in the spans in the html and use querySelectorAll to get them.
2. Use the endTime tag to define the end time and assign a value to the end time.
3. Similarly, use the newTine tag to define the end tag.
4. Define diffTime to take the end time minus the milliseconds obtained by the current time.
5. The getTime tag is mainly used to convert the acquired time into milliseconds.
6. Dividing by 1000 is to convert milliseconds to seconds in advance.
var spans = document.querySelectorAll('span');
var endTime = new Date ('2022-10-1 12:00:00').getTime();
var newTime = new Date ().getTime();
var diffTime = (endTime-newTime)/1000;1. Define day, hour, min, sen to define the days, hours, minutes, and seconds of the countdown.
2.parseInt is used to convert the obtained value into an integer form.
3. Use the obtained seconds/60 to get how many minutes, then/60 to get how many hours and/24 to get how many days.
4.hour/60/60%24: Use the obtained time to divide the large number by 24 and take the remainder to get how many hours, minutes, and seconds are required.
var day = parseInt(diffTime/60/60/24);
var hour = parseInt(diffTime/60/60%24);
var min = parseInt(diffTime/60%60);
var sen = parseInt(diffTime%60);Assign the obtained day, hour, minute, and second to the previously defined span tag through the innerText method.
spans[0].innerText = day;
spans[1].innerText = honur;
spans[2].innerText = min;
spans[3].innerText = sen;Finally, define the content of the entire JavaScript in a function, and call the entire function in the timer to achieve the countdown effect.
showTime is the name of the function I defined, and 1000 means that the function will be cycled once every 1000 millimeters.
setInterval(showTime,1000)5. Complete code display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 36px;
margin: 0 auto;
text-align: center;
line-height: 500px;
}
span {
color: red;
}
</style>
</head>
<body>
<p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
<script>
function showTime() {
var spans = document.querySelectorAll('span');
var endTime = new Date('2022-10-1 12:00:00').getTime();
var newTime = new Date().getTime();
var diffTime = (endTime - newTime) / 1000;
var day = parseInt(diffTime / 60 / 60 / 24);
var honur = parseInt(diffTime / 60 / 60 % 24);
var min = parseInt(diffTime / 60 % 60);
var sen = parseInt(diffTime % 60);
spans[0].innerText = day;
spans[1].innerText = honur;
spans[2].innerText = min;
spans[3].innerText = sen;
}
setInterval(showTime, 1000)
</script>
</body>
</html>6. Effect display
