js如何实现电子时钟的效果
2022-06-21 09:10:52
代码示例如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#watch{
margin-top: 200px;
font-size:100px;
text-align: center;
}
</style>
</head>
<body>
<div id = "watch"></div>
<script>
//获取id是 watch的元素
var watch = document.getElementById('watch');
//调用 获取日期时间
getDateTime();
//开启定时器
setInterval (getDateTime,1000);
//定义定时器的回调函数，获取当前日期时间
function getDateTime(){
//创建时间，日期，对象
var date = new Date();
//获取年月日时分秒
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
//如果个位前面补充零
m = m < 10 ? '0' + m : m;
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
i = i < 10 ? '0' + i : i;
s = s < 10 ? '0' + s : s;
var dateTimeStr = y + '-'+ m + '-'+ d + ' '+ h + ':' + i + ':' + s ;
//把字符串显示在元素中
watch.innerHTML = dateTimeStr;
}
</script>
</body>
</html>
