JavaScript實現(xiàn)頁面電子時鐘

更新時間：2022年06月21日 12:02:53 作者：super碼力

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)頁面電子時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)頁面電子時鐘的具體代碼，供大家參考，具體內容如下

題目：頁面上有一個電子時鐘，顯示當前的年月日，時分秒，要求自動變化，雙位顯示，例如：九點九分九秒，顯示為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);
?
? ? ? ? //要求封裝一個函數(shù)返回當前的時分秒 格式：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>