JavaScript实现日期格式化详细实例

 更新时间:2023年09月13日 08:56:40   作者:孤独守夜  
这篇文章主要给大家介绍了关于JavaScript实现日期格式化的相关资料,JavaScript中的日期对象提供了许多方法和属性,可以通过它们来进行日期的格式化,需要的朋友可以参考下

一、日期对象

 Date()是一个构造函数,创建date对象时使用构造函数实例化对象

1、获取当前系统时间

  var date = new Date();  // new Date(); 获取当前系统时间
  // var date2 = new Date(15554457551111)  //new Date(毫秒数)  代表创建毫秒数对象的日期对象
  console.log(date);  //获取到的是当前时间
  // console.log(typeof date);

2、日期的原始值

获取到的是1970年1月1日至今的毫秒数

 console.log(date.getTime());  // getTime();  日期的原始值  获取到的是1970年1月1日至今的毫秒数

3、获取年份

console.log(date.getFullYear());  // date.getFullYear(); 获取年份

4、获取月份

月份从0开始的所以要加1

 console.log(date.getMonth() + 1); // date.getMonth();  获取月份 月份从0开始的所以要加1

5、获取日

console.log(date.getDate()); // date.getDate();  获取日

6、获取星期

console.log(date.getDay()); //date.getDay(); 获取星期

7、获取小时

 console.log(date.getHours());  //date.getHours(); 获取小时

8、获取分钟

 console.log(date.getMinutes());  // date.getMinutes();  获取分钟

9、获取秒

console.log(date.getSeconds()); //date.getSeconds();  获取秒

二、通过日期对象的方法实现日期格式化

实现日期格式化效果图

function dateFormat(date) {
    console.log(showTime(date.getHours()));
    var year = date.getFullYear();                // 年
    var month = showTime(date.getMonth() + 1);        // 月
    var week = showTime(date.getDay());           // 星期
    var day = showTime(date.getDate());          // 日
    var hours = showTime(date.getHours());         // 小时
    var minutes = showTime(date.getMinutes());    // 分钟
    var second = showTime(date.getSeconds());     // 秒
    var str = '';
    str = str + year + '-' + month + '-' + week + '-' + day + '-' + hours + '-' + minutes + '-' + second
    document.write(str);
  }
  var date = new Date();
  dateFormat(date);
    // 封装一个不够两位数就补零的函数
  function showTime(t) {
    var time
    time = t > 10 ? t : '0' + t
    return time
  }

日期格式化实现效果图

其中包含封装一个不够两位数就补零的函数

一个不够两位数就补零的函数

 // 封装一个不够两位数就补零的函数
  function showTime(t) {
    var time
    time = t >= 10 ? t : '0' + t
    return time
  }

总结 

到此这篇关于JavaScript实现日期格式化的文章就介绍到这了,更多相关js日期格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在TypeScript项目中搭配Axios封装后端接口调用

    在TypeScript项目中搭配Axios封装后端接口调用

    这篇文章主要介绍了在TypeScript项目中搭配Axios封装后端接口调用,本文记录一下在 TypeScript 项目里封装 axios 的过程,之前在开发 StarBlog-Admin 的时候已经做了一次封装,不过那时是JavaScript跟TypeScript还是有些区别的,需要的朋友可以参考下
    2024-01-01
  • JavaScript中Number.isNaN 和 isNaN 的区别详解

    JavaScript中Number.isNaN 和 isNaN 的区别详解

    本文和大家分享一个前几天写代码踩的坑,笔者在业务逻辑中需要对一个值进行NaN的判断,由于笔者的不严谨,使用了isNaN,从而引起Bug,也正是因为这个,笔者才知道了isNaN和Number.isNaN的区别,所以本文就和大家聊聊它们的区别
    2023-09-09
  • js代码实现无缝滚动(文字和图片)

    js代码实现无缝滚动(文字和图片)

    js无缝滚动,图片无缝滚动,文字无缝滚动,基于js代码如何实现,本篇文章给大家详解js代码实现无缝滚动(文字和图片),需要的朋友可以参考下
    2015-08-08
  • wordpress之js库集合研究介绍

    wordpress之js库集合研究介绍

    wordpress之js库集合研究介绍...
    2007-08-08
  • 微信小程序如何在页面跳转时进行页面导航

    微信小程序如何在页面跳转时进行页面导航

    小程序能够在不同的页面进行跳转切换,路由起到了至关重要的作用,下面这篇文章主要给大家介绍了关于微信小程序如何在页面跳转时进行页面导航的相关资料,需要的朋友可以参考下
    2022-09-09
  • 在js文件中引入(调用)另一个js文件的三种方法

    在js文件中引入(调用)另一个js文件的三种方法

    这篇文章主要介绍了在js文件中引入(调用)另一个js文件的三种方法,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • 前端date.locale is not a function错误的简单解决办法

    前端date.locale is not a function错误的简单解决办法

    这篇文章主要给大家介绍了关于前端date.locale is not a function错误的简单解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Js鼠标跟随代码小手点击实例方法

    Js鼠标跟随代码小手点击实例方法

    一个跟随鼠标的小手效果,鼠标移在哪里,小手就跟着移向哪里,会出现手的效果,放在链接上的时候,手会变化,两只手很可爱哦,JS鼠标跟随代码分享与大家。
    2013-05-05
  • 如何安装控制器JavaScript生成插件详解

    如何安装控制器JavaScript生成插件详解

    这篇文章主要给大家介绍了关于如何安装控制器JavaScript生成插件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • js实现点击后将文字或图片复制到剪贴板的方法

    js实现点击后将文字或图片复制到剪贴板的方法

    这篇文章主要介绍了js实现点击后将文字或图片复制到剪贴板的方法,功能非常实用,需要的朋友可以参考下
    2014-08-08

最新评论