リアルタイムクロックを実装するネイティブJS

ネイティブ JS で実装したリアルタイムクロックエフェクトを共有します。エフェクトは以下のとおりです (PS: 実際のポインタは 360 度動きますが、スクリーンショットを撮ったときにキャプチャされたのは一部だけです)

上記のエフェクトには、文字盤、時針、分針、秒針の合計 4 つの画像が必要です。必要に応じて独自の画像を作成できます。実装コードは次のとおりです。

<!DOCTYPE html>
<html>
 
<head lang="ja">
    <メタ文字セット="UTF-8">
    <title>リアルタイムクロックを実装するネイティブ JS</title>
    <スタイル>
        .時計{
            幅: 600ピクセル;
            高さ: 600px;
            マージン: 100px 自動;
            /*文字盤の背景*/
            背景: url(images/0.jpg) 繰り返しなし;
            位置: 相対的;
        }
 
        .clock div {
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 100%;
            高さ: 100%;
            /* 時針の画像 */
            背景: url(images/1.png) 繰り返しなし 中央 中央;
        }
 
        #m {
            /* 分針画像*/
            背景画像: url(images/2.png);
        }
 
        #s {
            /* 中古写真 */
            背景画像: url(images/3.png);
        }
    </スタイル>
</head>
 
<本文>
    <div class="時計">
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>
 
    <スクリプト>
        // 要素を取得します var h = document.getElementById("h"); // 時間 var m = document.getElementById("m"); // 分 var s = document.getElementById("s"); // 秒 var timer = null;
 
        // 現在の時間に応じて各ボックスの回転角度をリアルタイムで変更します timer = setInterval(function () {
            var date = 新しい Date();
 
            // 現在の日付の各時間部分に基づいてボックスの移動角度を計算します // 360/12 30 度/時間 h.style.transform = "rotate(" + date.getHours() * 30 + "deg)";
 
            // 360/60/分 6 度/分 m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)";
 
            // 360/60/秒 6 度/秒 s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)";
 
        }, 1000);
    </スクリプト>
</本文>
 
</html>

JavaScript クロックエフェクトの詳細については、こちらをクリックしてください: JavaScript クロックエフェクトの特別トピック

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

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