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

推薦する

MySQL 8.0.22 の最新バージョンのダウンロードとインストールの超詳細なチュートリアル (Windows 64 ビット)

目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...

Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...

Vue+Elementでページング効果を実現

この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...

IE で ClearType をオンにした後の透明フォントの問題の解決方法

IE で ClearType をオンにした後に発生する透明フォントの問題を解決するには、透明要素に背...

QT が MYSQL データベースに接続するための詳細な手順

最初のステップは、対応するデータベースモジュール（sql）をプロジェクトファイル（ .pro ）に追...

MySQL ツリー構造データベース テーブル設計

目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...

docker の実行に必要な権限の分析

Docker を実行するには root 権限が必要です。非 root ユーザーに docker コマ...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

Zabbixのカスタム監視項目とトリガーについて

目次1. 監視ポート関係の説明操作する2. 監視サービス関係の説明操作する3. テンプレートのインポ...

Vue.jsの機能コンポーネントに関する包括的な理解

目次序文React 関数コンポーネントVue (2.x) の機能コンポーネント🌰 例: el-tab...

CSS 不透明度子要素が親要素の透明度を継承するためのソリューションの詳細な説明

プロジェクト ページの作成中に、子要素が親要素の透明度を継承するという問題に遭遇しました。多くのドキ...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

Linux でファイルの権限 (所有権) を変更する

Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...

Mybatis での動的 SQL ステートメント分析

この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...

Xtrabackup を使用した MySQL バックアップ プロセスの詳細な説明

目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...