Cocos Creator制作倒计时显示的优化

使用新的方式来实现倒计时的显示


在进行倒计的时候只需要记录几个变量
1,总的倒计时时间,
2,倒计时开始的时候的时间戳
3,是否进行新的一轮倒计时的标志

实现方法

新建一个脚本管理数据脚本如下

var dataOperate = require("dataOperateFunc");

var StoreData = {
    // 数据发在内部,提供接口访问
    _totalCountdownNum: 7200,   //倒计时时间
    _isUse: false,   //免费刷新是否使用
    _timestampOfDeparture: 0,   //倒计时的时间戳

    InitData: function () {
        var tempData = dataOperate.getBlobMapByKey("store_data");
        var date = new Date();
        console.log("#### store data", tempData);
        if (!!tempData) {;
            this._isUse = tempData.is_use;
            this._timestampOfDeparture = tempData.timestamp_of_departure;
            
            if (date.getDate() != tempData.last_date) {
                this._refreshNum = 1;
            } else {
                this._refreshNum = tempData.refresh_num;
            }
        } else {
            this._timestampOfDeparture = date.getTime();
            // console.log("!!! not have guide info use default", this.isGuide, this.stageName, this.stageStep);    
        }
    },

    SetData: function () {
        var date = new Date();
        var currentDate = date.getDate();

        var tempData = {
            last_date: currentDate,
            refresh_num: this._refreshNum,
            timestamp_of_departure: this._timestampOfDeparture,
            is_use: this._isUse,
            buy_num: this._buyNum,
        }

        dataOperate.updateBlobMapKeyValue({
            store_data: tempData
        });
    },

    GetCountdownInfo: function () {
        let data = {
            isUse: this._isUse,
            timestamp: this._timestampOfDeparture,
            totalCountdownTime: this._totalCountdownNum,
        }
        return data;
    },

    /**
     * 设置倒计时的相关信息
     * @param {boolean} useState 免费刷新的使用状态
     * @param {number} timestamp 使用时的时间戳
     */
    SetCountdownInfo: function (useState, timestamp) {
        this._isUse = useState;
        if (!!timestamp) {
            this._timestampOfDeparture = timestamp;
        }
        this.SetData();
    },
    
}

module.exports = StoreData;

在建立一个脚本进行倒计时的显示代码如下

var storeData = require("StoreData"); //引入倒计时的数据

cc.Class({
    extends: cc.Component,
        infoLabel: cc.Label,
    },

    onLoad() {
        this._countdownSecond = 0;	//   **用于在当前界面的倒计时计算**  
        this.intervalTime = 1;	//  **用于每秒进行一下计算**    
     
    },

    onEnable() {
        this.InitCountdown();
    },

    start() {},

    update(dt) {
        if (this.intervalTime >= 0) {
            this.intervalTime -= dt;
        } else {
            this.intervalTime = 1;
            if (this._countdownSecond >= -1) {
                this.UpdateCountdown();
            }
        }
    },

    InitCountdown: function () {
        var countdownInfo = storeData.GetCountdownInfo();
        // console.log("#### 商店倒计时信息", countdownInfo);
        var date = new Date();
        if (countdownInfo.isUse) {
            this._countdownSecond = countdownInfo.totalCountdownTime - Math.floor((date.getTime() - countdownInfo.timestamp) / 1000);
            //  **当前剩余的倒计时数用倒计总时间减去已经过去的时间**  
        } else {
            this._countdownSecond = 0;
        }

        this.UpdateCountdown();
    },

    UpdateCountdown: function () {
        var baseSecond = this._countdownSecond;
        var countdownInfo = storeData.GetCountdownInfo();
        if (baseSecond >= 1) {
            baseSecond -= 1;
            this._countdownSecond -= 1;
            var hour = Math.floor(baseSecond / 3600);
            var residue = baseSecond - hour * 3600;
            var minute = Math.floor(residue / 60);
            residue = Math.floor(residue - minute * 60);
            if (hour < 10) {
                hour = "0" + hour;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (residue < 10) {
                residue = "0" + residue;
            }
            // this.infoLabel.getComponent(cc.Label).string = hour + " : " + minute + " : " + residue + " 后免费" + this.PriceCalculation();
        } else {
            if (countdownInfo.isUse) {
                let date = new Date();
                storeData.SetCountdownInfo(false, date.getTime());
                // this.infoLabel.getComponent(cc.Label).string = "" + this.PriceCalculation();
            }
        }
    },

这个优化主要是减少了一些用于控制的变量,使得在初始化倒计时变得简单,同时也不用在每次关闭窗口时就要记录一下时间戳了。这段代码是项目中摘取出来的,有些地方可能的无关变量可能没有清理干净,望见谅。 同时希望有更好的方式,能够学习,望指教,谢谢!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值