題目：做一個電子時鐘，顯示當前的年月日，時分秒，要求自動變化。 案例分析： 1.使用一個div盒子來展示時鐘的內容； 2.將盒子在JavaScrip裡面獲取div盒子； 3.我們需要一個定時器setInterval每隔一秒使時鐘變化一次； 4.利用時間函數Date()獲取系統時間，並分別獲取年月日， ...
題目：做一個電子時鐘，顯示當前的年月日，時分秒，要求自動變化。
案例分析：
1.使用一個div盒子來展示時鐘的內容；
2.將盒子在JavaScrip裡面獲取div盒子；
3.我們需要一個定時器setInterval每隔一秒使時鐘變化一次；
4.利用時間函數Date()獲取系統時間，並分別獲取年月日，時分秒；
5.當獲取過來的數小於10，利用三元運算符字元串拼接的方式讓它顯示成 2022年05月01日 00：00：00的樣子
6.利用innerHTML將獲得結果寫進div盒子裡面。
要註意的是：getMonth()返回的月份比當前月份小一個月，因此我們需要在後邊加一。
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; line-height: 100px; margin: 100px auto; background-color: black; color: #fff; text-align: center; font-size: 50px; } </style> </head> <body> <div class="box">123</div> <script> // 1.獲取元素 var box = document.querySelector('.box'); //2.使用定時器每隔一秒更新一次 setInterval(getTime, 1000); function getTime() { //3.利用時間函數獲取系統時間 var time = new Date(); var year = time.getFullYear();//年 year = year < 10 ? '0' + year : year; var mon = time.getMonth() + 1;//月 mon = mon < 10 ? '0' + mon : mon; var date = time.getDate();//日 date = date < 10 ? '0' + date : date; var h = time.getHours();//小時 h = h < 10 ? '0' + h : h; var m = time.getMinutes();//分鐘 m = m < 10 ? '0' + m : m; var s = time.getSeconds();//秒 s = s < 10 ? '0' + s : s; box.innerHTML = year + '年' + mon + '月' + date + '日' + '' + h + ':' + m + ':' + s; } </script> </body> </html>
