效果图:
多少是有点粗工滥制了,当天晚上想都没想疯狂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>