この記事では、デジタル時計効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 レンダリング需要分析1. 日付から時間を取得する ソースコード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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS の Nginx 公式 Yum ソースの設定を詳しく解説
コメントとメッセージはもともと、ウェブマスターがコミュニティと読者層を構築するための優れた手段でした...
MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...
序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...
共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...
目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...
目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...
目次序文オプション1:オプション2:オプション3:オプション4(最終的に採用されたオプション):要約...
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...
1. MS SQL Server 2005 --1. ログをクリアするexec('DUMP...
JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...
1.docker search mysql查看mysql版本 2. docker pull mysq...
Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思いますこ...
1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...