リアルタイムクロックを実装するネイティブ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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル
推薦する
iframeノードの初期化の問題に関する議論
今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...
Angularの動的コンポーネントの詳細な説明
目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...
HTML 9グリッドレイアウトの実装方法
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...
10 種類のモダンなレイアウトを実現するための CSS コード
序文日曜日に自宅で web.dev の 2020 3 日間ライブを視聴したところ、興味深い点がたくさ...
MySQLトリガーの使用例の詳細
MySQL トリガー構文の詳細: トリガーは、特定のテーブル内のデータが挿入、削除、または更新される...
MySQLのint主キーの自己増分の問題を解決する
導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...
ウェブページを白黒に変換します（Google、Firefox、IE、その他のブラウザと互換性があります）
CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール（1...
Nginx のタイムドログカットの詳細な説明
序文デフォルトでは、Nginx ログはファイルに書き込まれます。各ドメインのログを区別するために、通...
MySQLの基礎知識学習ノート
データベースを表示show databases;データベースを作成するDATABASE データベース...
MySQL でスロークエリを有効にする方法の例
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
MAC 上の MySQL の初期パスワードを忘れた場合の対処方法
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
削除、切り捨て、ドロップの違いと選択方法
序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...
Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。
実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...
Linuxでホスト名を永続的に変更する方法
ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...
Mysqlトランザクション操作の失敗を解決する方法
Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...