Vueは秒殺しのカウントダウンコンポーネントを実装する

Vueは秒殺しのカウントダウンコンポーネントを実装する

この記事では、2番目のキルカウントダウンコンポーネントを実装するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

以下は、Vueを使用した2回目のキルのカウントダウンコンポーネントです。

開発アイデア

1. サーバーに現時点でのサーバー時刻を取得するように要求します(サーバー時刻に基づく)
2. ユーザーの現在のコンピューターの時刻を取得し、それをサーバーの時刻と比較して時間差を取得します。最終時間は、現在のコンピュータの時刻から時間差(現在のサーバー時刻として定義)を引いた値です。
3. フラッシュセールの開始時間を設定する
4. フラッシュセールの時間と現在のサーバー時間を比較して時間差を取得します(合計X秒)
5. X 秒に基づいて、フラッシュ セールが開始されるまでの日数、時間数、分数、秒数を計算します。

コードの実装

次のコードは手順 4 と 5 のみを示しています。

コンポーネント CountDown.vue

<テンプレート>
  <div>
      <input type="datetime-local" :min="currentTime" placeholder="フラッシュセールの開始時刻を入力してください" v-model="startTime">
      <button @click="submit">計測を開始</button>
  </div>
  <div>
      <h1>{{ カウントダウンタイム }}</h1>
  </div>
</テンプレート>

<スクリプト>
タイマーを null にします。
let tipTextPrefix = 'フラッシュセール開始までの残り時間: ';
「moment」から moment をインポートします。
エクスポートデフォルト{
    名前: 'カウントダウン',
    データ() { 戻り値 {
        currentTime: moment().format('YYYY-MM-DDTHH:mm'), // 手順 1 ~ 3 で計算したサーバー時間を使用してください startTime: moment().format('YYYY-MM-DDTHH:mm'),
        countDownTime: tipTextPrefix + '0日0時間0分0秒'
    }},
    メソッド: {
        送信: 関数() {
            _this は定数です。
            タイマーの間隔をクリアします。
            タイマー = setInterval(() => {
                _this.countDownTime = _this.countDown();
            }, 1000);
        },
        カウントダウン: 関数() {
            コンソールにログ出力します。
            const seconds = moment(this.startTime).diff(新しい日付、'seconds');
            秒数 <= 0 の場合
                タイマーの間隔をクリアします。
                「第2弾セールが始まりました」を返します。
            }
            const 秒 = 秒%60;
            const minutes = (秒-秒) / 60;
            定数分 = 分%60;
            const hours = (分-分) / 60;
            定数時間 = 時間%24;
            const day = (時間-時間) / 24;
            const res = tipTextPrefix + day + '日' + hour + '時' + minute + '分' + second + '秒';
            res を返します。
        }
    },
}
</スクリプト>

<スタイル>

</スタイル>

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

以下もご興味があるかもしれません:
  • ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する
  • Vue プロジェクトを開始するときに発生するエラー「GET /service を取得できません」の解決方法
  • Vue プロジェクトの起動ポート番号を変更する方法
  • webpack が vue プロジェクトをパッケージ化した後に生成された dist ファイルの実行を開始する方法の詳細な説明
  • Vueプロジェクトを開始するためのVSCode設定の詳細な説明
  • webpack+vue+express(hot) のホットスタートデバッグのためのシンプルな設定方法
  • vue-cli がローカルサービス LAN にアクセスできない理由の分析
  • vue express 開始データサービスの詳細な説明
  • Vueは商品詳細ページの商品タブ機能を実装します
  • Vue2.0/3.0双方向データバインディングの実装原理の詳細説明
  • Vue.js プロジェクトの開始方法

<<:  MySQLデータベースにパスワードを入力した後にフラッシュバックする問題の解決策

>>:  ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明

推薦する

MySQLデータベースは何をするのか

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

情報製品の読書リストのインタラクティブなデザインに関する考えと経験の共有

リストは、テーブルをコンテナーとして使用するテキストまたはグラフの形式として定義されます。商品の種類...

iconfontアイコンライブラリをvueに導入するエレガントな実践記録

目次序文SVGを生成するSVGスプライトの紹介プロジェクトアイコンを取得するプロジェクトのセットアッ...

MySQL で乱数を生成し、文字列を連結する方法の例

この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...

jsは、州、市、地区の3レベルのリンクの非選択ドロップダウンボックスバージョンを実現します。

インターネットで3レベルリンクを検索したところ、すべてオプションで書かれていました。突然、別の方法で...

Linux ファイル/ディレクトリの権限と所有権の管理

1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...

Linux 環境変数とプロセス アドレス空間の概要

目次Linux 環境変数とプロセスアドレス空間コードを通じて環境変数を取得するプロセスアドレス空間な...

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...

Rancher で Kubernetes 用の標準化された VMware イメージを構築する方法

Kubernetes を学習するときは、Kubernetes 環境で練習する必要があります。ただし、...

CSS初心者向けチュートリアル: 背景画像を画面全体に表示する

インターフェース全体に背景画像を表示したい場合は、当然 body に背景を追加することを考えます。コ...

ウェブページでmp3またはフラッシュプレーヤーコードを再生する

コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...

Docker Compose を使用して Confluence を構築するチュートリアル

この記事は「Attribution 4.0 International (CC BY 4.0)」ライ...

LinuxでTomcatのポート番号を変更する方法

ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...

Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...

CSSページ下部固定を実現する8つの方法の詳細な説明

ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況...