Vueは複数のカウントダウンを同時に設定する機能を実装しています

Vueは複数のカウントダウンを同時に設定する機能を実装しています

この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

HTML は次のとおりです。

<div class="home">
    <t本文>
      <tr v-for="(item, index) in バーゲングッズ" :key="index">
        <td v-text="item.down + Djs_timeList(item.countDown)"></td>
      </tr>
    </tbody>
</div>

js は次のとおりです。

エクスポートデフォルト{
  データ() {
    戻る {
      お買い得商品: [],
      合計: 0,
      ページ: 1,
      サーバー時間: 0,
      タイマー: ""
      // ホストUrl: this.$hostUrl
    };
  },
  //データの初期化に使用 created: function() {
    // データを取得する this.goods();
    // サーバー時間を取得します this.findServiceTime();
  },
  メソッド: {
    商品: 関数() {
      var _this = これ;
      _this.$axios({
        url: "goods/pageGoods",
        データ: {
          現在: -1,
          アクティビティステータス: "",
          制限: -1、
          ステータス: 「セール」
        },
        成功: 応答 => {
          _this.bargainGoods = レスポンス.items;
          _this.Djs_time();//タイマーを呼び出す//以下は、ページ表示に使用される、私が返したバックグラウンドデータの開始時間と終了時間です。if (_this.bargainGoods.length != 0) {
            (var key in _this.bargainGoods) {
              var 時間 = 0;
              var 開始時刻 = 0;
              _this.bargainGoods[キー] != null の場合 {
                _this.bargainGoods[キー].countDown = "";
                _this.bargainGoods[キー].down = "";

                // 終了時間 hour = _this.bargainGoods[key].overTime;
                開始時刻 = _this.bargainGoods[キー].activityStartTime;
                hour = hour.replace(/-/g, "/");
                hour = 新しい Date(hour).getTime();
                startime = startime.replace(/-/g, "/");
                スタータイム = 新しい日付(スタータイム).getTime();
                // 終了時刻が現在の時刻より大きい場合 if (hour > _this.serverTime && startime < _this.serverTime) {
                  var hourtime = hour - _this.serverTime;
                  if (時間 > 0) {
                    _this.bargainGoods[key].down = "カウントダウン終了:";
                    _this.bargainGoods[キー].countDown =
                      _this.bargainGoods[キー].overTime;
                  }
                } そうでない場合 (starttime > _this.serverTime) {
                  var starhourtime = startime - _this.serverTime;
                  スターアワータイム > 0 の場合
                    _this.bargainGoods[key].down = "カウントダウンを開始:";
                    _this.bargainGoods[キー].countDown =
                      _this.bargainGoods[キー].activityStartTime;
                  }
                } それ以外 {
                  _this.bargainGoods[key].down = "終了しました";
                  _this.bargainGoods[キー].countDown = "";
                }
                // console.log(_this.bargainGoods);
              }
            }
            _this.bargainGoods = _this.bargainGoods;
          }
        }
      });
    },
    // サーバー時間を取得する findServiceTime() {
      var _this = これ;
      _this.$axios({
        url: "serverTime/getDateTime",
        成功: function(res) {
          _this.serverTime = res.item;
        }
      });
    },

    Djs_time: 関数() {
      this.timer = setInterval(() => {
        this.serverTime = this.serverTime + 1000;
      }, 1000);
    },

    Djs_timeList: 関数(itemEnd) {
      // ここでの itemEnd の日付は年、月、日、時、分、秒です。 var endItem = new Date(itemEnd).getTime(); // リストに渡された期限を取得し、タイムスタンプに変換します。 var nowItem = this.serverTime; // 現在の時刻を取得します。 var rightTime = endItem - nowItem; // 期限から現在の時刻を引いた値 if (rightTime > 0) {
        // 残りのカウントダウン時間を判断します。0 より大きい場合はカウントダウンを実行し、そうでない場合は終了します。var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        var showTime = dd + "日" + hh + "時間" + mm + "分" + ss + "秒";
      } それ以外 {
        var showTime = "";
      }
      showTime を返します。
    },

  },
    //ページを離れた後にタイマーをクリアするdestroyed() {
    タイマー間隔をクリアします。
  }
};

効果は以下のとおりです。

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

以下もご興味があるかもしれません:
  • Vueはシンプルなカウントダウンボタン関数を記述します
  • Vue検証コードの60秒カウントダウン機能の簡単な実装
  • Vue2.0 カウントダウン プラグイン (タイムスタンプの更新ジャンプは影響を受けません)
  • Vue ベースの SMS 検証コード カウントダウン デモ
  • Vueは検証コードボタンのカウントダウン機能を実装します
  • Vue での複数のカウントダウン実装コード例
  • Vueはショッピングモールのフラッシュセールのカウントダウン機能を実装します
  • Vue は検証コードの効果を得るためにカウントダウンを実装します
  • Vue でのカウントダウン コンポーネントの設計の詳細な説明
  • Vue+canvas は、クールな時計効果を備えたカウントダウン プラグインを実現します (npm に公開されており、すぐに使用できる vue2 プラグイン)

<<:  docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法

>>:  mysql5.7.20 での最初のログイン失敗に対する簡単な解決策

推薦する

$remote_addr に基づく nginx フロントエンド配布方法の詳細な説明

要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

例を通してBRタグとPタグの違いを理解する

<br />改行タグの使用<br>改行タグ<br>は終わりのない...

JS でシングルトン モードを実装するための 6 つのソリューションの概要

序文今日は、デザインパターンのクリエーションパターンを見直していたところ、JS でシングルトンパター...

MySQL インデックスの原理と使用例の分析

この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

Ubuntu 16.04 で PostgreSQL の起動を設定する方法

PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...

uniapp WeChatミニプログラムのグローバル共有を実装するためのサンプルコード

目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...

HTML テーブル マークアップ チュートリアル (4): 境界線の色属性 BORDERCOLOR

テーブルを美しくするために、テーブルにさまざまな境界線の色を設定できます。基本的な構文<テーブ...

SpringBoot のパッケージ化と Docker へのアップロード、およびマルチインスタンス デプロイメントの実装に関する簡単な分析 (IDEA バージョン)

最近友人からDockerを触ったことがあるかと聞かれました。あまり自信がなかったので答えられませんで...

JavaScript ES6 分割演算子の理解と応用

目次序文脱構築記号の役割使い方分割割り当ての適用アプリケーションの簡単な紹介JSONデータを抽出する...

DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作

目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....

WindowsでMysql5.7.17のインストールと起動に失敗する問題を解決する

マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...

重要なmysqlログファイルの概要

著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...

MySQLトランザクションとSpring分離レベルの実装原理の詳細な説明

1. トランザクションはACID特性を持つ原子性: トランザクションは、トランザクションによって分割...