デジタル時計効果を実現する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.20 圧縮版のインストールチュートリアル（画像とテキスト付き）

1. MySQL ダウンロード アドレス。 http://ftp.ntu.edu.tw/MySQL...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows10)

MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...

MySql バージョンの問題に対する完璧なソリューション sql_mode=only_full_group_by

1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...

MySQL が「operate_time」エラーのデフォルト値が無効であると報告する問題を解決する

データベースでcreate tableステートメントを実行する テーブル `sys_acl` を作成...

Tomcat の maxPostSize 設定に関する問題と注意事項

1. maxPostSize を設定する理由は何ですか? tomcat コンテナには送信データのサイ...

Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...

Vue SPA ファースト スクリーン最適化ソリューション

目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...

VUE と Canvas を使用して Thunder Fighter タイピング ゲームを実装する方法

今日は、サンダーファイタータイピングゲームを実装します。ゲームプレイは非常に簡単です。それぞれの「敵...

インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント

目次1. gojsの紹介2. Gojsのアプリケーションシナリオ3. gojs を選ぶ理由: 4. ...

MySQL 5.7.16 ZIP パッケージのインストールと設定のチュートリアル

この記事では、MySQL 5.7.16 ZIPパッケージのインストールと設定のチュートリアルを参考ま...

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

Vueは画像のドラッグアンドドロップ機能を実装します

この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...

js の parseInt() の奇妙な動作の調査と修正

背景： parseInt(0.006) または parseInt(0.0006) は 0 という値を...

背景とリンクとして画像を書き込む方法（背景画像＋リンク）

写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...

vite+vue3+element-plus プロジェクトをビルドする手順

viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...