JavaScript内置对象-日期对象

MDN使用手册

1、Date概述

在这里插入图片描述

2、Date()方法的使用

在这里插入图片描述

3、日期的格式化

在这里插入图片描述

3.1、获取特定格式的系统当前日期的年月日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 格式化日期 年月日
        var date = new Date();
        console.log(date.getFullYear());//返回当前日期的年
        console.log(date.getMonth() + 1);
        console.log(date.getDate());//返回的是 几号
        console.log(date.getDay());// 周一返回的是1 周六返回的是6 但是周日返回的是0
        // 案例:获取当前系统时间 2021年11月24日 星期三
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day = date.getDay();
        console.log('今天是:' + year + '年' + month + '月' + dates + '日 '+ arr[day]);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.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>
    <script>
        // 格式化日期时分秒
        var date = new Date();
        console.log(date.getHours());//时
        console.log(date.getMinutes());//分
        console.log(date.getSeconds());//秒
        // 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer(){
    
    
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? + '0' : h;
            var m = time.getMinutes();
            m = m < 10 ? + '0' : m;
            var s = time.getSeconds();
            s = s < 10 ? + '0' : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTimer());
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4、获取系统时间戳的几种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获得Date总督毫秒数(时间戳)不是当前的毫秒数 而是距离1970年1月1日过了多少毫秒
        // 1、通过valueOf() getTime()
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        // 2、简单的写法(最常用的写法)
        var date1 = +new Date(); //+new Date() 返回的就是总的毫秒数
        console.log(date1);
        // 3、H5 新增的 获得总的毫秒数
        console.log(Date.now());
        
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5、倒计时案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function countDown(time){
    
    
            var nowTime = +new Date(); //返回的是当前时间的总毫秒数
            var inputTime = +new Date(time);//返回的是用户输入时间的总毫秒数
            var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
            var d = parseInt(times / 60 / 60 / 24);//天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//当前的秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s +'秒';
        }
        console.log(countDown('2021-11-24 18:00:00'));
        var date = new Date();
        console.log(date);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_46112274/article/details/121516734