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 ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
推薦する
JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。
目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...
Vue スキャフォールディングでのレンダリングを理解する
Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、...
Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する方法
序文：この記事では、Ant Design Proログイン機能にグラフィック検証コードコンポーネントを...
Axios はリクエストをキャンセルし、重複リクエストを回避します
目次起源現状リクエストをキャンセル cancelTokenリクエスト方法の変更重複したリクエストを避...
すべてのホストがmysqlにアクセスできるようにする方法
1. MySQLデータベースのユーザーテーブルのレコードのHostフィールド値を%に変更します。奇妙...
よく使われるHTMLタグのインライン要素とブロックレベル要素の詳細な説明
ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...
formData 形式タイプを使用してファイルをアップロードする Vue の例
Vue では、一般的にフロントエンドとバックエンドを分離したプロジェクトがあり、データ操作を実装する...
デザイン参考 WordPressウェブサイト構築成功事例
これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...
Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明
目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...
VueはTeleportをベースにModalコンポーネントを実装します
目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...
MySQL から Excel にテーブルデータをエクスポートする際の日時形式に関する簡単な説明
最近、MySQL を使用してテーブル データを Excel ファイルにエクスポートしました。MySQ...
MySQL 5.7.18 インストーラーのインストール ダウンロード グラフィック チュートリアル
この記事では、MySQL 5.7.18インストーラーの詳細なインストールチュートリアルを参考までに記...
Vue3 の ref toRef と toRefs の違いを理解する方法
目次1. 基本1.参照2. 参照3. 参照4. 最適な使い方2. 詳細な1. なぜrefが必要なのか...
XHTML ドキュメントで JavaScript と CSS を正しく使用する方法
ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...
純粋な CSS で実装された大きなドロップダウン メニューのサンプル コード
これは純粋に CSS で実装された大きなドロップダウン メニューです。この大きなメニューは、js コ...