春节倒计时源码-CSDN博客

本文链接：https://blog.csdn.net/qq_59700927/article/details/122697013

效果图：

多少是有点粗工滥制了，当天晚上想都没想疯狂div，唉~

为了方便观看，所以把三部分代码分开了

Code：

JS实现倒计时的代码：

<script type="text/javascript">
    //window加载完毕后执行函数体
	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>