デジタル時計効果を実現するJavaScript

デジタル時計効果を実現するJavaScript

この記事では、デジタル時計効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

レンダリング

需要分析

1. 日付から時間を取得する
2. インターバルタイマーsetIntervalで時間を動的に取得する
3. インターバルタイマーsetIntervalの間隔を1000ミリ秒（1秒）に設定して、時間を一度取得します。
4. 見栄えの良いスタイルを実現するために、数字の代わりにデジタル画像を使用します。

ソースコード

HTML部分

<div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒</div>

CSS部分

<スタイル>
/*なし*/ 
</スタイル>

JavaScript

<スクリプト>
 // 要件: デジタル時計 var date = new Date();
 var imgArr = document.getElementsByTagName('img'); //img 画像のコレクションを取得します var hours, minutes, seconds;
 var time = setInterval(関数() {
 日付 = 新しい日付();
 // 時間を取得します hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(時間 / 10) + ".png"
 imgArr[1].src = "img/" + 時間 % 10 + ".png"
 // 分を取得します minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(分 / 10) + ".png"
 imgArr[3].src = "img/" + 分 % 10 + ".png"
 // 秒を取得します seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(秒 / 10) + ".png"
 imgArr[5].src = "img/" + 秒 % 10 + ".png"
 console.log(時間);
 console.log(分);
 console.log(秒);
 }, 1000)
</スクリプト>

合計コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
</head>
<本文>
 <div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒</div>
</本文>

</html>
<スクリプト>
 // 要件: デジタル時計 var date = new Date();
 var imgArr = document.getElementsByTagName('img'); //img 画像のコレクションを取得します var hours, minutes, seconds;
 var time = setInterval(関数() {
 日付 = 新しい日付();
 // 時間を取得します hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(時間 / 10) + ".png"
 imgArr[1].src = "img/" + 時間 % 10 + ".png"
 // 分を取得します minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(分 / 10) + ".png"
 imgArr[3].src = "img/" + 分 % 10 + ".png"
 // 秒を取得します seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(秒 / 10) + ".png"
 imgArr[5].src = "img/" + 秒 % 10 + ".png"
 }, 1000)
</スクリプト>

使用した画像:

画像がないので、コードを直接コピーしても効果は現れません。いくつかの画像を見つけて置き換え、少し修正してください。コードを理解できる限り、修正しても問題ありません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue.js は日付と週を含むデジタル時計機能の例を実装します
  • スクロールするデジタル時計効果を実現する JS+CSS
  • jsはシンプルなデジタル時計効果を実現します
  • JSを使用してカウントダウンデジタル時計効果を表示する
  • スクロール効果を実現する JavaScript デジタル時計の例
  • JS でカウントダウン デジタル時計効果を実現 [サンプル コード付き]
  • JS で実装された Web ページのカウントダウン デジタル時計効果
  • JavaScript デジタル時計の例の共有
  • HTML5 キャンバス js (デジタル時計) サンプルコード
  • 動的なデジタル時計を実装するJavaScript

<<:  CentOS の Nginx 公式 Yum ソースの設定を詳しく解説

>>:  Linux コマンドを素早く習得する 4 つの方法

推薦する

Linux システムで Java 環境変数を設定する方法

Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

CocosCreatorでクールなレーダーチャートを描く方法

目次序文プレビュー文章グラフィックコンポーネントプロパティ機能グリッドを描く軸角度を計算するスケール...

Dockerでコンテナを作成するときにコンテナIPを指定する実装例

Docker はコンテナを作成するときに、デフォルトでブリッジ ネットワークを使用し、IP アドレス...

React Hooksコンポーネント間で値を渡す方法の詳細な説明（tsを使用）

目次父から息子へ息子から父へクロスレベルコンポーネント（親から子孫）父から息子へpropsを通じて値...

MySQL MGR の利点は何ですか?

MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...

Linuxシステムにおけるキー認証に基づくSSHサービスのプロセス

ご存知のとおり、SSH は現在、リモート ログイン セッションやその他のネットワーク サービスにセキ...

Vue-router プログラムナビゲーションの 2 つの実装コード

ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...

シンプルな CSS テキストアニメーション効果

成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...

HTMLはマーキーを使用してテキストを左右にスクロールします

コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...

Firefox で英語の文字が折り返されない問題の解決方法

テキストのレイアウトには、言語に応じていくつかの書式設定要件があります。たとえば、簡体字中国語では、...

HTML+CSSプロジェクト開発経験概要（推奨）

ここ数日ブログを更新していませんでした。簡単な HTML+CSS プロジェクトを終えたところです。数...

HTMLテーブルタグの詳しい解説（初心者向け）

表> <TR> <TD> <TH> <キャプション&...

MySQLテーブルパーティショニングプログラムを変更する方法

MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...