jsはシンプルなカウントダウンを実装します
|
この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<script src="./3. 10未満の場合はゼロを入力してください.js"></script>
<スタイル>
div {
フロート: 左;
幅: 100ピクセル;
高さ: 100px;
背景色: #000;
テキスト配置: 中央;
行の高さ: 100px;
色: #fff;
フォントサイズ: 30px;
右マージン: 10px;
}
</スタイル>
</head>
<本文>
<div></div>
<div></div>
<div></div>
<div></div>
<スクリプト>
タグ名によって要素を取得します。
var inputTime = +new Date('2021-02-05 00:00:00'); // ユーザーの入力時刻から 1970 年 1 月 1 日までの合計ミリ秒数 setInterval(countTime, 1000);
カウントタイム();
関数 countTime() {
var nowTime = +new Date(); //現在の時刻から1970年1月1日までの合計ミリ秒数 // console.log(timer);
var times = (inputTime - nowTime) / 1000; // 秒 var d = parseInt(times / 60 / 60 / 24); // 日 div[0].innerHTML = addZero(d) + 'days';
var h = parseInt(times / 60 / 60 % 24) //div[1].innerHTML = addZero(h) + 'time';
var m = parseInt(times / 60 % 60); //div[2].innerHTML = addZero(m) + '分';
var s = parseInt(times % 60); //秒 div[3].innerHTML = addZero(s) + 'seconds';
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル
>>: Linux サーバーのステータスとパフォーマンスに関連するコマンドの詳細な説明
推薦する
MySQL トリガーの使用シナリオとメソッドの例
トリガー：トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか
問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...
el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明
目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...
MySQL インデックスの長所と短所、およびインデックス作成のガイドライン
1. インデックスを作成する理由（メリット）インデックスを作成するとシステムのパフォーマンスが大幅に...
Javascript の基礎: 演算子とフロー制御の詳細な説明
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
CentOS に Memcached と PHP Memcached 拡張機能をインストールする
高性能分散メモリオブジェクトキャッシュシステムMemcachedについては、別の記事「Windows...
JSは5つ星の賞賛効果を達成
JS を使用してオブジェクト指向メソッドを実装し、JD.com の 5 つ星レビュー効果を実現します...
現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法
目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...
docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析
Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...
デザイン理論：フォントデザインの基礎
<br />言葉は、人間の思考や感情を伝えるために必然的に生み出されるものです。人類の文...
MySQLの手順を完全に削除する
目次1. まずMySQLサーバーを停止する2. MySQLサーバーをアンインストールする3. MyS...
Vue のライフサイクルとフック関数の詳細な説明と典型的な面接の質問
目次1. Vue ライフサイクル2. フック機能2.1 4つの段階と8つの方法に分かれています。 2...
nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明
1. Apache 静的リソースのクロスドメイン アクセスApache設定ファイルhttpd.con...
JavaScript Promise の徹底解説
目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...
MySQL SELECT実行順序の簡単な理解
SELECT ステートメントの完全な構文は次のとおりです。 （7）選択 (8) DISTINCT ...