JavaScript でフロントエンドのカウントダウン効果を実装する
|
この記事では、フロントエンドのカウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル>
div {
パディング: 10px;
フォントサイズ: 100px;
}
ｐ {
フロート: 左;
幅: 300ピクセル;
高さ: 300px;
境界線: 1px 実線 #000000;
色: #ffffff;
背景色: #333333;
テキスト配置: 中央;
行の高さ: 300px;
}
</スタイル>
</head>
<本文>
<div>
<p class="hour">1</p>
<p class="minute">2</p>
<p class="second">3</p>
</div>
<スクリプト>
window.addEventListener('load', 関数() {
//要素を取得しますvar hour = document.querySelector('.hour'); //時間用のブラックボックスvar minute = document.querySelector('.minute'); //分用のブラックボックスvar second = document.querySelector('.second'); //秒用のブラックボックスvar inputTime = +new Date('2021-2-6 18:00:00'); //ユーザー入力の合計ミリ秒数を返しますtimecountDown(); //初めて更新されたときにページが空白にならないように、この関数を1回呼び出します//タイマーを開始しますsetInterval(countDown, 1000);
関数 countDown() {
var nowTime = +new Date(); //現在の時間の合計ミリ秒数を返します var times = (inputTime - nowTime) / 1000; //tiems は残り時間の合計ミリ秒数です var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 残りの時間を時間のブラックボックスに入力します var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m;
分.innerHTML = m;
var s = parseInt(times % 60); //現在の秒数 s = s < 10 ? '0' + s : s;
2番目.innerHTML = s;
}
})
</スクリプト>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL でよく使用される SQL 文を表示する (詳細な説明)
>>: SSH ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
![一般的な MySQL 関数の例の概要 [集計関数、文字列、数値、時刻と日付の処理など]](/upload/images/67cad625f0526.webp)
推薦する
入力要素 [type="file"] を使用する場合のスタイルのカスタマイズとブラウザの互換性の問題に関する議論
この2日間、Baixing.comの筆記試験問題を解いているときに、このような問題に遭遇しました。H...
mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要
1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...
DCL を使用して MySQL でユーザーを管理し、権限を制御する方法
DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...
MySQL UPDATE ステートメントの「典型的な」落とし穴
目次1. 問題のあるSQL文たとえば、次の図のような質問をした人がいました。 問題は次のように要約で...
nginx ssl を設定して https アクセスを実装する手順 (初心者向け)
序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...
Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか
目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...
Linux sftp コマンドの使用法の概要
sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...
MySQL 学習チュートリアル クラスター化インデックス
クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...
ドッカー専用倉庫港湾建設プロセス
1. 準備1.1 港ダウンロードハーバーダウンロードアドレス：リンクリンクの説明を追加し、必要なバー...
Zabbix を使用して Oracle データベースを監視する方法の詳細な説明
1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...
vue-qr を使用して Vue の QR コードを生成する方法について深く理解する
目次npm ダウンロードステップ（１）輸入（２）vue-qrパラメータ例要約する「QRコード」の英語...
Vue イベントの $event パラメータ = イベント値の場合
テンプレート <el-table :data="データリスト"> &...
CentOS のファイルと権限の基本操作チュートリアル
序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...
ウェブデザインの発展と西洋建築の類似点は何でしょうか?
歴史は常に驚くほどうまく繰り返される。西洋建築とウェブデザインは、どちらも工学と芸術の組み合わせです...
Linuxのwatchコマンドの使用
1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...