Article Directory
Effect
Effect preview: countdown timer can choose time (codepen.io)
reference:
Simple Clock/Countdown timer (codepen.io)
Several ways to achieve the countdown effect on the front-end page
process
Calendar and Get Time
this is<input type="date">
Want to get the time: so that the clicked time can be passed in
<input class="date" id="date" type="date" value="" onchange="timeChange(this.value)">
in the center
I want to center the content of the body up and down, but it has no effect when it is flexset justify-content: center;.This is because the body has no height, its height is spread by the content, and it cannot be centered up and down.To solve this problem, you need to set
height: 100vh;
Make the body occupy the entire window, and at this time, the content will be centered up and down.
The same is true for left and right centering ( width:100vw).
background with words
background color:
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
The background is a kind of green, the font color is white (or light green that is partial to white), and the shadow color of the shadow text-shadow is dark green. The colors are very harmonious.
timer
After we get the selected time, we can calculate the difference between the selected time and the current time, and then we need to write a timer setTimeOut,call itself every second, so that the number of seconds will be dynamically reduced.
timer = setTimeout(function () {
timeChange(date)
}, 1000);
We make each call timeChangeoutput the current time: obviously, every time it is called.
Note that you cannot write here:
timer = setTimeout(timeChange(date), 1000);
This is a recursive call of complexity 2n , calling the function many times. Called once in the 1st second, called 2 times in the 2nd second (original and newly recursive), and called 4 times in the 3rd second... the stack will explode.
clear timer
When selecting a new time, the previous timer should be cleared, otherwise two timers will work at the same time:
if(timer!=='') clearTimeout(timer);
the code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="title">
<div class="text">请输入未来的时间</div>
<input class="date" id="date" type="date" value="" onchange="timeChange(this.value)">
</div>
<div class="container">
<div class="item">
<p class="time">D</p>
<p class="text">DAYS</p>
</div>
<div class="item">
<p class="time">O</p>
<p class="text">HOURS</p>
</div>
<div class="item">
<p class="time">N</p>
<p class="text">MINUTES</p>
</div>
<div class="item">
<p class="time">E</p>
<p class="text">SECONDS</p>
</div>
</div>
</div>
</body>
</html>
<script src="index.js"></script>
CSS
body {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.title {
text-align: center;
}
.title .text {
font-size: 50px;
color: #dbfff69c;
text-shadow: 0 0 10px #009974;
margin: 40px 0;
}
.title .date {
width: 100px;
text-align: center;
margin-bottom: 35px;
background-color: #beffef;
border-radius: 10px;
border: 1px solid #beffef;
padding: 5px;
}
.container {
display: flex;
margin-left: 90px;
}
.container .item {
margin-right: 70px;
text-align: center;
}
.container .item .time {
font-size: 36px;
font-weight: 300;
}
.container .item .text {
font-size: 14px;
font-weight: 400;
border-top: 1px solid #131313;
padding-top: 10px;
margin-top: -14px;
}
JS
let timer=''
function timeChange(date) {
console.log(date)
// 每次选择了新时间要关闭之前的定时器
if(timer!=='') clearTimeout(timer);
let now = new Date().getTime();
let future = new Date(date).getTime()
let distance = future - now
const time = document.getElementsByClassName('time')
const len = time.length;
if (distance <= 0) {
let arr = 'DONE'
for (let i = 0; i < len; i++) {
time[i].innerHTML = arr[i];
}
timer=''
return;
}
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
distance -= days * (1000 * 60 * 60 * 24);
let hours = Math.floor(distance / (1000 * 60 * 60));
distance -= hours * (1000 * 60 * 60);
let minutes = Math.floor(distance / (1000 * 60));
distance -= minutes * (1000 * 60);
let seconds = Math.floor(distance / 1000);
let arr = [days, hours, minutes, seconds];
for (let i = 0; i < len; i++) {
time[i].innerHTML = arr[i];
}
timer = setTimeout(function () {
timeChange(date)
}, 1000);
}