使用JavaScript制作一个页面的电子时钟
题目：做一个电子时钟，显示当前的年月日，时分秒，要求自动变化。
案例分析：
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> 运行结果：
正文到此结束
相关文章
热门推荐
评论插件初始化中...