溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript如何實現動態數字時鐘，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
實現效果
代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 1000px;
height: 300px;
background-image:url(1.jpg);
line-height: 300px;
text-align: center;
font-size: 50px;
font-weight: 500;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box')
//不足十位補零
let addZero = val => val < 10 ? '0' + val : val
//把阿拉伯數字的星期轉化為中國漢字的星期 // 星期映射表
let trans = val => {
let obj = {
0: '日',
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六'
}
return obj[val]
}
setTime ()
//獲取時間的方法
function setTime() {
let time = new Date();
let year = time.getFullYear(); // 獲取年
let month = time.getMonth() + 1; // 獲取月（是從0到11，所以我們要給他加1）
let date = time.getDate(); // 獲取日
let day = time.getDay(); // 獲取星期幾(0是星期日)
let hour = time.getHours(); // 獲取小時
let min = time.getMinutes(); // 獲取分鐘
let sec = time.getSeconds(); // 獲取秒
let value = year + '年' + addZero(month) + '月' + addZero(date) + '日 星期' + trans(day) + ' '+addZero(hour) +
'時' + addZero(min) + '分' + addZero(sec) + '秒'
// 把所有的時間拼接到一起
box.innerText = value
// console.log(value)
// 把拼接好的時間插入到頁面
}
// 讓定時器每間隔一秒就執行一次setTime這個方法（這是實現時鐘的核心）
setInterval(setTime, 1000)
</script>
</body>
</html>素材
以上是“JavaScript如何實現動態數字時鐘”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
