この記事の例では、カウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 実装のアイデア: 1. ページ上に日、時間、分、秒のラベル要素を作成し、スタイルを定義します。 コード例:<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>カウントダウン効果</title> <スタイル> div { マージン: 200px; } スパン { 表示: ブロック; フロート: 左; 幅: 50px; 高さ: 50px; 行の高さ: 50px; テキスト配置: 中央; マージン: 5px; 色: #fff; 背景色: rgba(0, 0, 0, .8); } </スタイル> </head> <本文> <div class="time"> <span class="day">0</span> <span>日</span> <span class="hour">1</span> <span>時間</span> <span class="minute">2</span> <span> ポイント</span> <span class="second">3</span> <span>秒</span> </div> <スクリプト> var day = document.querySelector('.day'); var hour = document.querySelector('.hour'); var 分 = document.querySelector('.minute'); var second = document.querySelector('.second'); var setTime = +new Date('2021-10-1 09:00:00'); カウントダウン(); setInterval(countDown, 1000); コンソールにログ出力します。 関数 countDown() { var now = +新しいDate(); var times = (setTime - 現在) / 1000; var d = parseInt(times / 60 / 60 / 24); //日 d = d < 10 ? '0' + d : d; day.innerHTML = d; // 残りの日数を日ボックスに入力します 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; minute.innerHTML = m; //残りをポイントボックスに分割します var s = parseInt(times % 60); //秒 s = s < 10 ? '0' + s : s; second.innerHTML = s; // 残りの秒数を秒ボックスに入力します} </スクリプト> </本文> </html> 注意: setInterval 関数を呼び出すときは、関数名のみを記述してください。関数内にパラメータを記述しないでください。パラメータを記述すると、関数がループ内で実行されない可能性があります。 ページ効果:以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: nginxリバースプロキシを使用するときに長時間接続を維持する方法
>>: nginxとlvsのメリットとデメリット、そして適切な使用環境
1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...
この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...
npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...
インターネット上には、正しい方法であっても、使用しても正しい結果が得られない方法が数多くあります。正...
問題の原因:スレーブサーバーがクローンマスターサーバーである場合、server-uuidの値は同じで...
目次1. 関連構成ケース1(使用ツールはvue-cil)ケース2(使用するツールはwebpack) ...
JavaScriptでよく使われるいくつかの文字列メソッド文字列は読み取り専用データです。よく使用...
1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...
目次レンダリングAPIの変更レンダリング関数のパラメータレンダリング関数のシグネチャの変更VNode...
最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...
序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...
もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...
ps: 環境はタイトル通りです依存関係をインストールする yum インストール openssl-de...
secure_file_priv = ' ';管理者としてcmdを実行します。 my...