html实现好看的倒计时卡片
<style>  
.gn_box{     
border: none;     
border-radius: 15px; 
}  
.gn_box {     
padding: 10px 14px;     
margin: 10px;     
margin-bottom: 20px;     
text-align: center;     
background-color: #fff; 
}  
#t_d{     
color: #982585;     
font-size: 18px; 
} 
#t_h{     
color: #8f79c1;     
font-size: 18px; 
}  
#t_m{     
color: #65b4b5;
font-size: 18px; 
}  
#t_s{     
color: #83caa3;     
font-size: 18px; 
}  
</style>  
<div class="gn_box">      
	<h1>
		<font color=#E80017>2</font>
		<font color=#D1002E>0</font>
		<font color=#BA0045>2</font>
		<font color=#A3005C>1</font>
		<font color=#75008A>-</font> 
		<font color=#5E00A1>考</font>
		<font color=#4700B8>研</font>
		<font color=#3000CF>倒</font>
		<font color=#1900E6>计</font>
		<font color=#0200FD>时</font>
	</h1>
	<center> 
		<div id="CountMsg" class="HotDate">
			<span id="t_d"> 天</span>
			<span id="t_h"> 时</span>
			<span id="t_m"> 分</span>
			<span id="t_s"> 秒</span>
		</div>
	</center> 
	<script type="text/javascript">
		function getRTime() {
		  var EndTime = new Date('2020/12/19 00:00:00');
		  var NowTime = new Date();
		  var t = EndTime.getTime() - NowTime.getTime();
		  var d = Math.floor(t / 1000 / 60 / 60 / 24);
		  var h = Math.floor(t / 1000 / 60 / 60 % 24);
		  var m = Math.floor(t / 1000 / 60 % 60);
		  var s = Math.floor(t / 1000 % 60);
		  var day = document.getElementById("t_d");
		  if (day != null) {
			day.innerHTML = d + " 天";
		  }
		  var hour = document.getElementById("t_h");
		  if (hour != null) {
			hour.innerHTML = h + " 时";
		  }
		  var min = document.getElementById("t_m");
		  if (min != null) {
			min.innerHTML = m + " 分";
		  }
		  var sec = document.getElementById("t_s");
		  if (sec != null) {
			sec.innerHTML = s + " 秒";
		  }
		}
		setInterval(getRTime, 1000);
	</script>
</div>
© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论