溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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如何實現頁面電子時鐘”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
