シンプルな時計を実装するJavaScript

この記事では、JavaScriptでシンプルな時計を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果画像:

主なアイデア:

1. まず円形のダイヤルを描きます。

2. 次に、js を使用してループ内でスケールを描画します (各スケールは li タグです)。
3. 時針、分針、秒針をもう一度描きます。

4. 次に、JS を使用してポインターを移動します。

コード内には詳細なコメントがあり、コードを直接読むことができます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <スタイルid="スタイル">
        ul{
            リストスタイル: なし;
        }
        ＃丸{
            幅: 200ピクセル;
            高さ: 200px;
            境界線の半径: 100px;
            境界線: 1px 黒一色;
        }
        #ケドゥ・リ{
            幅: 1px;
            高さ: 6px;
            境界線の半径: 10px;
            背景色: 黒;
            transform-origin: center 101px;/*liタグの回転中心と回転半径を設定します。 */
            位置: 絶対;
            左: 109px;
            上: 9px;
        }
        #kedu li:n番目の型(5n+1){
            高さ: 12px;
            幅: 2px;
        }

        /* 秒針を描画します。transform を使用して div を線に描画します。次のポインターは次のように描画されます。 */
        ＃2番{
            幅: 2px;
            高さ: 80px;
            背景色: 赤;
            変換: scaleY(1);
            位置: 絶対;
            左: 108px;
            上: 30px;
            transform-origin: bottom; /* 回転の中心を設定します。transform-origin: bottom; は下端を中心に回転することを意味します。 */
        }
        #分{
            幅: 2px;
            高さ: 65px;
            背景色: グレー;
            変換: scaleY(1);
            位置: 絶対;
            左: 108px;
            上: 45px;
            変換の原点: 下;
        }
        ＃時間{
            幅: 2px;
            高さ: 50px;
            背景色: 黒;
            変換: scaleY(1);
            位置: 絶対;
            左: 108px;
            上: 60px;
            変換の原点: 下;
        }
        #p12{
            位置: 絶対;
            左: 100px;
            上: 0px;
        }
        #p3{
            位置: 絶対;
            左: 190px;
            上: 84px;
        }
        #p6{
            位置: 絶対;
            左: 105px;
            上: 165px;
        }
        #p9{
            位置: 絶対;
            左: 20px;
            上: 82px;
        }
    </スタイル>
    <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>
    <スクリプト>
        // 時計のスケールを描画し、60 li タグを動的に作成します。
        関数li(){
            let ul=document.getElementById("kedu"); // li は ul の下に作成する必要があるため、まず ul を取得します。
            let css; // li のスタイルで CSS 設定を保存するために使用されます。
            (i=0;i<60;i++) の場合{
                css+=`#kedu li:nth-of-type(${i+1}){transform:rotate(${i*6}deg)}`//ul の下の i+1 番目の li の回転角度を設定するループ。li の回転中心は css で設定する必要があります。ul.innerHTML+=`<li></li>`;//ここでは += を使用する必要があります。= を直接使用すると、前の li を覆い隠すため、1 つの li のみが作成されます。覆い隠さないようにするには、+= を使用します。
            }
            let sty=document.getElementById("style")//ここでスタイルタグを取得します。
            sty.innerHTML+=css //ul の下の li タグの CSS スタイルを style に書き込みます。
        }
        li(); //スケールの描画はこれで終わりです。

        関数time(){
            let s=document.getElementById("second"); //時間、分、秒の 3 つのポインタを取得します。これらは後で動的に回転するために使用されます。
            m = document.getElementById("min"); とします。
            h = document.getElementById("hour"); とします。

            //時間を取得します。
            date = new Date();
            let snum=date.getSeconds(); //現在の時刻を秒単位で取得します。
            let mnum = date.getMinutes() + snum / 60; //現在の分を取得します。秒数 / 60 を追加することを忘れないでください。
            let hnum=date.getHours()+mnum/60; //現在の時刻を取得するときは、分/60を追加することを忘れないでください。
            
            s.style.transform=`rotate(${snum*6}deg)`; //設定された変換により回転し、秒針は1秒あたり6度回転します。
            m.style.transform = `rotate(${mnum*6}deg)` // 分針も 1 分間に 6 度回転します。
            h.style.transform = `rotate(${hnum*30}deg)` // ここでは時間です。1 時間は 30 度回転するので、*30 です。
        }
        setInterval(time,100) //タイマーを使用して、この時間関数を 100 ミリ秒ごとに実行します。
    </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: