js时间对象及具体案例_javascript时间对象应用案例-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62697897/article/details/127043740

1.事件对象

（1）创建一个日期对象

<1>new Date()

<2>new Date()

例：

var date=new Date();  //月份的取值范围[0-11]
    h2[0].innerHTML=date;

（2）获取年份：getFullYear()

例：

 var year=date.getFullYear();
    h2[1].innerHTML=year;

（3）获取月份：getMonth()

例：

var month=date.getMonth()+1;
    h2[2].innerHTML=month;

（4）获取日期：getDate()

例：

 // setDate()  0->上个月月底
    // date.setDate();
    var d=date.getDate();
    h2[3].innerHTML=d;

（5）获取周几：getDay()

例：

 var w=date.getDay();
    h2[4].innerHTML=w;

（6）获取小时：getHours()

（7）获取分钟：getMinutes()

（8）获取秒数：getSeconds()

例：获取时分秒

   var h=date.getHours();
    // UTC获取的是世界时间  0时区的时间   我们在东八区   和0时区差8小时
    var h1=date.getUTCHours();
    console.log(h1);
    var m=date.getMinutes();
    var s=date.getSeconds();
    h2[5].innerHTML=h;
    h2[6].innerHTML=m;
    h2[7].innerHTML=s;

（9）获取时间戳（距离1970.1.1的毫秒数）：getTime()

例：

  // 获取时间戳  getTime()  获取距离1970.1.1的毫秒数
    var ss=date.getTime();
    h2[8].innerHTML=ss;

注意：（1）所有get方法都有set方法，用于设置时间

（2）UTC为世界时间

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间对象</title>
</head>
<body>
    <div>
        <h1></h1>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
    </div>
</body>
<script>
    // function Date(){

    // }
    var h2=document.querySelectorAll('div>h2');
    // 1.创建一个时间对象
    // 不传参  获取的是当前的时间
    // 可以传参  字符串：'2022-8-23 00:00:00'
    var date=new Date();  //月份的取值范围[0-11]
    // document.write(date);
    h2[0].innerHTML=date;
    // 获取年份
    var year=date.getFullYear();
    h2[1].innerHTML=year;

    // 获取月份
    var month=date.getMonth()+1;
    h2[2].innerHTML=month;

    // 获取日期
    // setDate()  0->上个月月底
    // date.setDate();
    var d=date.getDate();
    // console.log(date);
    h2[3].innerHTML=d;

    // 获取周几
    var w=date.getDay();
    h2[4].innerHTML=w;

    // 获取时分秒
    var h=date.getHours();
    // UTC获取的是世界时间  0时区的时间   我们在东八区   和0时区差8小时
    var h1=date.getUTCHours();
    console.log(h1);
    var m=date.getMinutes();
    var s=date.getSeconds();
    h2[5].innerHTML=h;
    h2[6].innerHTML=m;
    h2[7].innerHTML=s;

    // 获取时间戳  getTime()  获取距离1970.1.1的毫秒数
    var ss=date.getTime();
    h2[8].innerHTML=ss;
</script>
</html>

运行结果：

2.具体案例：春节倒计时

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节倒计时</title>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            background-image: url(./烟花.jpg);
            background-size: cover;
            /* 设置弹性盒子 */
            display: flex;
            /* 主轴对齐方式 */
            justify-content: center;
            /* 交叉轴对齐方式 */
            /* align-items: center; */
        }
        main{
            width: 500px;
            height: 270px;
            /* background-color: aqua; */
            box-shadow: 0 0 5px white;
            margin-top: 100px;
        }
        main h1{
            text-align: center;
            font-size: 35px;
            color: white;
        }
        main div{
            display: flex;
            font-size: 25px;
            width: 60%;
            margin: 0 auto;
            justify-content: space-between;
            color:white;
        }
    </style>
</head>
<body>
    <main>
        <h1>距离春节还有</h1>
        <div>
            <p id="day">149</p><p>天</p>
            <p id="hour">20</p><p>小时</p>
            <p id="min">35</p><p>分钟</p>
            <p id="sec">20</p><p>秒</p>
        </div>
    </main>
</body>
<script>
    // 1.获取元素 
    var d=document.querySelector('#day');
    var h=document.querySelector('#hour');
    var m=document.querySelector('#min');
    var s=document.querySelector('#sec');
    setInterval(function(){   
        // 获取当前时间
        var now=new Date();
        // 获取过年的时间
        var yearDate=new Date('2023-1-21 00:00:00');

        // 获取当前距离1970 1.1的毫秒数
        var nowS=now.getTime();
        // 获取过年距离1970 1.1的毫秒数
        var yearS=yearDate.getTime();
        // console.log(nowS,yearS);
        // 计算过年和当前相差的秒数
        var numS=(yearS-nowS)/1000;

        // 计算相差的天数
        var day=Math.floor(numS/(24*60*60));
        // console.log(day);
        // 计算相差的小时
        // (numS%(24*60*60))==>numS-(day*(24*60*60))
        var hour=Math.floor(numS%(24*60*60)/(60*60));
        // console.log(hour);
        // 计算相差的分钟
        var min=Math.floor(numS%(24*60*60)%(60*60)/60);
        // console.log(min);
        // 计算相差的秒
        var sec=Math.floor(numS%(24*60*60)%(24*60*60)%60);
        // console.log(sec);
        d.innerHTML=day;
        h.innerHTML=hour;
        m.innerHTML=min;
        s.innerHTML=sec;
        },1000)

   
</script>
</html>

运行结果：