2.3、定时器和时间对象

一、定时器分为两种
// 开启定时器
// setInterval(function() {}, 时间) 返回定时器id
// setTimeout(function() {}, 超时时间) 返回定时器id
//清楚定时器
// clearTimeout(定时器id)
// clearInterval(定时器的id)

<button>发送验证码</button>
<script>
    var btn = document.querySelector('button')
    var timer = null
    var n = 10
    btn.onclick = function() {
        //点击时先清除定时器
        clearInterval(timer)
        timer = setInterval(function() {
        console.log(this)//window
            n--
            btn.innerHTML = '倒计时' + n + '秒'
            if (n <= 0) {
                clearInterval(timer)
                btn.innerHTML = '重新发送'
                n = 10
            }
        }, 1000)
    }
</script>

定时器里面的this 指的是window

二、时间对象

//时间对象
//new Date()  //创建此时此刻的时间对象 是自己电脑上的时间
var date = new Date() //Thu Oct 03 2019 14:21:01 GMT+0800 (中国标准时间)
console.log(date)

//获取年
var year = date.getFullYear()
console.log(year)
    //获取月  0-11 对应的 1-12月
var Month = date.getMonth() + 1
console.log(Month)
    //获取日
var day = date.getDate()
console.log(day)

//获取星期  0-6 对应的是 日-六
var week = date.getDay()
console.log(week)

//获取小时     只是当前的秒数
var h = date.getHours()
console.log(h)
    //获取分钟
var m = date.getMinutes()
console.log(m)
    //获取秒
var s = date.getSeconds()
console.log(s)

// 案例：
//时间显示器
var hhh = document.querySelector('h2')
var str = '日一二三四五六' //通过下标星期0-6 对应的 日-六
hhh.innerHTML = '现在的时间是：' + year + '年' + Month + '月' + day + '日' + '星期' + str[week] + totwo(h) + ':' + totwo(m) + ':' + totwo(s)
setInterval(function() {
    //时间对象
    //new Date()  //创建此时此刻的时间对象 是自己电脑上的时间
    var date = new Date() //Thu Oct 03 2019 14:21:01 GMT+0800 (中国标准时间)
    console.log(date)
    var year = date.getFullYear()
    var Month = date.getMonth() + 1
    var day = date.getDate()
    var week = date.getDay()
    var h = date.getHours()
    var m = date.getMinutes()
    var s = date.getSeconds()
    hhh.innerHTML = '现在的时间是：' + year + '年' + Month + '月' + day + '日' + '星期' + str[week] + totwo(h) + ':' + totwo(m) + ':' + totwo(s)
}, 1000)

时间对象的传参
// new Date()//当前时间
var d = new Date()
    // 怎么获取本地时间呢
console.log(d.toLocaleString()) //2019/10/3 下午4:33:52

//new Date() 对象传入参数
var c = new Date(2019, 11, 12, 12, 12, 12, 12)
console.log(c) //Thu Dec 12 2019 12:12:12 GMT+0800 (中国标准时间)
console.log(c.toLocaleString()) //2019 / 12 / 12 下午12: 12: 12
console.log(c.toString()) // 转标准时间Thu Dec 12 2019 12:12:12 GMT+0800 (中国标准时间)


// 不传时分秒
var f = new Date(2019, 8, 12)
console.log(f.toLocaleString()) //2019/9/12 上午12:00:00


// 设置年月日 时分秒
var g = new Date(2019, 8, 12)

g.setFullYear(2020) //同理  年月日时分秒 都可以设置
g.setMonth(20) // 有自动容错能力 
console.log(g.toLocaleString()) //2021 / 9 / 12 上午12: 00: 00

时间戳

<h2>距离抢购结束还有20天8小时20分钟30秒</h2>
<script>
    var hh = document.querySelector('h2')
    var timer = null
    var row = new Date(2019, 9, 3, 17, 48) //未来的时间对象  这个时间自己调节
    timer = setInterval(fn, 1000)
    fn() //防止页面刷新 显示原始值

    function fn() {
        var now = new Date() //现在的时间对象
        var s = Math.floor((row - now) / 1000) //总秒数
            // 把毫秒数转成天时分秒
        if (s <= 0) {
            clearInterval(timer) //先清除定时器
            hh.innerHTML = '抢购结束'
            return; //不在往下走了
        }
        var d = Math.floor(s / 86400) //天数
        var h = Math.floor((s % 86400) / 3600) //小时
        var m = Math.floor(((s % 86400) % 3600) / 60) //分钟数
        var ms = Math.floor(((s % 86400) % 3600) % 60) //秒数s
        hh.innerHTML = '距离抢购结束还有' + d + '天' + h + '小时' + m + '分钟' + ms + '秒'
    }
</script>