简单版电子时钟,需要以下几个步骤
1. 封装一个函数 返回当前的时分秒
2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用
3. 把获取到的时间放到span盒子里,添加样式
效果展示
实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电子时钟</title> <style> *{ margin: 0; padding: 0; } div { 200px; height: 100px; line-height: 100px; margin: 100px auto; background-color: skyblue; text-align: center; } span { display: inline-block; 40px; height: 40px; line-height: 40px; color: #ffffff; font-size: 20px; background-color: cornflowerblue; text-align: center; } </style> </head> <body> <div> <span class="hour"></span> <span class="minute"></span> <span class="second"></span> </div> <script> let hour = document.querySelector('.hour'); let minute = document.querySelector('.minute'); let second = document.querySelector('.second'); // 1. 封装一个函数 返回当前的时分秒 getTimes(); function getTimes() { let time = new Date(); let h = time.getHours(); h = h < 10 ? "0" + h : h;
// 将获取到的时间h添加到span盒子里 hour.innerHTML = h; let m = time.getMinutes(); m = m < 10 ? "0" + m : m;
// 将获取到的时间m添加到span盒子里 minute.innerHTML = m;
// 将获取到的时间s添加到span盒子里 let s = time.getSeconds(); s = s < 10 ? "0" + s : s; second.innerHTML = s; }
// 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 setInterval(getTimes,1000); </script> </body> </html>