vue 設計一個倒計時秒殺的組件

来源:https://www.cnblogs.com/manIteresting/archive/2019/04/05/10659660.html
-Advertisement-
Play Games

簡介: 倒計時秒殺組件在電商網站中層出不窮 不過思路萬變不離其蹤,我自己根據其他資料設計了一個vue版的 核心思路:1、時間不能是本地客戶端的時間 必須是伺服器的時間這裡用一個settimeout代替 以為時間必須統一 2、開始時間,結束時間通過父組件傳入,當伺服器時間在這個開始時間和結束時間的範圍 ...


簡介:

倒計時秒殺組件在電商網站中層出不窮  不過思路萬變不離其蹤,我自己根據其他資料設計了一個vue版的

核心思路:1、時間不能是本地客戶端的時間  必須是伺服器的時間這裡用一個settimeout代替 以為時間必須統一  

                 2、開始時間,結束時間通過父組件傳入,當伺服器時間在這個開始時間和結束時間的範圍內  參加活動按鈕可以點擊,並且參加過活動以後不能再參加,

     3、在組件創建的時候 同步得到現在時間服務時間差,並且在這裡邊設置定時器,每秒都做判斷看秒殺是否開始和結束,

     4、在更新時間的函數中是否開始和結束,

     5、在computed鉤子中監聽disable 確定按鈕是否可點擊

     6、參加過活動在updated中停止定時器的計時,頁面銷毀的時候也停止計時

    下邊是代碼

    子組件  

<template>
    <div>
        <button @click="handleClick" :disabled="disabled">
            {{btnText}}
        </button>
        <span>{{tip}}</span>
    </div>
</template>

<script>

    import moment from 'moment'

    export default {
        name: "Spike",
        props: {
            startTime: {
                required: true,
                validator: (val) => {
                    return moment.isMoment(val)
                }
            },
            endTime: {
                required: true,
                validator: (val) => {
                    return moment.isMoment(val)
                }
            }
        },
        data() {
            return {
                start: false,
                end: false,
                done: false,
                tip: '',
                timeGap: 0,
                btnText:""
            }
        },
            computed: {
            disabled() {
                //當三個異號的時候disable返回真,不可點擊,
                // 初始化通過this.updateState確定disable的狀態
                return !(this.start && !this.end && !this.done);
            }
        },
        async created() {
            const serverTime=await this.getServerTime();
            this.timeGap=Date.now()-serverTime;//當前時間和伺服器時間差
            this.updateState();
            this.timeInterval=setInterval(()=>{
                this.updateState()
            },1000)
        },
        updated(){
            if(this.end||this.done){
                clearInterval(this.timeInterval)
            }
        },
        methods: {
            handleClick() {
                alert("提交成功");
                this.done=true;
                this.btnText="已參加過活動"
            },
            getServerTime() {
                //模擬伺服器時間
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        //當前時間慢10秒就是伺服器時間
                        resolve(new Date(Date.now() -10 * 1000).getTime())//跟本地時間差
                    }, 0)
                })
            },
            updateState() {
                const now = moment(new Date(Date.now() - this.timeGap));//當前伺服器時間
                const diffStart=this.startTime.diff(now);//開始時間和伺服器時間之差
                const diffEnd=this.endTime.diff(now);//結束時間和伺服器時間之差
                if(diffStart<0){
                    this.start=true;
                    this.tip="秒殺已開始";
                    this.btnText="參加"
                }else{
                    this.tip=`距離秒殺開始還剩${Math.ceil(diffStart/1000)}秒`;
                    this.btnText="活動未開始";
                }
                if(diffEnd<=0){
                    this.end=true;
                    if( !this.btnText==="已參加過活動"||this.btnText==="參加"){
                        this.tip="秒殺已結束";
                        this.btnText="活動已結束";
                    }
                }
            }
        },
        beforeDestroy() {
            clearInterval(this.timeInterval)
        }
    }
</script>

<style scoped>
    button[disabled]{
        cursor: not-allowed;
    }
</style>

父組件

<template>
    <div>
        <h1 style="color: red">設計一個秒殺倒計時的組件</h1>
        <Spike :startTime="startTime" :endTime="endTime"></Spike>
    </div>
</template>

<script>
    import Spike from './Spike'
    import moment from 'moment'
    export default {
        name: "index",
        components:{
            Spike
        },
        data(){
            return{
                endTime:moment(new Date(Date.now()+10*1000)),
                startTime:moment(new Date(Date.now()))
            }
        }
    }
</script>

<style scoped>

</style>

用到moment的這個關於時間操作的庫


 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Laravel 提供了很多 輔助函數,有時候我們也需要創建自己的輔助函數。 這裡介紹了 tinker,一個laravel內置的php互動式控制台,方便調試php代碼 php artisan tinker 我們把所有的『自定義輔助函數』存放於 bootstrap/helpers.php 文件中 首先 ...
  • 背景 現有一個交易系統,每次交易都會更新餘額。出賬扣減餘額,入賬增加餘額。為了保證資金安全,餘額發生扣減時,需要比較現有餘額與扣減金額大小,若扣減金額大於現有餘額,扣減餘額不足,扣減失敗。 餘額表( 省去其他欄位 )結構如下: sql CREATE TABLE ( bigint(20) NOT NU ...
  • 1、編輯一個mysql啟動文件。 在終端裡面輸入: 2、輸入啟動文件內容: 上面xml中的 /usr/local/Cellar/mysql/5.7.20/bin/mysqld_safe 為我的mysql所在目錄。 這個是通過homebrew下載的mysql。 官方下載的路徑為 /usr/local/ ...
  • mongodb對集合文檔的操作,添加文檔、查看文檔、刪除文檔、更新文檔及常用的局部更新運算符 ...
  • 最近想安裝一個本地資料庫, 發現網上寫的沒一個能安裝成功的, 各種蛋疼, 我還是自己寫一個吧 參考鏈接: https://www.cnblogs.com/by330326/p/5608290.html https://blog.csdn.net/baidu_41909653/article/deta ...
  • 本文主要講解Andriod開發中Sqlite的簡單應用(增刪改查),僅供學習分享使用 ...
  • 一、CSS3選擇器 CSS3是CSS的第三代版本,新增了很多功能,例如:強大的選擇器、盒模型、圓角、漸變、動畫、2D/3D轉換、文字特效等。 CSS3和HTML5沒有任何關係!HTML5骨架中,可以用CSS2.1也可以用CSS3。XHTML骨架中可以用CSS3的樣式。 在學習CSS之前都是學習選擇器 ...
  • 4 流程式控制制 4.1 順序結構 順序結構是程式中最簡單、最基本的流程式控制制,他沒有特定的語法結構,程式會按照代碼的先後順序執行,程式中大多數的代碼都是這樣執行的; 4.2 分支結構 if 分支結構 註意:if 適用於範圍判斷; 執行程式是按照從上到下依次執行; 單分支 if ( 條件表達式 ) { / ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...