js 定时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<span id="time1"></span>
<br>
<button id="aStop">第一个停</button><button id="aBegain">第一个开</button>
<br>
<br>
<br>
<div id="time2"></div><button id="bStop">第二个停</button><button id="bBegain">第二个开</button>
</body>
<script type="text/javascript">
function Time(option){
    this.father = document.getElementById(option.father);
    this.allTime = option.allTime || 0;
    this.hours = option.hours || 0;
    this.strH =  option.strH || "";
    this.mins = option.mins || 0;
    this.strM =  option.strM || "";
    this.seconds = option.seconds || 0;
    this.strS =  option.strS || "";
    this.htmlV = null;
    this.t = null;
    this.timeStr = null;
    this.init();
}
Time.prototype = {
    init:function(){
        this.mune();
        this.setI();
    },
    mune:function(){
        if(this.allTime != 0){
            this.hours = Math.floor(this.allTime / (60*60));
            this.mins = Math.floor(this.allTime / 60);
            this.seconds = this.allTime % 60;
        }
    },
    setI:function(){
        var self = this;
        this.t = setInterval(function(){
            self.father.innerHTML = self.hours +self.strH + self.mins+self.strM + self.seconds +self.strS;
            self.allTime = self.hours*60*60 + self.mins *60 +self.seconds;
            if(self.allTime == 0){
                clearInterval(self.t);
                self.father.innerHTML = "时间已经过期"
                return;
            }
            --self.seconds;
            if(self.seconds < 0){
                self.seconds = 59;
                --self.mins;
                if(self.mins < 0){
                    self.mins = 59;
                    --self.hours
                    if(self.hours == 0){
                        self.hours = 0;
                    }
                }
            }
            if(self.allTime == 0){
                clearInterval(self.t);
                self.father.innerHTML = "计时结束";
            }

        },1000)
    }
}
window.onload = function(){
    var a = null; //全局变量
    a = new Time({
        father:"time1",
        allTime:153,
    })
    var time = null; //保存当前停止的时间\
    var stop = false;

    document.getElementById("aStop").onclick = function(){
        clearInterval(a.t);
        stop = true;
        console.log(a.allTime) //停止时,所剩的总秒数
        time = a.allTime;
    }
    document.getElementById("aBegain").onclick = function(){
        console.log(stop)
        if(!stop){   //判断当前倒计时是否停止,如果没停止则不执行
            return;
        }
        if(a.allTime <= 0){
            return;
        }
        a = new Time({   //重新给启动定时器
            father:"time1",
            allTime:time,
        })
        stop = false;
    }
    /*------------a----f分割线-----b---------------*/

    var b = null;
    b = new Time({
        father:"time2",
        hours:1,       //尽量传总秒数
        mins:0,
        seconds:2,
    })
    var bTime = null;
    var Bstop = false;
    document.getElementById("bStop").onclick = function(){
        clearInterval(b.t)
        Bstop = true;
        bTime = b.allTime;
    }
    document.getElementById("bBegain").onclick = function(){
        if(!Bstop){
            return;
        }
        if(a.allTime <= 0){
            return;
        }
        b = new Time({   //重新给启动定时器
            father:"time2",
            allTime:bTime,
        })
        Bstop = false;
    }
}
</script>
</html>

 

转载于:https://www.cnblogs.com/chengjunL/p/6086682.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值