时间、日期对像

最新推荐文章于 2023-01-08 23:16:35 发布

斗弟

最新推荐文章于 2023-01-08 23:16:35 发布

阅读量160

点赞数

分类专栏：原生JS 文章标签： js中的时间、日期

本文链接：https://blog.csdn.net/L_Lintellect/article/details/98479149

版权

原生JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

时间、日期对象

时间

获取时间戳

var data = new Date() //可获取完整的时间戳年月日是分秒

获取具体时间

    var date = new Date();
    var year = date.getFullYear();//年
    var month = date.getMonth() + 1;//月  月份系统0开始
    var day = date.getDate();//日
    var hour = date.getHours();//时
    var mins = date.getMinutes();//分Epoch Time
    var sec = date.getSeconds();//秒
	var epoch_time = date.getTime(); //1564802025992 毫秒数，系统对应的纪元时间  1970 年 1 月 1 日至今的毫秒数。

时间的相关操作：

字符串转时间戳

 var date1 = new Date(str);//先把字符串转成日期对象
    、//可转成毫米数  date1.getTime();

转成毫秒数，可以是字符串或者日期的格式

var num = Date.parse(str);   //str可以是字符串或者时间戳

可应用于求两个时间差(或者距离某天还有多久，实现思路也是一样的）。

将两个时间（或者是字符串）通过上述1或者2的方式转成毫秒数。
var dis = 两毫秒数相减
结果毫秒数可转成日或时或分或秒，以天为例子：parseInt(dis / 1000 / 60 / 60 / 24);

定时器

1秒为1000毫秒，系统计时是以毫秒为单位的。

闹钟型，间隔型

setInterval(fn , time) 用来间隔时间段反复执行操作。开启不要忘记要关闭，否则会影响性能

间隔time毫秒执行一次fn函数，fn可以为回调函数，也可以为外置函数，外置函数时不可写括号，否则会立即执行，出现严重的bug。

clearIntervar(id) 停止执行setInerval 函数 id = setInterval(fun, time)

电子时钟案例（vsCode编辑器）

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

<head>
    <meta charset="UTF-8">
    <title>电子时钟</title>
</head>

<body>
    <h1 id="show"></h1>
</body>
<script>
    //需求：xxxx-x-xx xx：xx ：xx
    var h1 = document.getElementById('show');
    function getTime() {
        var date = new Date();
        //获取时间点
        var year = date.getFullYear();//年
        var month = date.getMonth() + 1;//月  系统的月份是0开始的
        var day = date.getDate();//日
        var hour = date.getHours();//时
        var mins = date.getMinutes();//分
        var sec = date.getSeconds();//秒
        //此函数作用是增加0的作用。
        function add0(num) {
            if (num < 10) {
                return '0' + num;
            } else {
                return '' + num;
            }
        }
        // console.log(`${year}-${add0(month)}-${add0(day)} ${add0(hour)}:${add0(mins)}:${add0(sec)}`);
        //数据渲染
        h1.innerHTML = `${year}-${add0(month)}-${add0(day)} ${add0(hour)}:${add0(mins)}:${add0(sec)}`;
    }
    getTime();//因为定时器是1秒后才执行第一次，先主动调用一次，不然会有bug
    setInterval(getTime, 1000);  // 间隔1000毫秒就是1
秒执行一次getTime() 函数
</script>
</html>

倒计时型

倒计时定时器，可以用来延迟执行某些操作。

var id = setTimeout(fn,time) 相当于延迟time毫秒执行fn（只执行一次）

clearTimeout(id) 关闭

两种类型定时器的函数fn都是可以内置或者外置的，外置时在定时器中不可写括号。

常见应用：限时购、倒计时广告。

限时购：

结构样式已完成，原生js实现思路如下。

首先设置一个截止时间
开启定时器（步长为秒或者分都可以，按需设置） setInterval(settime, time);
1. 获取系统当前时间， Date.now()
2. 截止时间和当前时间相减，得到的结果并换算成与步长相同的单位。
3. 比较结果与临界点
  1. <= 临界点时：改变对应样式，操作，停止定时器。

倒计时广告：

结构样式已完成，原生js实现思路如下。