ネイティブ 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コンテナをインストールする詳細なチュートリアル
今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...
目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...
序文日曜日に自宅で web.dev の 2020 3 日間ライブを視聴したところ、興味深い点がたくさ...
MySQL トリガー構文の詳細: トリガーは、特定のテーブル内のデータが挿入、削除、または更新される...
導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...
CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...
序文デフォルトでは、Nginx ログはファイルに書き込まれます。各ドメインのログを区別するために、通...
データベースを表示show databases;データベースを作成するDATABASE データベース...
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...
実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...
ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...
Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...