リアルタイムクロックを実装するネイティブ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コンテナをインストールする詳細なチュートリアル
推薦する
CSSは固定比率のブロックレベルコンテナを簡単に実装できる
H5 レイアウトを設計する場合、通常はバナーに遭遇することになります。例えば、2:1 で表示したい場...
Vue プロジェクトでブラウザ キャッシュ設定を無効にする例
プロジェクトをリリースするときに、キャッシュをクリーンアップする必要があるという問題に遭遇することが...
js はランダムロールコールを実装します
この記事では、ランダムロールコールを実装するためのjsの具体的なコードを参考までに共有します。具体的...
数百万のデータに対して MySQL クエリを最適化する 4 つの方法
目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...
JavaScript シングルスレッドと非同期の詳細
目次1. タスクキュー2. 混乱を招く問題を説明する1. setTimeout(f1,0)とは何です...
Windows 10 でカスタムドメイン名をバインドするように Hexo と GitHub を構成する方法
Hexo は Windows 10 でカスタムドメイン名を GitHub にバインドしますまずドメイ...
CentOS8 - bash: 文字化けとその解決方法
この状況は通常、中国語言語パックがインストールされていないか、デフォルトの言語設定に問題があるために...
CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)
由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...
MySQL で浮動小数点データを文字データに変換するときに起こりうる問題の詳細な説明
序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...
Linux は n 日前のログとサンプルコマンドを自動的に削除します
1. ファイル削除コマンド:対応するディレクトリを検索します -mtime + 日数 -name &...
Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明
目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...
Webpack4プラグインの実装原理についての簡単な説明
目次序文知る練習すれば完璧になる序文wabpack では、ローダーの他にプラグインがコア機能です。プ...
Linux で Bash 環境変数を設定する方法
Shell は C 言語で書かれたプログラムであり、ユーザーが Linux を使用するための橋渡しと...
JSONオブジェクトのキーを置き換える最良の方法
JSON (JavaScript Object Notation、JS Object Notatio...
WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分
シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...