JS内置对象Date的使用方法笔记+倒计时案例（三）

忧郁火龙果

已于 2022-05-25 22:08:28 修改

阅读量521

点赞数 1

分类专栏： JS基础文章标签： javascript 前端开发语言

于 2022-05-25 21:55:04 首次发布

本文链接：https://blog.csdn.net/LQlove1/article/details/124968918

版权

JS基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、Date对象的使用步骤及其注意事项

Date（）对象是一个构造函数，必须通过new创建实例对象使用
对象里面的参数数字型用逗号隔开，字符串型的年月日用破折号，时分秒用冒号
月份计数是从0-11记的，所以使用月份的时候会比当前月份少一，用的时候要加一
星期计数是0-6，0代表星期天

二、输出年月日

使用到的方法：

getFullYear() ---- 获取当年
getMonth() ---- 获取当月
getDate() ---- 获取当天日期
getDay() ---- 获取星期几(0-6,0代表星期天)

代码实现（输出当前的年月日跟星期）：

<!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>Document</title>
</head>
<body>
    <script>
        //  1. Date（）对象是一个构造函数，必须通过new创建实例对象使用
        var date = new Date();
        var date1 = new Date(2022,05,25);
        var date2 = new Date('2022-05-25 08:08:08');
        // 2.如果对象里面没有参数则返回的是一个当前的时间段
        console.log(date);
        // 3.有参数可以里面可以是数字型或者字符串型(常用)
        console.log(date1);//数字型参数用逗号隔开
        console.log(date2);//字符串型参数年月日用- ，时分秒用 :
        // 4.输出年月日
        console.log(date.getFullYear());
        // 这里月份会比当前月份少一月份，因为这个方法是0-11月，所以要加1
        console.log( '今天是星期' + (date.getMonth() + 1) + '月');
        console.log('今天是星期' + date.getDate() + '号');
        console.log('今天是星期' + date.getDay());
    </script>
</body>
</html>

实现结果：
请添加图片描述

三、输出时分秒

使用到的方法：

getHours() ---- 获取当前小时
getMinutes() ---- 获取当前分钟
getSeconds() ---- 获取当前秒钟

代码实现（输出当前的年月日时分秒）：

<!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>Document</title>
</head>
<body>
    <script>
        var times = new Date();
        // 1.基本操作
        // 输出小时
        console.log(times.getHours());
        // 输出分钟
        console.log(times.getMinutes());
        // 输出秒钟
        console.log(times.getSeconds());

        // 2.封装一个函数，返回时分秒 ： 2022年5月25日 当前时分秒
        function getTimes(){
           var time = new Date();
           var year = time.getFullYear();//年
           var month = time.getMonth()+1;//月
           var mark = time.getDate();//日
           var day = time.getDay();//星期
           var hour = time.getHours();//时
            //    正则表达式（如果小时是一个数就在前面加个零）
           hour = hour < 10 ? '0' + hour : hour;
           var minutes = time.getMinutes();//分
           minutes = minutes < 10 ? '0' + minutes : minutes;
           var seconds = time.getSeconds();//秒
           seconds = seconds < 10 ? '0' + seconds : seconds;
           return(year + '年' + month + '月' + mark + '日 ' + hour + ':' + minutes + ':' +seconds);
        }
        console.log(getTimes());
    </script>
</body>
</html>

实现结果：
请添加图片描述

四、输出时间戳（1970-现在的毫秒）

使用到的方法：

valueOf() ---- 1970 --现在的总的毫秒数
getTime() ---- 1970 --现在的总的毫秒数
+new Date ---- 1970 --现在的总的毫秒数
Date.now() ---- 1970 --现在的总的毫秒数

代码实现：

<!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>Document</title>
</head>
<body>
    <script>
        // 输出时间戳的方法
        var date = new Date();
        // 第一种
        console.log(date.valueOf());
        // 第二种
        console.log(date.getTime());
        // 第三种
        var times= +new Date;
        console.log(times);
        // 第四种
        console.log(Date.now());
    </script>
</body>
</html>

实现结果：
请添加图片描述

五、时间倒流计时器案例

分析案例：

输入的时间戳减去现在的时间戳，等于要倒计时的时间戳，现在的时间戳一直增加，就可以实现要倒计时的时间戳慢慢倒计时。
把要倒计时的时间戳转换为天时分秒。
计算公式如下:
day = parseInt（总秒数 / 60 / 60 / 24）
hour = parseInt (总秒数 / 60 / 60 % 24)
minute = parseInt（总秒数 / 60 % 24）
seconds = parseInt（总秒数 % 60）
用封装函数方法
未来时间戳用+new Date（未来的时间） => 转换成功

代码实现：

<!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>Document</title>
</head>
<body>
    <script>
        function countdown(futureTime){//comingTime即将到来的时间总毫秒
            var date = new Date();
            // 现在的总毫秒数
            var nowTime = +new Date();
            console.log(nowTime);

            // 未来的总毫秒数
            var comingTime = +new Date(futureTime)
            console.log(comingTime);

            // 需要倒计时的时间 = 未来总毫秒 - 总毫秒
            var needCountdown = comingTime - nowTime;
            console.log(needCountdown);

            // 计算出总毫秒数算下来的天数，时数，分数，秒数
            var day = parseInt( needCountdown / 1000 / 60 / 60 / 24 )//天
            day = day < 10 ? '0' + day : day;//小于10就在前面加0
            var hour = parseInt( needCountdown / 1000 / 60 / 60 % 24 )//时
            hour = hour < 10 ? '0' + hour : hour;
            var minute = parseInt( needCountdown / 1000 / 60 % 24 )//分
            minute = minute < 10 ? '0' + minute : minute;
            var second = parseInt( needCountdown / 1000 % 60)//秒
            second = second < 10 ? '0' + second : second;
            // 返回值一个准确的信息
            return(day + '天' + hour + '时' + minute + '分' + second + '秒');
        }
        var result = countdown('2022-05-27 18:00:00');
        console.log(result);
    </script>
</body>
</html>

实现结果：
请添加图片描述

六、注意事项

月数是0-11，算月数的时候可以在当前算出来的月数上加一得到准确的月数
周数是0-6，0代表的是星期天
未来时间戳用+new Date（未来的时间） => 转换成功

七、帮助

可以查文档学到更多对象方法的使用
地址如下：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

忧郁火龙果

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS内置对象Date的使用方法笔记+倒计时案例（三）

一、Date对象的使用步骤及其注意事项Date（）对象是一个构造函数，必须通过new创建实例对象使用对象里面的参数数字型用逗号隔开，字符串型的年月日用破折号，时分秒用冒号月份计数是从0-11记的，所以使用月份的时候会比当前月份少一，用的时候要加一星期计数是0-6，0代表星期天二、输出年月日使用到的方法：getFullYear() ---- 获取当年getMonth() ---- 获取当月getDate() ---- 获取当天日期getDay() ---- 获取星期
复制链接

扫一扫