js 倒计时

html:

<span id="hour"></span>:<span id ='min'></span>:<span id='sec'></span>

js:

class CounterDown{
    constructor(year,month,day,hour,min,sec){
//      Date()获取当前时间  getFullYeat()和Date()配合使用,获取当前年(四位数)
        this.year = year || new Date().getFullYear();
//      Date()获取当前时间  getMonth()和Date()配合使用,获取当前月
        this.month = month || new Date().getMonth()+1;
        this.day = day || 1;
        this.hour = hour || 0;
        this.min = min || 0;
        this.sec = sec || 0;
//      Date()获取当前时间, new Date()根据传入的时间格式设置一个新的时间,参数为空时,默认为当前时间,注意月份是0~11月
        this.createTime = new Date(this.year,this.month-1,this.day,this.hour,this.min,this.sec)
//      将设置的时间转换为时间戳
        this.timestamp = this.createTime.getTime()
        console.log('cc',this.timestamp,this.createTime)
    }
    get(){
//      获取当前时间
        var cTime = new Date()
//      当前时间戳
        var cStamp = cTime.getTime()
//      console.log(cStamp,this.timestamp)
//      设置的时间戳-当前时间戳 装换成时/分/秒
        var juliHour = parseInt((this.timestamp - cStamp)/(60*60*1000)) 
//      console.log(juliHour)
        var minTime = (this.timestamp - cStamp)%(60*60*1000)
        var juliMin = parseInt(minTime/(60*1000))
//      console.log(juliMin)
        var secTime = minTime%(60*1000)
        var juliSec = parseInt( secTime/1000)

        if(juliHour<10){
            juliHour = '0' + juliHour;
        }
        if(juliMin<10){
            juliMin = '0' + juliMin
        }
        if(juliSec<10){
            juliSec = '0' + juliSec
        }

//      通过字面量形式创造对象
        var abc = {
                    hour:juliHour,
                    min:juliMin,
                    sec:juliSec
                }

        return abc
    }

}
        //传参调用类,获取设置的时间
            var x = new CounterDown(2018,9,15,19,0,0)
            console.log(x)
//          setInterval 间隔函数
            setInterval(function(){
                var c = x.get()
//              这时c相当于返回的abc
                document.querySelector('#hour').innerHTML = c.hour
                document.querySelector('#min').innerHTML = c.min
                document.querySelector('#sec').innerHTML = c.sec
            },1000)


//倒计时关键知识点:
constructor(){}  类的构造函数
Date() : 获取当前时间,或传入时间格式的数据设置时间.
getTime() : 将时间转换成时间戳,
setInterval(fun,1000)  间隔函数
// Date()获取当前时间, new Date()根据传入的时间格式设置一个新的时间,参数为空时,默认为当前时间,注意月份是0~11月,要减一
// this.createTime = new Date(this.year,this.month-1,this.day,this.hour,this.min,this.sec)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值