この記事の例では、複数のカウントダウンを同時に設定するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法
>>: mysql5.7.20 での最初のログイン失敗に対する簡単な解決策
HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...
1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...
序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...
物件の詳細な説明transition 属性の目的は、一部の CSS プロパティ (背景など) をスム...
今日は618日、主要なショッピングモールはすべてプロモーション活動を行っています。今日は、次のように...
1. Yumのインストール yum でサブバージョンをインストール 2. 構成1. 倉庫を作る/ho...
概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...
問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...
私は最近、多くの音楽に特化した Linux ディストリビューションの 1 つである Audiovis...
iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...
Vueにaxiosを挿入する 'axios' から axios をインポートします。...
目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...
1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...
MySQL が alter table などの DDL 操作を実行すると、テーブル メタデータ ロッ...
この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...