シンプルなカウントダウン効果を実現する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のメリットとデメリット、そして適切な使用環境

推薦する

MySQL クエリの重複データ (重複データを削除し、ID が最も小さいデータのみを保持します)

開発の背景:最近、私はバッチ データを MySQL データベースにインポートする機能に取り組んでいま...

CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...

MySQLのスローログの開き方と保存形式の詳細な分析

開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

MySQL バッチ挿入ループの詳細なサンプルコード

背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...

Alibaba Cloud に MySQL データベースをインストールするときに発生する 2002 エラーを解決する方法

データベースのインストール中に次のエラーが発生しました: 解決策は次のとおりです。 1. binディ...

Bash の山括弧の深い理解 (初心者向け)

序文Bash には、ls、cd、mv などの重要な組み込みコマンドが多数あるほか、grep、awk、...

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...

NavicatがLinuxサーバー上のMySQLに接続できない問題を解決する

最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...

跳ねるボールを実現するネイティブjs

思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...

ウェブサイトを黒、白、グレーにする4つのコードの詳細な説明

2008年5月12日に四川省汶川市で発生した地震により、多くの命が失われ、遺憾なことと存じます。国務...

Linux でファイルのユーザーとグループを変更する方法

Linux では、ファイルが作成されると、そのファイルの所有者はファイルを作成したユーザーになります...

React Native スキャフォールディングの基本的な使い方の詳細な説明

プロジェクトを構築する対応するパスでコマンドラインを実行します: react-native init...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

Linux システムが VMware にインストールされているかどうかを確認する方法

現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...