Cocos Creator 中制作一个倒计时显示

今天做了一个倒计时，感觉自己做的不好，分享一下，希望能抛砖引玉，也希望能对需要的人有帮助。

我先自定义一个label来进行显示倒计时的信息。然后定义了一个module,来存储场景的时间戳，和剩余的时间

 

var EnergyManager = {

hideTime: 0, //关闭ufo界面的时间戳

baseCycle: 4, //激活倒计时的基础时间

manyTims: 50, //第几次激活

reduiseTime: 0, //倒计时剩余的时间

}

module.exports = EnergyManager;

然后在定义好的label中绑定如下脚本

import energyManager from "EnergyManager";

 

cc.Class({

extends: cc.Component,

//显示倒计时的信息

countDownLabel: {

default: null,

type: cc.Label

},

 

intervalTime: {

default: 1,

visible: false

},

 

},

 

// LIFE-CYCLE CALLBACKS:

 

onLoad () {

cc.log("关闭时时间戳", energyManager.hideTime);

this.inintCountDownShow();

},

 

start () {

 

},

 

update (dt) {

//每秒更新显示信息

if (this.intervalTime >= 0 ) {

this.intervalTime -= dt;

}else {

this.intervalTime = 1;

this.countDownShow();

}

 

},

//初始化倒计时界面

inintCountDownShow: function () {

var backTime = energyManager.hideTime;

if (backTime != 0) {

var date = new Date();

var currentTime = date.getTime();

var intervalSecond = Math.floor((currentTime - backTime) / 1000);

energyManager.reduiseTime = energyManager.reduiseTime - intervalSecond;

}else {

var cycleTime = energyManager.manyTims;

energyManager.reduiseTime = energyManager.baseCycle * cycleTime * 3600;

}

},

 

/**

* 倒计时信息显示

*/

countDownShow: function () {

var baseSecond = energyManager.reduiseTime;

baseSecond = baseSecond - 1;

energyManager.reduiseTime = baseSecond;

 

var hour = Math.floor(baseSecond / 3600);

var residue = baseSecond - hour * 3600;

var minute = Math.floor(residue / 60);

// residue = Math.floor(residue - minute * 60);

residue = residue - minute * 60;

 

if (hour < 10) {

hour = "0" + hour;

}

if (minute < 10) {

minute = "0" + minute;

}

if (residue < 10) {

residue = "0" + residue;

}

this.countDownLabel.getComponent(cc.Label).string = hour + " : " + minute + " : " + residue;

},

});

这样的话当你把这个场景关闭后，再次打开还是会接着进行倒计时的计算。

当然你要在关闭上挂载一个事件来设置关闭场景的事件戳。

重新做了一点优化请看我的另一篇记录https://blog.csdn.net/liuzhimu2018/article/details/85990467