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 での最初のログイン失敗に対する簡単な解決策

推薦する

画像とテキストでHTTPヘッダーのあらゆる側面を理解する

HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...

DockerにRabbitMQを素早くインストールする方法

1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...

Centos ベースイメージの作成方法

序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...

CSS3はトランジション効果を実現するためにtransitionプロパティを使用する。

物件の詳細な説明transition 属性の目的は、一部の CSS プロパティ (背景など) をスム...

CSS を使用して 3 つのステップでショッピング モールのカード クーポンを作成する

今日は618日、主要なショッピングモールはすべてプロモーション活動を行っています。今日は、次のように...

Linux で SVN サーバーをインストールする方法

1. Yumのインストール yum でサブバージョンをインストール 2. 構成1. 倉庫を作る/ho...

Vueダイナミックフォームの詳細な応用

概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...

mysql エラー 1045 (28000) - ユーザーへのアクセスが拒否される問題を解決する方法

問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...

オーディオマニアにアピールするオーディオビジュアルLinuxディストリビューション

私は最近、多くの音楽に特化した Linux ディストリビューションの 1 つである Audiovis...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...

Vueでaxiosを簡単にカプセル化する方法

Vueにaxiosを挿入する 'axios' から axios をインポートします。...

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...

MySQL でテーブル メタデータ ロックを待機する理由と方法

MySQL が alter table などの DDL 操作を実行すると、テーブル メタデータ ロッ...

スキン効果を実現するJavaScript(背景の変更)

この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...