使用JavaScript制作一个页面的电子时钟 |
您所在的位置：网站首页 › js显示当前时间的变化 › 使用JavaScript制作一个页面的电子时钟 |
使用JavaScript制作一个页面的电子时钟
|
题目：做一个电子时钟，显示当前的年月日，时分秒，要求自动变化。 案例分析： 1.使用一个div盒子来展示时钟的内容； 2.将盒子在JavaScrip里面获取div盒子； 3.我们需要一个定时器setInterval每隔一秒使时钟变化一次； 4.利用时间函数Date()获取系统时间，并分别获取年月日，时分秒； 5.当获取过来的数小于10，利用三元运算符字符串拼接的方式让它显示成 2022年05月01日 00：00：00的样子 6.利用innerHTML将获得结果写进div盒子里面。 要注意的是：getMonth()返回的月份比当前月份小一个月，因此我们需要在后边加一。 代码： Document .box{ width: 500px; line-height: 100px; margin: 100px auto; background-color: black; color: #fff; text-align: center; font-size: 50px; } 123 // 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; }运行结果：
|
【本文地址】