本文实例为大家分享了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>
--结束END--
本文标题: JavaScript实现页面电子时钟
本文链接: https://www.lsjlt.com/news/152151.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0