js 简单时间倒计时实现

版权声明:本文为博主原创文章,请尊重劳动成果,转载注明一下出处。 https://blog.csdn.net/zq1994520/article/details/75042090

1. 时间倒计时方法

/**
 * <p>@Description 时间倒计时</p>
 * <p>@FunName </p>
 * <p>@Author zengqiang</p>
 * <p>@Create 2017/7/11</p>
 * <p>@Param param{maxcount, callbacksucc, callbackerror}  之所以这样做用OBJ是因为方法是值传递,我们这个需要引用传递</p>
 * <p>@Return </p>
 */

util.timecountdown = function (param) {
    var time = setInterval(function () {
        param.maxcount-=1;
        if (param.maxcount <= 0) {
            if (param.callbackerror != "" && param.callbackerror != undefined) {
                param.callbackerror();
            }
            clearInterval(time);
        } else {
            if (param.callbacksucc != "" && param.callbacksucc != undefined) {
                param.callbacksucc();
            }
        }
    }, 1000);
};

2. 秒转date

/**
 * <p>@Description 将秒转换成时间</p>
 * <p>@FunName </p>
 * <p>@Author zengqiang</p>
 * <p>@Create 2017/7/11</p>
 * <p>@Param form D表示最高是day,H表示最高是hour,M表示最高是minute</p>
 * <p>@Return </p>
 */
Date.toDate = function (second, form) {
    var day = 0, hour = 0, minute = 0, second1 = 0;
    if (form == "" || form == undefined || form == "D") {
        day = Math.floor(second / 86400);
        second %= 86400;
        hour = Math.floor(second / 3600);
        second %= 3600;
        minute = Math.floor(second / 60);
        second1 = second % 60;
    } else {
        switch (form) {
            case "H":
                hour = Math.floor(second / 3600);
                second %= 3600;
                minute = Math.floor(second / 60);
                second1 = second % 60;
                break;
            case "M":
                minute = Math.floor(second / 60);
                second1 = second % 60;

        }
    }
    return {day: day, hour: hour, minute: minute, second: second1};
}

3. 使用例子

1.秒钟倒计时参数(只能构建一个对象,js原型对象都是值传递,没有办法,使用也没有什么,就把你的参数放进去就是了,调用多个.)

timecountdown:{"maxcount":9000}

2’页面加载完,用代码手动调用该方法。

timecountdownfunc:function () {
            util.timecountdown(this.timecountdown);
        }

3.我使用vue的框架,使用计算属性。1中的参数对象发生改变,该方法触发一次。

computed : {
        timecountdownMSG : function () {
            var date = Date.toDate(this.timecountdown.maxcount,"D");
            return   date.day+"天"+date.hour+":"+date.minute+":"+date.second;
        }
    }

4.最后页面调用上面2的vue时间递减方法

vue.timecountdownfunc();

猜你喜欢

转载自blog.csdn.net/zq1994520/article/details/75042090