效果图：
多少是有点粗工滥制了，当天晚上想都没想疯狂div，唉~
为了方便观看，所以把三部分代码分开了
Code：
JS实现倒计时的代码：
<script type="text/javascript">
window.onload=function(){
function countdown(){
//初始化日期变量
var target_time=new Date("2022/2/1 00:00:00"); //建立目标时间
var now_time=new Date(); //当前时间
var sum = target_time.getTime() - now_time.getTime (); //总的时间
var days = parseInt( (sum/1000/60/60/24)%30); //天数
var hours = parseInt( (sum/1000/60/60)%24 ) ; //小时
var minutes = parseInt( (sum/1000/60)%60 ); //分钟
var seconds = parseInt ( (sum/1000)%60 ); //秒
//倒计时实现
var TimeDays = document.getElementById("Time_days");
var TimeHours = document.getElementById("Time_hours");
var TimeMinutes = document.getElementById("Time_minutes");
var TimeSeconds = document.getElementById("Time_seconds");
TimeDays.innerHTML = `<font color="white" size="27";> ${days}</font>`;
TimeHours.innerHTML = `<font color="white" size="27";> ${hours}</font>`;
TimeMinutes.innerHTML = `<font color="white" size="27";> ${minutes}</font>`;
TimeSeconds.innerHTML = `<font color="white" size="27";> ${seconds}</font>`;
setTimeout (countdown ,1);
}
countdown ();
}
</script>
CSS格式调控代码：
图片用的是相对路径，需要自己搞一下。
<!--CSS-->
<style type="text/css">
/*主背景*/
body{
background-image: url(IMG/tiger.jpg);
background-size: cover;
background-repeat: no-repeat;
}
/*总体布局div,上下div up down*/
.div_main{
width: 1000px;
height: 490px;
background-color:rgb(92,89,89,0.6);
margin: auto;
border: solid 1px;
border-radius: 25px;
margin-top: 19%;
}
.div_up{
width: 100%;
height: 125px;
text-align: center;
color: white;
font-weight: bold;
}
.div_down{
width: 100%;
height: 365px;
}
/*下半部分的横向div框架*/
.div_days{
text-align: center;
width: 25%;
height: 100%;
float: left;
}
.div_hours{
text-align: center;
width: 25%;
height:100%;
float: left;
}
.div_minutes{
text-align: center;
width: 25%;
height:100%;
float: left;
}
.div_seconds{
text-align: center;
width: 25%;
height:100%;
float: left;
}
/*倒计时div*/
#Time_days{
width: 74%;
height: 90px;
border:solid 1px;
border-radius: 5px;
border-color:rgb(219,232,76,0.5);
margin: auto;
margin-top:45px;
margin-bottom: 25px;
background: rgb(219,232,76,0.5);
text-align: center;
font-weight:bold;
}
#Time_hours{
width: 74%;
height: 90px;
border:solid 1px;
border-radius: 5px;
border-color:rgb(219,232,76,0.5);
margin: auto;
margin-top:45px;
margin-bottom: 25px;
background: rgb(219,232,76,0.5);
text-align: center;
font-weight:bold;
}
#Time_minutes{
width: 74%;
height: 90px;
border:solid 1px;
border-radius: 5px;
border-color:rgb(219,232,76,0.5);
margin: auto;
margin-top:45px;
margin-bottom: 25px;
background: rgb(219,232,76,0.5);
text-align: center;
font-weight:bold;
}
#Time_seconds{
width: 74%;
height: 90px;
border:solid 1px;
border-radius: 5px;
border-color:rgb(219,232,76,0.5);
margin: auto;
margin-top:45px;
margin-bottom: 25px;
background: rgb(219,232,76,0.5);
text-align: center;
font-weight:bold;
}
/*下方的字体div*/
#word{
margin-top:50px;
text-align: center;
font-weight: bold;
}
</style>
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spring Festival Countdown</title>
</head>
<body>
<div class="div_main">
<div class="div_up">
<br><font size="9">春节倒计时</font>
</div>
<div class="div_down">
<div class="div_days">
<div id="Time_days"></div>
<div id="word"><font size="6" color="white">Days</font></div>
</div>
<div class="div_hours">
<div id="Time_hours"></div>
<div id="word"><font size="6" color="white">Hours</font></div>
</div>
<div class="div_minutes">
<div id="Time_minutes"></div>
<div id="word"><font size="6" color="white">Minutes</font></div>
</div>
<div class="div_seconds">
<div id="Time_seconds"></div>
<div id="word"><font size="6" color="white">Seconds</font></div>
</div>
</div>
</div>
</body>
</html>