ダイナミッククロックを実現するJS+CSS

この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

知識ポイントの要約:

document.querySelector()メソッドは、指定された CSS セレクターに一致するドキュメント内の要素を返します。

setInterval()メソッドは、指定された期間 (ミリ秒単位) で関数を呼び出したり、式を評価したりします。
setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じられるまで、関数を繰り返し呼び出します。 setInterval() によって返される ID 値は、clearInterval() メソッドのパラメーターとして使用できます。

HTML+js部分

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
 <メタ文字セット="UTF-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <link rel="スタイルシート" href="shiying.css" >
 <title>ドキュメント</title>
</head>

<本文>
 <div class="時計">
 <div class="時間">
 <div class="hr" id="hr"></div>
 </div>
 <div class="min">
 <div class="mn" id="mn"></div>
 </div>
 <div class="sec">
 <div class="sc" id="sc"></div>
 </div>
 </div>
 <script type="text/javascript">
 定数度 = 6;
 定数hr = document.querySelector('#hr');
 定数 mn = document.querySelector('#mn');
 定数sc = document.querySelector('#sc');

 間隔を設定する(() => {

 day = new Date();
 hh = day.getHours() * 30 とします。
 mm = day.getMinutes() * deg; とします。
 ss = day.getSeconds() * deg; とします。

 hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;
 mn.style.transform = `rotateZ(${mm}deg)`;
 sc.style.transform = `rotateZ(${ss}deg)`;
 })

 </スクリプト>
</本文>

</html>

CSS部分

*{
 マージン:0;
 パディング:0;
 ボックスのサイズ: 境界線ボックス;
}
体{
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 最小高さ: 100vh;
 背景: #091921;
}
。クロック{
 幅: 350ピクセル;
 高さ: 350ピクセル;
 ディスプレイ:フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 背景: url(1613462007944.png);
 背景サイズ: カバー;
 境界線:4px 実線 #091921;
 境界線の半径: 50%;
 ボックスシャドウ: 0 -15px 15px rgba(255,255,255,0.05),
 インセット 0 -15px 15px rgba(255,255,255, 0.05),
 0 -15px 15px rgba(0,0,0,0.05),
 インセット 0 -15px 15px rgba(0,0,0, 0.05);
}
.clock:前
{
 コンテンツ："";
 位置: 絶対;
 幅: 15px;
 高さ: 15px;
 背景: #fff;
 境界線の半径: 50%;
 zインデックス:10000;

}
.時計 .時間、
.時計 .分、
.時計 .秒
{
 位置: 絶対;

}
.clock .hour, .hr{
 幅: 160ピクセル;
 高さ: 160px;
}
.clock .min, .mn{
 幅: 190ピクセル;
 高さ: 190ピクセル;
}
.clock .sec, .sc{
 幅: 230ピクセル;
 高さ: 230px;
}
.hr、.mn、.sc{
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 位置: 絶対;
 境界線の半径: 50%;
}
.hr:前{
 コンテンツ："";
 位置: 絶対;
 幅: 8px;
 高さ: 80px;
 背景: #ff105e;
 zインデックス: 10;
 境界線の半径: 6px 6px 0 0;
}
.mn:前{
 コンテンツ："";
 位置: 絶対;
 幅: 4px;
 高さ: 90px;
 背景: #fff;
 zインデックス: 11;
 境界線の半径: 6px 6px 0 0;
}
.sc:前{
 コンテンツ："";
 位置: 絶対;
 幅: 4px;
 高さ: 150px;
 背景: #fff;
 zインデックス:12;
 境界線の半径: 6px 6px 0 0;
}

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

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