Js电子时钟
简单版电子时钟，需要以下几个步骤
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 {
width: 200px;
height: 100px;
line-height: 100px;
margin: 100px auto;
background-color: skyblue;
text-align: center;
}
span {
display: inline-block;
width: 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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-10-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录