デジタル時計効果を実現する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 つの方法

推薦する

Nofollowはコメントやメッセージ内のリンクを本当に機能させる

コメントとメッセージはもともと、ウェブマスターがコミュニティと読者層を構築するための優れた手段でした...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

Tomcat でタイムアウトしたセッションを監視および削除する方法

序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...

MySQL ジョイントインデックス(複合インデックス)の実装

共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...

Reactはtodolistの追加、削除、変更、クエリを実装します

目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...

簡単な約束を段階的に実行する方法を教えます

目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...

MySql ファジークエリ JSON キーワード取得ソリューションの例

目次序文オプション1:オプション2:オプション3:オプション4(最終的に採用されたオプション):要約...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...

JavaScript の 50 以上のユーティリティ関数の概要

JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...

CSS の :focus-within の楽しさについて簡単に説明します

Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思いますこ...

Kubernetes を使用して Springboot または Nginx をデプロイするための詳細なチュートリアル

1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...