JavaScript案例:倒計時
阿新 • • 發佈:2022-05-06
展示效果:
程式碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒計時</title> <style> a{ /*去除下劃線*/ text-decoration: none; color: black; font-size: 20px; } span{ color: skyblue; font-size: 25px; } </style> </head> <body> <div> <a href="#">現在是北京時間:</a> <span>2022</span> <a href="#">年</a> <span>5</span> <a href="#">月</a> <span>5</span> <a href="#">日</a> <span>19</span> <a href="#">:</a> <span>50</span> <a href="#">:</a> <span>54</span> </div> <div> <a href="#">敵軍還有</a> <span>5</span> <a href="#">秒到達戰場······</a> </div> <script> var box = document.getElementsByTagName("div"); var spa = document.getElementsByTagName("span"); // 日期 setInterval(function () { var data = new Date(); // 獲取年 var year = data.getFullYear(); // 獲取月 var mouth = data.getMonth()+1; // 獲取日 var day = data.getDate(); // 獲取時 var hour = data.getHours(); // 獲取分 var mini = data.getMinutes(); // 獲取秒 var sec = data.getSeconds(); // 補齊兩位數 if (mini<10){ mini = "0" + mini; } if (sec<10){ sec = "0" + sec; } // 獲取到的年賦值給第一個span標籤 spa[0].innerText = year; spa[1].innerText = mouth; spa[2].innerText = day; spa[3].innerText = hour; spa[4].innerText = mini; spa[5].innerText = sec; },1000) var timer = 6; setInterval(function () { if (timer<=0){ box[1].innerText = "時間已到,全軍出擊!!!"; box[1].style.color = "red"; box[1].style.fontSize = "20px"; }else { timer--; spa[6].innerText = timer; } },1000) </script> </body> </html>