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

JavaScript を使用して Web ページクロックを実装します。効果は次の図に示されています。

まず、本体のダイヤルとポインターのリソースの読み込みを完了します。

<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="時間">
<hr id="分">
<hr id="秒">

CSS スタイルを設定します:

<スタイル>
        体{
            マージン: 0;
        }
        div{
            マージン: 0 自動;
            幅: 600ピクセル;
            高さ: 600px;
        }
        ＃時間{
            背景色: 黒;
            幅: 130ピクセル;
            高さ: 10px;
            位置: 固定;
            上: 295px;
            左: 50%;
            左マージン: -65px;
        }
        #分{
            背景色: 赤;
            幅: 200ピクセル;
            高さ: 8px;
            位置: 固定;
            上: 296px;
            左: 50%;
            左マージン: -100px;
        }
        ＃2番{
            背景色: 黄色;
            幅: 270ピクセル;
            高さ: 5px;
            位置: 固定;
            上: 297.5px;
            左: 50%;
            左マージン: -135px;
        }
</スタイル>

最後に、JS コード部分では、ループタイマー setInterval() を使用して、1 秒ごとにメイン関数を呼び出します。メイン関数では、new Date() を使用して時間オブジェクトを作成します。.getHours(); .getMinutes(); .getSeconds() を使用して、現在の時間、分、秒を取得します。次に、CSS 組み込みの animation-rotation を使用して、ポインターの角度を変更します。

間隔を設定します(ウォッチ、1000);
var anjleSeconds=0、anjleMin=0、anjleHours=0;
関数ウォッチ() {
        var Time = 新しい 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 タグで表現されているため、両端で同じ長さになっていることです。

完全なコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        体{
            マージン: 0;
        }
        div{
            マージン: 0 自動;
            幅: 600ピクセル;
            高さ: 600px;
        }
        ＃時間{
            背景色: 黒;
            幅: 130ピクセル;
            高さ: 10px;
            位置: 固定;
            上: 295px;
            左: 50%;
            左マージン: -65px;
        }
        #分{
            背景色: 赤;
            幅: 200ピクセル;
            高さ: 8px;
            位置: 固定;
            上: 296px;
            左: 50%;
            左マージン: -100px;
        }
        ＃2番{
            背景色: 黄色;
            幅: 270ピクセル;
            高さ: 5px;
            位置: 固定;
            上: 297.5px;
            左: 50%;
            左マージン: -135px;
        }
    </スタイル>
</head>
<本文>
<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="時間">
<hr id="分">
<hr id="秒">
<スクリプト>
    間隔を設定します(ウォッチ、1000);
    var anjleSeconds=0、anjleMin=0、anjleHours=0;
    関数ウォッチ() {
        var Time = 新しい 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)";
    }
</スクリプト>
</本文>
</html>

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

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