リアルタイムクロックを実装するネイティブ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コンテナをインストールする詳細なチュートリアル
推薦する
DockerでLinuxシェルコマンドを実行する方法
Docker でシェル コマンドを実行するには、コマンドの前に sh -c を追加する必要があります...
MySQL スライディングオーダー問題の原理と解決の例分析
この記事では、例を使用して、MySQL スライディング順序問題の原理と解決方法を説明します。ご参考ま...
Jenkins の Docker のデプロイとインストール手順
まず、Docker がインストールされたサーバーが必要です。 (私はすでにこれをサーバーにインストー...
MySQL GTID マスターとスレーブの不一致を修復するソリューション
目次解決策1: レプリカを再構築する前提条件アドバンテージ欠点手順マスター奴隷解決策2: データ修復...
VUEの基本を理解するのに役立つ記事
目次VUEとはVueのコアプラグインVueルーターヴュークスアクシオス要素UI Vue フロントエン...
CentOS7.4 に MySQL 5.7.26 をインストールするための詳細なチュートリアル
CentOS にはデフォルトで MariaDB がインストールされていますが、これは MySQL の...
Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
MySQLの半同期の詳細な説明
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
Vue+js はビデオのフェードインとフェードアウト効果を実現します
Vue+jsはビデオのフェードインとフェードアウトを実現します。参考までに、具体的な内容は次のとおり...
Deepin Linuxでカーネルを手動でアップグレードする方法
deepinとUbuntuどちらもdebianをベースにしたディストリビューションであり、ここではU...
MySQL の削除に基づく構文エイリアスの問題
目次MySQL 削除構文エイリアスの問題mysql の delete ステートメントでエイリアスを使...
高度なクローラー - JS 自動レンダリングのための Scrapy_splash コンポーネントの使用
目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...
CentOS 7.5 に Docker をインストールする詳細なチュートリアル
Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...
HTML テーブル セルの幅と高さを設定する方法
Web ページを作成するときに、テーブルの幅が揃っていないという問題に遭遇することがよくあります。 ...
JS の new 関数の詳細な説明
目次1. 例2. 兵士100人を作成する3. 質問4. 改善点5. エレガント？ 6. JSの父から...