シンプルなカウントダウン効果を実現するJavaScript

シンプルなカウントダウン効果を実現するJavaScript

この記事の例では、カウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実装のアイデア:

1. ページ上に日、時間、分、秒のラベル要素を作成し、スタイルを定義します。
2. jsは日、時間、分、秒の要素オブジェクトを取得し、後で値を割り当てることができるようにします - 残り時間
3. 現在の時刻と設定時刻の差を計算し、残りの日数、時間、分、秒をそれぞれ計算し、対応する要素コンテンツに割り当てる関数を定義します。
4. setInterval() 関数を使用して、時間差関数が 1 秒ごとに実行されるように設定します。
5. setInterval() 関数を呼び出す前に、まず時間差関数を呼び出す必要があることに注意してください。そうしないと、ページを更新すると、タグに書き込まれた元のコンテンツが表示され、その後、計算された時間差が表示されます。

コード例:

<!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 関数を呼び出すときは、関数名のみを記述してください。関数内にパラメータを記述しないでください。パラメータを記述すると、関数がループ内で実行されない可能性があります。
例: setInterval(countDown, 1000);
setInterval(countDown(+new Date('2021-10-1 09:00:00')), 1000); と書いてみました。
関数 countDown(setTime) {,,,}
これを記述すると、setInterval はループ実行機能の効果が失われ、カウントダウン効果を生成できなくなります。ページが更新されるたびに 1 回だけ変更されるようになります。

ページ効果:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS カウントダウン実装コード (時間、分、秒)
  • JS カウントダウン (日、時間、分、秒)
  • シンプルで使いやすいカウントダウン js コード
  • ボタンをクリックしたときに60秒のカウントダウンを実現するjsコード
  • 2つのシンプルなjsカウントダウンメソッド
  • ネイティブ JS を使用して簡単なカウントダウン機能を実装する例
  • 数秒後にカウントダウンジャンプするjsの例
  • jsはクリックして確認コードを取得するカウントダウン効果を実現します
  • 優れたjs htmlページのカウントダウンは秒単位の精度になります
  • Javascript は、製品のフラッシュセールのカウントダウンを実装します (時間はサーバー時間と同期されます)

<<:  nginxリバースプロキシを使用するときに長時間接続を維持する方法

>>:  nginxとlvsのメリットとデメリット、そして適切な使用環境

推薦する

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

Vue でシンプルな無限ループスクロールアニメーションを実装する例

この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...

MacでNodeとnpmを完全にアンインストールする方法

npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...

シェルで文字列内のスペースや指定された文字を削除する方法

インターネット上には、正しい方法であっても、使用しても正しい結果が得られない方法が数多くあります。正...

Mysql でサーバーの UUID を変更する方法

問題の原因:スレーブサーバーがクローンマスターサーバーである場合、server-uuidの値は同じで...

Vueプロジェクトのパッケージ化の詳細な説明

目次1. 関連構成ケース1(使用ツールはvue-cil)ケース2(使用するツールはwebpack) ...

JavaScript でよく使われるいくつかの文字列メソッドの概要 (初心者必読)

JavaScriptでよく使われるいくつかの文字列メソッド文字列は読み取り専用データです。よく使用...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

Vue3 のレンダリング関数における互換性のない変更の詳細な説明

目次レンダリングAPIの変更レンダリング関数のパラメータレンダリング関数のシグネチャの変更VNode...

Ubuntu LinuxにOracle Java 14をインストールする方法

最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...

W3C チュートリアル (6): W3C CSS アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...

ByteDance インタビュー: JS を使用して Ajax 同時リクエスト制御を実装する方法

序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...

960 グリッドシステムの基本原理と使用法

もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...

CentOS 7.5 に Python 3.6.6 を最初からインストールするための詳細なチュートリアル

ps: 環境はタイトル通りです依存関係をインストールする yum インストール openssl-de...

secure_file_priv nullの問題を解決する

secure_file_priv = ' ';管理者としてcmdを実行します。 my...