- A+
所属分类：Web前端
题目：做一个电子时钟，显示当前的年月日，时分秒，要求自动变化。
案例分析：
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>
