如何用JS實現(xiàn)動態(tài)時鐘
大致效果：
CSS+HTML+JS如下：
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="utf-8">
? ? ? ? <title></title>
? ? ? ? <style>
? ? ? ? ? ? /* 設置樣式 */
? ? ? ? ? ? div {
? ? ? ? ? ? ? ? width: 100vw;
? ? ? ? ? ? ? ? height: 100vh;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? font-size:100px;
? ? ? ? ? ? ? ? font-weight: 900;
? ? ? ? ? ? ? ? color: aqua;
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <!-- 添加div盒子 -->
? ? ? ? <div id="time"></div>
? ? </body>
? ? <script>
? ? ? ? // 獲取元素
? ? ? ? var gss = document.getElementById('time');
? ? ? ? // 封裝一個函數(shù)
? ? ? ? var getTime = function() {
? ? ? ? ? ? // 獲取最新時間
? ? ? ? ? ? var date = new Date();
? ? ? ? ? ? var hour = date.getHours() < 10 ? '0' : date.getHours();
? ? ? ? ? ? var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
? ? ? ? ? ? var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
? ? ? ? ? ? // 拼接數(shù)據(jù)，并設置一個變量來存儲拼接好的數(shù)據(jù)
? ? ? ? ? ? var time = `${hour}:${min}:${sec}`;
? ? ? ? ? ? // 改變元素內容
? ? ? ? ? ? gss.innerHTML = time
? ? ? ? }
? ? ? ? // 添加定時器，用以定時更新
? ? ? ? setInterval(() => {
? ? ? ? ? ? // 調用函數(shù)
? ? ? ? ? ? getTime()
? ? ? ? }, 1000)
? ? </script>
</html>
