デジタル時計効果を実現する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 ソースの設定を詳しく解説
推薦する
React Fragment の紹介と詳しい使い方
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル
目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...
CSS @font-face パフォーマンス最適化の詳細な理解
この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...
Vue3 がデータ監視を実装するためにプロキシを使用する理由の分析
Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...
Win10 での MySQL 8.0 ログインでユーザー 'root'@'localhost' のアクセスが拒否される (パスワード使用: YES) 問題の解決方法
最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...
Webフロントエンドツール、Sublime Text 2の紹介
Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...
Vue 2つのフィールドの共同検証によりパスワード変更機能を実現
目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...
CSS はコンテナ レベル (div...) タグを 1 つの位置 (ページの右端) に固定します。
コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...
IE のテキストモード! DOCTYPE の役割の紹介
前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...
vue+antv でレーダーチャートを実装するためのサンプルコード
1. 依存関係をダウンロードするnpm インストール @antv/データセットnpm インストール ...
Centos 6.5 での mysql-community-server. 5.7.18-1.el6 のインストール
次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...
HTMLの行間設定方法と問題点
<p></p> の行間隔を設定するには、style="line-h...
Vue3 の emitting と attr の違いの分析
目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...
Linux 環境に nginx をインストールするチュートリアル
目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...
MySQLがbinlogファイルを手動で登録し、マスタースレーブ異常を引き起こす理由
1. 問題の原因友人の @水米田 から、POSITION に基づくマスタースレーブについて質問があり...