The New Year is coming, use css3 to realize a super romantic New Year countdown, I hope you like it.
Table of contents
2 Realize the romantic heart-shaped background
3 Layout areas for hours minutes and seconds
5. Then assign the obtained hours, minutes, and seconds to the DOM
7. Supplementary knowledge point 1- why not write 1000 for the countdown
1 Implementation idea
Inspired by the recently popular Ignite You, Warm Me, I can get a romantic heart shape as the background, showing that time flies by in the golden years of romance;
Then arrange the hours, minutes, and seconds by horizontally and vertically centering them;
Use css3 box-shadow and text-shadow to render blocks and fonts in a more romantic atmosphere;
Then use js to perform the second-level decrement of the countdown to assign a value to get the final countdown.
2 Realize the romantic heart-shaped background
First seek a romantic heart-shaped background as a romantic foreshadowing. Then set the background image of the body. Note that the height here should be set to 100vh, and the background should be set to the repeat attribute value, so that the entire page is covered and romantic. code show as below:
body {
width: 100%;
height: 100vh;
background: url(./bg2.png) repeat;
}
3 Layout areas for hours minutes and seconds
Here, the horizontal and vertical centering method is used to set a main area, and then customize 3 blocks through the flex layout to display hours, minutes, and seconds. And each block needs to do a certain shadow effect through css3. Here, box-shadow and text-shadow are used. (Note that this step is still fake data for the time being. Don’t worry about the data in this step. There will be dynamics later) code show as below:
.outer-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
justify-content: space-between;
width: 640px;
height: 200px;
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: -4px -2px 163px #ff0033;
color: red;
text-align: center;
line-height: 200px;
background: rgba(0, 0, 0, 0.8);
font-size: 80px;
letter-spacing: 3px;
text-shadow: -1px -4px #6c6775;
}<div class="outer-box">
<div class="box" id="hour">
580
<div>时</div>
</div>
<div class="box" id="min">
58
<div>分</div>
</div>
<div class="box" id="sec">
58
<div>秒</div>
</div>
</div>
4. js countdown
First of all, it is known that the new year's time is 23:59:59 on December 31, 2022. By bringing this time into new Date() to get the millisecond value, subtract it from the current millisecond value. Then convert the difference in milliseconds into hours, minutes and seconds.
Note that the concept of divisor and remainder is mainly used here, the code is as follows:
let yearTime = new Date('2022-12-31 23:59:59').getTime();
let now = new Date().getTime();
let value = yearTime - now; // 毫秒的差值
let hour = Math.floor(value/(1000*60*60)); // 剩余小时数
let min = Math.floor(value%(1000*60*60)/(1000*60)); // 剩余分钟数
let sec = Math.floor(value%(1000*60*60)%(1000*60)/1000); // 剩余描述5. Then assign the obtained hours, minutes, and seconds to the DOM
The first is to obtain the DOM areas of the three blocks through the document.getElementById method of js, and then assign the calculated value obtained in the previous step to the DOM. The value assignment in this step adopts the method of innerHTML, and the code is as follows:
let hourDom = document.getElementById('hour');
let minDom = document.getElementById('min');
let secDom = document.getElementById('sec');
hourDom.innerHTML = hour + '<div>时</div>';
minDom.innerHTML = min + '<div>分</div>';
secDom.innerHTML = sec + '<div>秒</div>';6. One update per second
The setInterval function is used here to reacquire the current timestamp once per second, and then continuously compare and calculate it with the New Year's time, and the calculation process is the same every time, which is the code of the previous step. code show as below:
let countSecondFn = setInterval(() => {
。。。。。。
上一步的代码块
。。。。。。
}, 980)
7. Supplementary knowledge point 1- why not write 1000 for the countdown
The agreed countdown is just one second, that is, every 1000 milliseconds, how to write 980?
I remember that a certain period of time, a new mobile phone with an ordinary mobile phone (6C8G) executes about 10W lines of js code per second. So if your countdown is written in the project, if you still use vue/react frameworks, then executing a countdown may involve an unknown number of lines of code, and your code will eventually be recognized by the browser, and then Rendered to the page step by step.
Therefore, if you still write 1000 and execute it once, the result is likely to be that the real New Year’s bell has already started, and our countdown is still going on
8. Supplementary knowledge point 2- switch the page and then switch back, the countdown will jump crazily
This is because the browser has the feature of saving memory for setInterval. When you switch the page and leave, it will sleep temporarily. When you switch back, the browser will make up for the previous sleep time.
Therefore, we only need to stop the timer when we detect that the page is switched, and then execute the timer when the browser is switched back.
At this time, you can operate with the following code:
document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden'){
window.clearInterval(countSecondFn);
countSecondFn = null;
}else if(document.visibilityState=='visible'){
goOnCount();
}
});9. Complete source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超浪漫新年倒计时</title>
<style>
html, body, * {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
background: url(./bg2.png) repeat;
}
.outer-box {
display: flex;
justify-content: space-between;
width: 640px;
height: 200px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.box {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.8);
box-shadow: -4px -2px 163px #ff0033;
color: red;
text-align: center;
line-height: 200px;
font-size: 80px;
letter-spacing: 3px;
text-shadow: -1px -4px #6c6775;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="box" id="hour">
580
<div>时</div>
</div>
<div class="box" id="min">
58
<div>分</div>
</div>
<div class="box" id="sec">
58
<div>秒</div>
</div>
</div>
<script>
function goOnCount() {
let countSecondFn = setInterval(() => {
let yearTime = new Date('2022-12-31 23:59:59').getTime();
let now = new Date().getTime();
let value = yearTime - now;
let hour = Math.floor(value/(1000*60*60));
let min = Math.floor(value%(1000*60*60)/(1000*60));
let sec = Math.floor(value%(1000*60*60)%(1000*60)/1000);
let hourDom = document.getElementById('hour');
let minDom = document.getElementById('min');
let secDom = document.getElementById('sec');
hourDom.innerHTML = hour + '<div>时</div>';
minDom.innerHTML = min + '<div>分</div>';
secDom.innerHTML = sec + '<div>秒</div>';
}, 980)
}
goOnCount();
function stopCount() {
window.clearInterval(countSecondFn);
countSecondFn = null;
}
document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden'){
stopCount();
}else if(document.visibilityState=='visible'){
goOnCount();
}
});
</script>
</body>
</html>Conclusion:
I hope that with the countdown, all the unsatisfactory things in 2022 will disappear sooner, but no matter what happens in 2023 in the future, we should bravely rush forward, even if we fail, at least we will rush through.