广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript内置对象Date案例总结分析
  • 199
分享到

javascript内置对象Date案例总结分析

2024-04-02 19:04:59 199人浏览 独家记忆
摘要

目录Date的基本使用格式化时间1.格式化日期-年,月,日2.格式化时,分,秒获取Date总的毫秒数(时间戳)案例-网页倒计时核心算法(重要)结语Date的基本使用 内置对象Date

Date的基本使用

内置对象Date是构造函数,用new创建对象,无参数时返回当前时间,可加参数返回特定时间

//内置对象Date是构造函数,用new创建对象,无参数时返回当前时间,可加参数返回特定时间
var now_time = new Date();
console.log(now_time);
// 年月日之间可以用-或者/
var time_1 = new Date('2018-05-06 12:36:15');
var time_2 = new Date('2018/05/06');
console.log(time_1);
console.log(time_2);

在这里插入图片描述

格式化时间

可以从上图看到返回的时间格式 Sun May 06 2018 00:00:00 GMT+0800 (中国标准时间) 不符合我们中国人的表示习惯
所以我们需要获取日期的指定部分,然后进行日期格式化。

方法名说明代码
getFullYear()获取当年Obj.getFullYear()
getMonth()获取当月,返回0 -11Obj.getMonth()
getDate()获取当天日期Obj.getDate()
getDay()获取星期几(周日0 到 周六6)Obj.getDay()
getHours()获取当前小时Obj.getHours()
getMinutes()获取当前分钟Obj.getMinutes()
getSeconds()获取当前秒钟Obj.getSeconds()

1.格式化日期 - 年,月,日

//格式化日期- 年,月,日
var date = new Date(); // 实例化一个日期对象
var year = date.getFullYear();  // 返回当前日期年份
var month = date.getMonth() + 1;  //返回的是0-11,分别对应1-12月,所以接果+1才是正确的月数
year = year < 10? '0' + year: year ;
var dates = date.getDate();    // 返回几号
dates  = dates < 10? '0' + dates: dates ;
var day = date.getDay();   //返回的是0-6,分别对应星期天-星期六
var day_arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
console.log('今天是:'+ year + '年' + month +  '月' + dates + '日' + day_arr[day]);

在这里插入图片描述

2.格式化时,分,秒

	function getTime(){
            var time = new Date();
            var h = time.getHours();
            h = h < 10? '0' + h: h;
            var m = time.getMinutes();
            m = m < 10? '0' + m: m;
            var s = time.getSeconds();
            s = s < 10? '0' + s: s;

            return h + ':'  + m + ':' + s ;
        }
        console.log(getTime());

在这里插入图片描述

获取Date总的毫秒数(时间戳)

我们时常可以看到时间戳,那么他是怎么来的呢?

其实时间戳表示的是从1970年1月1号到当前时间的总的毫秒数。

至于为什么是1970年的这个时间,感兴趣的可以百度看看,十分有趣。

在我们javascript中获取时间戳有三种方法。

//获取Date总的毫秒数(时间戳) ,是从1970年1月1号到当前的总的毫秒数 至于为什么是这个时间,感兴趣的可以百度看看,十分有趣
//1.通过 valueOf() 或者 getTime() 方法
var date = new Date();
console.log(date.valueOf());  //得到的是我们当前时间距离1970 1.1的总的毫秒数
console.log(date.getTime());
//2.简单的写法(最常用的写法)
var date = +new Date(); 
console.log(date);
//3.H5 新增的,ie9以下不适用
console.log(Date.now());

在这里插入图片描述

案例-网页倒计时核心算法(重要)

1)核心算法:输入的时间减去现在的时问就是利余的时问,即倒计时,但是不能拿着时分秒相减,比如05分减去25分,结果会是负数的。

2)用时间载来做。用户输入时间总的老秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。

3)把剩余时间总的毫秒数化为秒然后转换为天、时、分、秒(时间转换为时分秒)

转换公式下:

d = parselnt (总秒数/60/60/24);        计算天数
h = parselnt (总秒数/60/60%24);        计算小时
m = parselnt (总秒数/60%60);        计算分数
s = parselnt (总秒数%60);        计算当前秒数

//网页倒计时核心算法
function countTime(time){
    var newTime = +new Date(); //获取当前总的毫秒数(时间戳)
    var inputTime = +new Date(time); // 得到指定时间的时间戳
    var times = (inputTime - newTime) / 1000; // 剩余时间的秒数
    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(countTime('2022-03-01 18:00:00'));

在这里插入图片描述

结语

以上就是javascript内置对象Date案例总结分析的详细内容,更多关于javascript内置对象Date的资料请关注编程网其它相关文章!

--结束END--

本文标题: javascript内置对象Date案例总结分析

本文链接: https://www.lsjlt.com/news/142411.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript内置对象Date案例总结分析
    目录Date的基本使用格式化时间1.格式化日期-年,月,日2.格式化时,分,秒获取Date总的毫秒数(时间戳)案例-网页倒计时核心算法(重要)结语Date的基本使用 内置对象Date...
    99+
    2022-11-13
  • javascript内置对象Math案例总结分析
    目录Math概述Math中常用函数的用法1.绝对值方法2.三个取整方法3.求最大值/最小值4.随机数案例求两个数之间的随机整数的小算法(重要)随机点名结语Math概述 Math 对象...
    99+
    2022-11-13
  • javascript中Date对象的示例分析
    小编给大家分享一下javascript中Date对象的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!MDN官网介绍set...
    99+
    2022-10-19
  • JavaScript内置对象BigInt实例分析
    本文小编为大家详细介绍“JavaScript内置对象BigInt实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript内置对象BigInt实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-07-02
  • JavaScript中的内置对象实例分析
    这篇文章主要介绍“JavaScript中的内置对象实例分析”,在日常操作中,相信很多人在JavaScript中的内置对象实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中的内置对象实...
    99+
    2023-06-29
  • javascript中Reflect内置对象的示例分析
    小编给大家分享一下javascript中Reflect内置对象的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!语义Ref...
    99+
    2022-10-19
  • Android 内存泄漏案例分析总结(Handler)
      在Android开发开发中,操作不当很容易引起内存泄漏,这里主要记录下平时遇到问题,包括:静态变量(也包含集合)、非静态的内部类、Handler、监听器,尤其是 Han...
    99+
    2022-06-06
    案例分析 内存泄漏 handler Android
  • javascript中内置对象Math的介绍及用法案例
    目录前言Math概述Math中常用函数的用法1.绝对值方法2.三个取整方法3.求最大值/最小值4.随机数结语前言 今天总结一下javascript 内置对象Math中的函数用法,顺带...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作