©2020-2024 ioDraw All rights reserved
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
title> <style> body{ background-color: #2a3852; } #box { display: flex;
justify-content: center; align-items: center; flex-direction: column; margin-top
: 300px; } #box h1 { letter-spacing: 3px; font-weight: 500; color: #fff; } #time
{ display: flex; flex-direction: row; line-height: 50px; } #time span {
font-size: 20px; color: #fff; background-color: #DC143C; border-radius: 10px;
width: 70px; height: 50px; text-align: center; } #time strong { text-align:
center; margin-left: 20px; background-color: #DC143C; border-radius: 10px; width
: 70px; height: 50px; display: block; } </style> </head> <body> <div id="box"> <
h1>距离2022年新年，还有</h1> <div id="time"> <span id="day">**天</span> <strong><span id=
"hour">**时</span></strong> <strong><span id="minute">**分</span></strong> <strong
><span id="second">**秒</span></strong> </div> </div> <script src="common.js"></
script> <script> var daySpan = my$('day'); var hourSpan = my$('hour'); var
minuteSpan= my$('minute'); var secondSpan = my$('second'); TimeRow();
setInterval(TimeRow, 1000) function TimeRow() { var end = new Date('2022-01-1
0:0:0'); var start = new Date(); var time = getInterval(start, end);
setInnerText(daySpan, time.day+'天'); setInnerText(hourSpan, time.hour+'时');
setInnerText(minuteSpan, time.minute+'分'); setInnerText(secondSpan, time.second+
'秒'); } </script> </body> </html> function my$(id) { return document.
getElementById(id); } // 处理innerText和textContent的兼容性问题 // 设置标签之间的内容 function
setInnerText(element, content) { // 判断当前浏览器是否支持 innerText if (typeof element.
innerText=== 'string') { element.innerText = content; } else { element.
textContent= content; } } function getInterval(start, end) { // 两个日期对象，相差的毫秒数
var interval = end - start; // 求 相差的天数/小时数/分钟数/秒数 var day, hour, minute, second;
// 两个日期对象，相差的秒数 // interval = interval / 1000; interval /= 1000; day = Math.
round(interval / 60 / 60 / 24); hour = Math.round(interval / 60 / 60 % 24);
minute= Math.round(interval / 60 % 60); second = Math.round(interval % 60);
return { day: day, hour: hour, minute: minute, second: second } }