这篇文章主要介绍了JavaScript如何实现页面电子时钟的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现页面电子时钟文章都会有所收获，下面我们一起来看看吧。
题目：页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化，双位显示，例如：九点九分九秒，显示为09:09:09
代码：
计算
安全
数据库
网络和加速
企业服务
<!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>电子时钟</title>
<style>
.box {
width: 550px;
height: 70px;
background-color: seagreen;
border: 5px solid #ccc;
text-align: center;
border-radius: 10px;
font-size: 30px;
margin: 200px auto;
color: #fff;
}
.box span {
line-height: 70px;
}
</style>
</head>
<body>
<div class="box">
<span class="one"></span>
<span class="two"></span>
</div>
<script>
//刷新页面不出错
var timer = setTimeout(function() {
var one = document.querySelector('.one');
var two = document.querySelector('.two');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
var day = arr[date.getDay()];
one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day);
two.innerHTML = (getTime());
clearInterval(timer);
});
//设置定时器
setInterval(function() {
//格式化日期 年月日
var one = document.querySelector('.one');
var two = document.querySelector('.two');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
var day = arr[date.getDay()];
one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day);
two.innerHTML = (getTime());
}, 1000);
//要求封装一个函数返回当前的时分秒 格式：08：08：08
function getTime() {
var time = new 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;
return h + ':' + m + ':' + s;
}
</script>
</body>
</html>
关于“JavaScript如何实现页面电子时钟”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript如何实现页面电子时钟”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
