JavaScript怎么實現(xiàn)簡單網(wǎng)頁時鐘

發(fā)布時間：2021-08-16 15:06:36 來源：億速云閱讀：129 作者：chen 欄目：開發(fā)技術(shù)

這篇文章主要講解了“JavaScript怎么實現(xiàn)簡單網(wǎng)頁時鐘”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript怎么實現(xiàn)簡單網(wǎng)頁時鐘”吧！

利用JavaScript實現(xiàn)網(wǎng)頁時鐘，效果如下圖所示：

首先在body中完成表盤、指針的資源載入：

<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="hour" >
<hr id="min">
<hr id="second">

設(shè)置CSS樣式：

<style>
        body{
            margin: 0;
        }
        div{
            margin: 0 auto;
            width: 600px;
            height: 600px;
        }
        #hour{
            background-color: black;
            width: 130px;
            height: 10px;
            position: fixed;
            top: 295px;
            left: 50%;
            margin-left: -65px;
        }
        #min{
            background-color: red;
            width: 200px;
            height: 8px;
            position: fixed;
            top: 296px;
            left: 50%;
            margin-left: -100px;
        }
        #second{
            background-color: yellow;
            width: 270px;
            height: 5px;
            position: fixed;
            top: 297.5px;
            left: 50%;
            margin-left: -135px;
        }
</style>

最后是JS代碼部分，使用循環(huán)定時器setInterval()每秒調(diào)用一次主函數(shù)，主函數(shù)內(nèi)使用new Date()創(chuàng)建時間對象，分別使用 .getHours()；.getMinutes()；.getSeconds()獲得當(dāng)前的時分秒，然后利用CSS自帶動畫-旋轉(zhuǎn)改變指針的角度：

setInterval(watch,1000);
var anjleSeconds=0,anjleMin=0,anjleHours=0;
function watch() {
        var Time= new Date();
        anjleSeconds=Time.getSeconds()/60*360+90;
        anjleMin=Time.getMinutes()/60*360+90;
        anjleHours=nowHours/12*360+90;
        document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";
    }

目前存在的問題是，時分秒指針由于使用的是hr標(biāo)簽表示，所以存在兩端一樣長的問題。

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        div{
            margin: 0 auto;
            width: 600px;
            height: 600px;
        }
        #hour{
            background-color: black;
            width: 130px;
            height: 10px;
            position: fixed;
            top: 295px;
            left: 50%;
            margin-left: -65px;
        }
        #min{
            background-color: red;
            width: 200px;
            height: 8px;
            position: fixed;
            top: 296px;
            left: 50%;
            margin-left: -100px;
        }
        #second{
            background-color: yellow;
            width: 270px;
            height: 5px;
            position: fixed;
            top: 297.5px;
            left: 50%;
            margin-left: -135px;
        }
    </style>
</head>
<body>
<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="hour" >
<hr id="min">
<hr id="second">
<script>
    setInterval(watch,1000);
    var anjleSeconds=0,anjleMin=0,anjleHours=0;
    function watch() {
        var Time= new Date();
        anjleSeconds=Time.getSeconds()/60*360+90;
        anjleMin=Time.getMinutes()/60*360+90;
        anjleHours=Time.getHours()/12*360+90;
        document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";
    }
</script>
</body>
</html>

感謝各位的閱讀，以上就是“JavaScript怎么實現(xiàn)簡單網(wǎng)頁時鐘”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript怎么實現(xiàn)簡單網(wǎng)頁時鐘這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

JavaScript怎么實現(xiàn)簡單網(wǎng)頁時鐘

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽