JavaScript實(shí)現(xiàn)簡單鐘表時鐘

更新時間：2021年10月29日 14:15:14 作者：坦淡

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單鐘表時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡單鐘表時鐘的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

主要思想：

1.先畫一個圓表盤。

2.再用js循環(huán)畫刻度（每一個刻度都是li標(biāo)簽）。
3.再畫時分秒指針。

4.再用JS讓指針動起來。

代碼中有詳細(xì)的注釋可以直接看代碼。

<!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>Document</title>
</head>
<body>
    <style id="style">
        ul{
            list-style: none;
        }
        #circle{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            border: 1px solid black;
        }
        #kedu li{
            width: 1px;
            height: 6px;
            border-radius: 10px;
            background-color: black;
            transform-origin: center 101px;/*設(shè)置li標(biāo)簽的旋轉(zhuǎn)中心和旋轉(zhuǎn)半徑。*/
            position: absolute;
            left: 109px;
            top: 9px;
        }
        #kedu li:nth-of-type(5n+1){
            height: 12px;
            width: 2px;
        }

        /* 秒針的繪制，用transform把div繪制成線條，后面的指針都是在這樣。 */
        #second{
            width: 2px;
            height: 80px;
            background-color: red;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 30px;
            transform-origin: bottom; /*設(shè)置它們的旋轉(zhuǎn)中心，transform-origin: bottom；意思是以它們的底部為中心旋轉(zhuǎn)。*/
        }
        #min{
            width: 2px;
            height: 65px;
            background-color: gray;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 45px;
            transform-origin: bottom;
        }
        #hour{
            width: 2px;
            height: 50px;
            background-color: black;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 60px;
            transform-origin: bottom;
        }
        #p12{
            position: absolute;
            left: 100px;
            top: 0px;
        }
        #p3{
            position: absolute;
            left: 190px;
            top: 84px;
        }
        #p6{
            position: absolute;
            left: 105px;
            top: 165px;
        }
        #p9{
            position: absolute;
            left: 20px;
            top: 82px;
        }
    </style>
    <div id="circle">
        <ul id="kedu"></ul>
    </div>
    <div id="second"></div><!--繪制秒針-->
    <div id="min"></div><!--繪制分針-->
    <div id="hour"></div><!--繪制時針-->
    <p id="p12">12</p>
    <p id="p3">3</p>
    <p id="p6">6</p>
    <p id="p9">9</p>
    <script>
        //繪制時鐘的刻度 動態(tài)創(chuàng)建60個li標(biāo)簽。
        function li(){
            let ul=document.getElementById("kedu");//先獲取到ul，因?yàn)橐趗l下創(chuàng)建li。
            let css;//用來存li的style樣式中的CSS設(shè)置。
            for(let i=0;i<60;i++){
                css+=`#kedu li:nth-of-type(${i+1}){transform:rotate(${i*6}deg)}`//循環(huán)設(shè)置ul下的第i+1個li的旋轉(zhuǎn)角度，要在css中設(shè)置了li的旋轉(zhuǎn)中心
                ul.innerHTML+=`<li></li>`;//這里要用+=，如果直接用=，只會創(chuàng)建一個li，因?yàn)闀采w前面的li，為了不出現(xiàn)覆蓋就用+=。
            }
            let sty=document.getElementById("style")//這里獲取到style標(biāo)簽。
            sty.innerHTML+=css //把ul下的li標(biāo)簽的css樣式寫入到style里。
        }
        li();//這里結(jié)束就把刻度畫好了。

        function time(){
            let s=document.getElementById("second");//獲取到時分秒的三個指針，后面用來動態(tài)讓它們旋轉(zhuǎn)起來。
            let m=document.getElementById("min");
            let h=document.getElementById("hour");

            //獲取時間。
            let date=new Date();
            let snum=date.getSeconds();//獲取現(xiàn)在是多少秒。
            let mnum=date.getMinutes()+snum/60;//獲取現(xiàn)在是多少分，不能忘記加上 秒數(shù)/60。
            let hnum=date.getHours()+mnum/60; //獲取現(xiàn)在是多少時，不能忘記加上 分鐘數(shù)/60。
            
            s.style.transform=`rotate(${snum*6}deg)`;//設(shè)置的trasnform就可以讓它們旋轉(zhuǎn)起來，秒針時一秒旋轉(zhuǎn)6度。
            m.style.transform=`rotate(${mnum*6}deg)`//分針也是一分鐘旋轉(zhuǎn)6度。
            h.style.transform=`rotate(${hnum*30}deg)`//這里時小時，一小時旋轉(zhuǎn)30度，所以*30.
        }
        setInterval(time,100)//用計時器每100ms運(yùn)行這個time函數(shù)。
    </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: