デジタル時計効果を実現する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 ソースの設定を詳しく解説
推薦する
MySQL 5.7.24 のインストールと設定方法のグラフィックチュートリアル
MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーションに...
MySQL の nvl() 関数に似た ifnull() 関数についての簡単な説明
IFNULL(式1,式2) expr1 が NULL でない場合、IFNULL() は expr1 ...
MySQL Innodbの主な機能挿入バッファ
目次挿入バッファとは何ですか?挿入バッファのトリガー条件は何ですか?なぜ一意のインデックスにできない...
CentOS 7 で yum を使用して MySQL 5.7.20 をインストールする最も簡単な方法
CentOS7 のデフォルトのデータベースは mariadb ですが、mysql を使っている人も多...
MySQL 5.7.16 ZIP パッケージのインストールと設定のチュートリアル
この記事では、MySQL 5.7.16 ZIPパッケージのインストールと設定のチュートリアルを参考ま...
VMware15/16 VMwareのロックを解除してMacOSをインストールする詳細な手順
VMware バージョン: VMware-workstation-full-16 VMware バー...
Python スクリプトを Ubuntu で直接実行する方法
翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...
HTML のフォームフォームのメソッド属性の紹介
1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...
フロントエンドは画像を遅延ロードする方法を知っている必要があります（3つの方法）
目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...
純粋な CSS3 で実装された三目並べゲーム
操作効果: html <div class="三目並べ"> <...
データベースを削除せずにMySQLのすべてのテーブルを素早く削除する方法
この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...
Mysql 更新マルチテーブル共同更新方法の概要
次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...
Vue 仮想 DOM クイックスタート
目次仮想DOM仮想DOMとは何か仮想DOMの役割Vue の仮想 DOM vノードvNodeとはvNo...
HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明
1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...
MySQL におけるデータベース間関連クエリメソッド
ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...