JS 實現春節倒計時效果
阿新 • • 發佈：2021-01-12
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>倒計時</title> 8 <style> 9 section { 10 position: relative;HTML+CSS+JS11 width: 1024px; 12 height: 768px; 13 margin: 10px auto; 14 /* background: rgba(255, 3, 3, 0.5); */ 15 16 text-align: center; 17 18 } 19 20 span { 21 22 display: inline-block; 23 margin-top: 25px;24 width: 100px; 25 height: 100px; 26 line-height: 100px; 27 font-family: '楷體'; 28 font-size: 25px; 29 background: rgba(0, 0, 0, 0.1); 30 } 31 32 .sun { 33 position: absolute; 34 left: -50px;35 top: 400px; 36 width: 400px; 37 height: 400px; 38 } 39 .sun img{ 40 width: 100%; 41 height: 100%; 42 } 43 44 .bg-img{ 45 margin: 50px auto; 46 width: 845px; 47 height: 475px; 48 } 49 .bg-img img{ 50 width: 100%; 51 height: 100%; 52 } 53 p { 54 55 top: 10px; 56 left: 75px; 57 58 font-family: "楷體"; 59 font-size: 30px; 60 } 61 .p1{ 62 color: red; 63 } 64 </style> 65 </head> 66 67 <body> 68 <section> 69 <div class="bg-img"> 70 <img src="../img/春節.jpg" alt=""> 71 </div> 72 <div class="sun"> 73 <img src="../img/太陽.gif" alt=""> 74 </div> 75 76 <p class="p1">春節倒計時</p> 77 <p class="p2">距 2021 春節 (辛丑年 牛年) 還有:</p> 78 <span class="tian">天</span> 79 <span class="shi">時</span> 80 <span class="fen">分</span> 81 <span class="miao">秒</span> 82 </section> 83 84 85 <script> 86 // 獲取元素 87 var tian = document.querySelector('.tian') 88 var shi = document.querySelector('.shi') 89 var fen = document.querySelector('.fen') 90 var miao = document.querySelector('.miao') 91 92 //春節日期 93 var NewYearTime = +new Date('2021-02-12 00:00:00') 94 95 GetTime() 96 // 自動重複呼叫函式,間隔一秒 97 setInterval(GetTime, 1000) 98 99 // 獲取時間函式 100 function GetTime() { 101 var nowtime = +new Date() //返回自1970年1月1日至今的總毫秒數 102 var times = (NewYearTime - nowtime) / 1000 //得到使用者輸入的時間-當前時間的毫秒值 / 1000 = 剩餘秒總數 103 104 var t = parseInt(times / 60 / 60 / 24) //得到天 105 t = t < 10 ? '0' + t : t 106 tian.innerHTML = t + ' 天' 107 var h = parseInt(times / 60 / 60 % 24) //得到小時 108 h = h < 10 ? '0' + h : h //三元運算,如果小於10,就在十位補0,如果大於10 就正常輸出 109 shi.innerHTML = h + ' 小時' 110 var m = parseInt(times / 60 % 60) //取得分鐘 111 m = m < 10 ? '0' + m : m 112 fen.innerHTML = m + ' 分鐘' 113 var s = parseInt(times % 60) //取得秒 114 s = s < 10 ? '0' + s : s 115 miao.innerHTML = s + ' 秒' 116 } 117 </script> 118 </body> 119 120 </html>
效果圖