リアルタイムクロックを実装するネイティブ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 フレームワーク - base.css (ブラウザのデフォルト スタイルをリセット)
コードをコピーコードは次のとおりです。 @文字セット "utf-8"; /* @...
aタグのname属性とid属性を使用してページ内を移動する方法
以前はaタグのname属性を使ってジャンプする方法しか知らなかったのですが、idも使えることを今日知...
MySQL で大文字と小文字を区別しないように設定する方法
mysql は大文字と小文字を区別しないように設定されていますウィンドウズmysqlがインストールさ...
Webフロントエンドインターフェースの設計に必須のスキル
[必須] ユーザーインターフェースPhotoShop/花火デザインアーティストと協力して、スケッチを...
Vue ディレクティブ v-html と v-text
目次1. v-text テキストレンダリング命令2. v-html 1. v-text テキストレン...
SQLと各種NoSQLデータベースの使用シナリオの説明
SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...
ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験（グラフィックチュートリアル）
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT
デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...
CSSの高さの崩壊問題についての簡単な説明
パフォーマンス例えば： HTML: <div class="first"&...
MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
HTML はモバイル上で固定フローティング半透明検索ボックスを実装します
質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...
Vueはユーザーログインとトークン検証を実装します
フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的...
IE6 で幅と高さがおかしいバグ
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
Tencent Cloud Serverの構築方法を説明します（グラフィックチュートリアル）
この記事は元々ブロガーのWeiwei Miaoによって書かれたものです。ブログホームページ: htt...
JSはプログレスバーのスムーズバージョンの詳細な計画を実装します
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...