デジタル時計効果を実現するJavaScript
|
この記事では、デジタル時計効果を実現するための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 ソースの設定を詳しく解説
推薦する
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...
Mysql トランザクション ログとログ ファイルが大きすぎて縮小できないという問題を解決します。
1. MS SQL Server 2005 --1. ログをクリアするexec('DUMP...
JavaScript の 50 以上のユーティリティ関数の概要
JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...
Docker はリモート接続のサンプルコードを実現するために MySQL をデプロイします
1.docker search mysql查看mysql版本 2. docker pull mysq...
CSS の :focus-within の楽しさについて簡単に説明します
Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思いますこ...
Kubernetes を使用して Springboot または Nginx をデプロイするための詳細なチュートリアル
1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...