JavaScript的时间对象总结

最新推荐文章于 2022-10-20 22:44:13 发布

Et2nity

最新推荐文章于 2022-10-20 22:44:13 发布

阅读量412

点赞数 1

分类专栏： JS/JavaScript

本文链接：https://blog.csdn.net/Eternity_matt/article/details/109010626

版权

JS/JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、 Date对象的构造函数

创建一个日期对象：new Date()

二、实例化 Date对象

创建一个新Date对象的唯一方法是通过new 操作符：

<script>
    let now = new Date();
</script>

三、语法和使用规则

1.没有参数

new Date()

如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间

（也就是执行JavaScript的客户端电脑所设置的时间）来创建一个Date对象。

2.Unix时间戳

new Date(milliseconds)

一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自1970年1月1日00:00:00 UTC（the Unix epoch）以来的毫秒数，忽略了闰秒。请注意大多数 Unix 时间戳功能仅精确到最接近的秒。

3.时间戳字符串

new Date(dateString)

由于浏览器之间的差异与不一致性，强烈不推荐使用Date构造函数来解析日期字符串 (或使用与其等价的Date.parse)。

<script>
    var birthday = new Date('March 21, 1987 23:15:30');
    var day1 = birthday.getDay();
    // Sunday - Saturday : 0 - 6
    console.log(day1); // 6
    console.log(birthday.getHours()); // 23
</script>

4、分别提供日期与时间的每一个成员

new Date(year, monthIndex [, date [, hours [, minutes [, seconds [, milliseconds]]]]]);

当至少提供了年份与月份时，这一形式的 Date() 返回的 Date 对象中的每一个成员都来自下列参数。没有提供的成员将使用最小可能值（对日期为1，其他为0）。

new Date(2018,9,16,0,50,0); //月份从0开始，

四、如何将Date对象转换为字符串

将日期转换为更容易理解的格式

<script>
    var myDate = new Date();

    // 日期和时间：Wed Nov 06 2019 08:44:11 GMT+0800 (中国标准时间)
    console.log(myDate.toString());
    console.log(myDate.toDateString());          // 日期部分：Wed Nov 06 2019
    console.log(myDate.toTimeString());          // 时间部分：08:49:00 GMT+0800 (中国标准时间)

    console.log(myDate.toLocaleString());  // 本地格式的日期和时间：2019/11/6 上午8:56:35
    console.log(myDate.toLocaleDateString());  // 本地格式的日期部分：2019/11/6
    console.log(myDate.toLocaleTimeString());  // 本地格式的时间部分：上午8:56:35

    // 根据世界时，把Date对象转换为字符串：Wed, 06 Nov 2019 00:49:00 GMT
    console.log(myDate.toUTCString());    
</script>

五、 Date对象的方法

记录有关时间的所有方法，简单实用！

<script>
    let now = new Date();

//年月日
    console.log(now.getFullYear()); // 返回一个四位数字的年份

    console.log(now.getMonth()); //返回一个 0 到 11的整数值: 0代表一月份，1代表二月份，依次类推

    console.log(now.getDate()); // 返回一个 1 到 31 的整数值，表示一个月中的第几天


//时分秒
    console.log(now.getHours()); // 返回一个 0 到 23 的整数值，表示小时

    console.log(now.getMinutes()); // 返回一个 0 到 59 的整数值，表示分钟数

    console.log(now.getSeconds()); // 返回一个 0 到 59 的整数值，表示秒数


//毫秒了解一下
    console.log(now.getMilliseconds()); // 方法返回一个0 到 999的整数，表示毫秒数

//周
    console.log(now.getDay()); // 返回一个 0到 6的整数值： 0 代表星期日，1代表星期一，依次类推


    console.log(now.getTime()); // 返回距 1970 年 1 月 1 日之间的毫秒数
</script>

六、实用案例

1.把当前时间做一个字符串拼接，用计时器定时更新时间，且要求页面刷新时也显示时间

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
h1{margin-top:100px; margin-left:40px; font-weight:bolder; color:#000; font-size:36px;}
</style>
</head>

<body>
    <h1 id="h1"></h1>
    <script>
        var oH1=document.getElementById("h1");
        showtime();
        setInterval(function(){
            showtime();
        },1000)
        function showtime(){
            var myTime = new Date();
            oH1.innerHTML=myTime.getFullYear()+"年"+(myTime.getMonth()+1)+"月"+myTime.getDate()+"日"+"  "+myTime.getHours()+":"+myTime.getMinutes()+":"+myTime.getSeconds();
        }
    </script>
</body>

运行结果：

2. 图片时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            display: flex;
            justify-content: center;
        }

        #hour,
        #mintue,
        #second {
            width: 246px;
            height: 173px;
            display: flex;
            justify-content: space-between;
          
        }

        #dot {
            width: 123px;
            height: 173px;
          
        }
        body{
            padding: 100px 0 0 0 ;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="hour">
            <img src="./photo/0.JPG" alt="">
            <img src="./photo/0.JPG" alt="">
        </div>
        <div id="dot">
            <img src="./photo/colon.JPG" alt="">
        </div>
        <div id="minute">
            <img src="./photo/0.JPG" alt="">
            <img src="./photo/0.JPG" alt="">
        </div>
        <div id="dot">
            <img src="./photo/colon.JPG" alt="">
        </div>
        <div id="second">
            <img src="./photo/0.JPG" alt="">
            <img src="./photo/0.JPG" alt="">
        </div>
    </div>
    <script>
        let imgs = [
            './photo/0.JPG',
            './photo/1.JPG',
            './photo/2.JPG',
            './photo/3.JPG',
            './photo/4.JPG',
            './photo/5.JPG',
            './photo/6.JPG',
            './photo/7.JPG',
            './photo/8.JPG',
            './photo/9.JPG',
        ]

        function getHMS() {
            let now = new Date()
            let second = now.getSeconds();
            let hour = now.getHours();
            let minute = now.getMinutes();
            return {
                h: hour,
                m: minute,
                s: second
            }
        }

        function repairZero(item) {
            item = item > 9 ? item : '0' + item
            return item
        }
        setInterval(() => {
            let {
                h,
                m,
                s
            } = getHMS()

            s = repairZero(s).toString()
            m = repairZero(m).toString()
            h = repairZero(h).toString()
            hour.querySelectorAll('img')[0].src = `${imgs[h[0]]}`
            hour.querySelectorAll('img')[1].src = `${imgs[h[1]]}`
            minute.querySelectorAll('img')[0].src = `${imgs[m[0]]}`
            minute.querySelectorAll('img')[1].src = `${imgs[m[1]]}`
            second.querySelectorAll('img')[0].src = `${imgs[s[0]]}`
            second.querySelectorAll('img')[1].src = `${imgs[s[1]]}`
        }, 1000);
    </script>
</body>

</html>

运行结果：

数字图片会随着时间的变化而变化

Et2nity

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JavaScript的时间对象总结

一、 Date对象的构造函数创建一个日期对象：new Date()二、实例化 Date对象创建一个新Date对象的唯一方法是通过new 操作符：<script> let now = new Date();</script>三、语法和使用规则1.没有参数new Date()如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间（也就是执行JavaScript的客户端电脑所设置的时间）来创建一个Date对...
复制链接

扫一扫