week2.4Date——每天一个JS小总结

week2.4Date

week2.4Date

什么是时间对象

Date对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）。

Date能做什么

获取/控制页面中的时间

Date方法

创建

new Date()：当前时间

new Date("2019-11-07 16:00:00")：创建一个固定时间的时间对象

new Date(2019,10,7,16,0,0)：创建一个固定时间的时间对象

    // Date是JS原生的时间对象库
    // 创建一个时间对象
    // 获取当前时间的对象
    var date1 = new Date(); 
    console.log( date1 );
​
    // 创建一个固定时间的时间对象
    var date2 = new Date(2018,7,1,10,0,0);
    console.log( date2 );
​
    // 创建一个固定时间的时间对象
    var date3 = new Date("2019-06-01 10:00:00");
    console.log( date3 );
    document.write(date3)

 

获取

getFullYear()

getMonth()：0=>1月 11=>12月

getDate()

getDay()

getHours()

getMinutes()

getSeconds()

gettime方法返回一个整数值,这个整数代表了从1970年1月1日开始计算到date对象中的时间之间的毫秒数

let date = new Date

let date1 = date.getDate()

console.log( date1);

 /*
        获取年份        getFullYear()
        获取月份        getMonth()
        获取日期        getDate()
        获取星期        getDay()
        获取小时        getHours()
        获取分钟        getMinutes()
        获取秒钟        getSeconds()
    */
        var date = new Date();
        var year = date.getFullYear() 
        var month = date.getMonth()+1 
        var day = date.getDate() 
        var week = date.getDay() 
        var hours = date.getHours() 
        var mins = date.getMinutes() 
        var secs = date.getSeconds() 
​
        if( week === 0 ) week = '天'
        if( week === 1 ) week = '一'
        if( week === 2 ) week = '二'
        if( week === 3 ) week = '三'
        if( week === 4 ) week = '四'
        if( week === 5 ) week = '五'
        if( week === 6 ) week = '六'
​
        var str = year+'年'+month+'月'+day+'日 星期'+week+' '+hours+':'+mins+':'+secs;
        document.write( str );//2020年9月4日 星期五 14:5:0

 

电子表

setInterval(show_time,1000);//每一秒执行一次
show_time();
// 显示时间的函数
function show_time(){
    var date = new Date();
    var year = date.getFullYear() 
    var month = date.getMonth()+1 
    var day = date.getDate() 
    var week = date.getDay() 
    var hours = date.getHours() 
    var mins = date.getMinutes() 
    var secs = date.getSeconds() 
​
    if( week === 0 ) week = '天'
    if( week === 1 ) week = '一'
    if( week === 2 ) week = '二'
    if( week === 3 ) week = '三'
    if( week === 4 ) week = '四'
    if( week === 5 ) week = '五'
    if( week === 6 ) week = '六'
​
    var str = year+'年'+getTwo(month)+'月'+getTwo(day)+'日 星期'+week+' '+getTwo(hours)+':'+getTwo(mins)+':'+getTwo(secs);
    document.body.innerText = str ;
}
​
function getTwo( num ){
    return num>=10?num:'0'+num;
}

定时器

setInterval(fn,time): 周期性的循环调用执行，类似于闹钟

setTimeout(fn,time): 定时调用一次，类似于定时炸弹

clearInterval(timer): 清理定时器

clearTimeout(timer): 清理定时器

    /*
        setTimeout( fn,time ):一次性定时器
        setInterval( fn,time ):循环式定时器
        参数1： 
            回调函数
        参数2：
            时间，ms
​
        clearTimeout()：消除定时器(一次性)
        clearInterval()：消除定时器(循环式)
    */ 
    // setTimeout(function(){
    //  alert(1);
    // },3000);
    var num1 = 1;
    var timer = setInterval(function(){
        if( num1>=10 ) clearInterval(timer);
        console.log(num1);
        num1++;
    },1000);

倒计时抢购

    <style type="text/css">
        *{margin: 0;padding: 0;}
        .container{
            width:590px;
            margin:10px auto;
            border:1px solid red;
            text-align: center;
        }
    </style>

<div class="container">
        <img src="./1.jpg">
        <h1>
            还剩：
            <span id="hour"></span>:
            <span id="min"></span>:
            <span id="sec"></span>
        </h1>
    </div>

function $(ele){
    var e = null;
    if( ele[0] === '#' ){
        e = document.querySelector(ele)
    }else{
        e = document.querySelectorAll(ele)
    }
    return e
}
// 未来时间：固定
// 现在时间：时刻变化的
// 未来-现在
​
// 1，设置未来时间
// var f_date = new Date();
// f_date.setTime( f_date.getTime()+10*60*1000 )
​
var f_date = new Date('2020-09-04 15:54:20');//自己设置的
​
var timer = setInterval(update_time,1000);
update_time();
function update_time(){
    //倒计时抢购
    // 2，获取当前时间
    var now_time = new Date();
​
    // 3，算出未来-现在的时差
    var s_time = Math.ceil((f_date-now_time)/1000);
    
    // 3.5，如果时差<=0，就清除定时器
    if( s_time<=0 ){
        $('h1')[0].innerText = '抢购开始！';
        clearInterval(timer);
        return;
    }
​
    // 4，将剩余时间换算成时，分，秒
    var hour = Math.floor(s_time/3600);// 4.45 => 4小时
    var min = Math.floor(s_time/60)%60;// 267%60 => 27
    var sec = s_time%60;// 16030%60 => 10
​
    // 5，将得到时分秒放入span中
    $('#hour').innerText = hour
    $('#min').innerText = min
    $('#sec').innerText = sec
}