<!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>
</head>
<body>
<div class="box"></div>
<script>
function getTime() {
var date = new Date();
var year = date.getFullYear(); //获取年份
var month = date.getMonth() + 1; //获取月份
var day = date.getDate(); //获取日期
var hour = date.getHours(); //获取小时
hour = hour < 10 ? '0' + hour : hour;
var minute = date.getMinutes(); // 获取分
minute = minute < 10 ? '0' + minute : minute;
var seconds = date.getSeconds(); //获取秒
seconds = seconds < 10 ? '0' + seconds : seconds;
return year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + seconds;
}
setInterval(function() {
document.querySelector('.box').innerHTML = getTime();
}, 1000)
</script>
</body>
</html>
在设置时分秒时,我们使用了三目运算符,来判断当前的时分秒是否是小于10,如果小于10,那么我们就在前面补个0。
注意:我们要用setInterval()定时器来设置间隔1秒就刷新一次,而不用setTimeout(),因为setTimeout()只会调用一次函数,而setInterval()会调用多次。