この記事の例では、複数のカウントダウンを同時に設定するための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 での最初のログイン失敗に対する簡単な解決策
要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...
MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...
<br />改行タグの使用<br>改行タグ<br>は終わりのない...
序文今日は、デザインパターンのクリエーションパターンを見直していたところ、JS でシングルトンパター...
この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...
システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...
PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...
目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...
テーブルを美しくするために、テーブルにさまざまな境界線の色を設定できます。基本的な構文<テーブ...
最近友人からDockerを触ったことがあるかと聞かれました。あまり自信がなかったので答えられませんで...
目次序文脱構築記号の役割使い方分割割り当ての適用アプリケーションの簡単な紹介JSONデータを抽出する...
目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....
マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...
著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...
1. トランザクションはACID特性を持つ原子性: トランザクションは、トランザクションによって分割...