溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何使用JavaScript代碼實現動態數字時鐘”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“如何使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
