リアルタイムクロックを実装するネイティブ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コンテナをインストールする詳細なチュートリアル
推薦する
現在のマウススライドの座標を取得するVue+openlayer5メソッド
序文： Vue プロジェクトで現在のマウスの座標を取得するにはどうすればよいでしょうか。ここで共有す...
Vueの7つの値転送メソッドの詳細な説明
1. 父から息子へ子コンポーネントにpropsフィールドを定義し、その型は配列です (フィールド値の...
js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明
この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。...
Windows で Mysql を起動したときに 1067 が表示される場合の解決策
数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...
HTML のオートコンプリートを無効にして履歴を表示しないようにする
入力ボックスには、コンテンツを入力するときに常に入力履歴が表示されます。これを無効にする現在の方法は...
入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)
Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...
Vue要素のバックグラウンド認証プロセスの分析
序文：最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...
HTMLの最適化によりWebページの速度が向上
明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...
Zabbixを使用してMySQLを監視する方法
Zabbix 導入ドキュメントzabbix導入後zabbixエージェントの操作1. MySQLを監視...
光沢のある輝くウェブサイトデザインの感動的なデザイン例
このコレクションには、あなたのデザインアイデアにインスピレーションを与える、輝いて光沢のある、優れた...
MySQL での and or クエリの優先度分析
これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...
HTML テーブル マークアップ チュートリアル (16): タイトルの水平方向の配置属性 ALIGN
デフォルトでは、表のタイトルは水平方向に中央揃えされます。ALIGN 属性を使用して、タイトル テキ...
jQueryで大画面スクロール再生効果を実現
この記事では、大画面スクロール効果を実現するためのjQueryの具体的なコードを参考までに紹介します...
Vueコンポーネント登録方法の解釈
目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...
HTML 5のドラフトは正式な標準にはならなかった
<br />昨日、W3C で新しいHTML 5 ドラフト (ワーキング ドラフト) が ...