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日期格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript canvas实现九宫格切图效果

    JavaScript canvas实现九宫格切图效果

    这篇文章主要为大家详细介绍了JavaScript canvas实现九宫格切图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript事件代理和委托详解

    JavaScript事件代理和委托详解

    这篇文章主要为大家详细介绍了JavaScript事件代理和委托,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • layui switch 开关监听 弹出确定状态转换的例子

    layui switch 开关监听 弹出确定状态转换的例子

    今天小编就为大家分享一篇layui switch 开关监听 弹出确定状态转换的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Eval and new funciton not the same thing

    Eval and new funciton not the 

    以前有人会说,new Function的方式是几乎与eval相等,今天我查了一下,确实是不同的东西,说这句话的人太不负责了。关于eval和new function,得到的结果都是一致的,都会叫你不要去使用它们。所以结论就是“不得不”才使用
    2012-12-12
  • javascript中简单的进制转换代码实例

    javascript中简单的进制转换代码实例

    这篇文章介绍了javascript中简单的进制转换代码实例,有需要的朋友可以参考一下
    2013-10-10
  • 将数字转换成大写的人民币表达式的js函数

    将数字转换成大写的人民币表达式的js函数

    将数字转换成大写的人民币,方法有很多,本例介绍的是使用js来完成的,有需要的朋友可以参考下
    2014-09-09
  • ES6新特性三: Generator(生成器)函数详解

    ES6新特性三: Generator(生成器)函数详解

    这篇文章主要介绍了ES6新特性之Generator(生成器)函数,简单分析了Generator(生成器)函数的功能、定义、调用方法并结合实例形式给出了相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • Bootstrap入门书籍之(三)栅格系统

    Bootstrap入门书籍之(三)栅格系统

    这篇文章主要介绍了Bootstrap入门书籍之(三)栅格系统的相关资料,需要的朋友可以参考下
    2016-02-02
  • webpack打包主要流程以及优化

    webpack打包主要流程以及优化

    这篇文章主要介绍了Webpack是一个强大的前端构建工具,通过配置文件和一系列的插件和加载器,它可以将项目中的模块打包成适合生产环境的文件,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • JavaScript使用promise处理多重复请求

    JavaScript使用promise处理多重复请求

    处理重复请求的文章想必大家也看过了很多,大多数都是分为在response返回之前发现重复请求就return掉的和使用节流/防抖来间接规避用户频繁操作两种版本的。本文主要介绍了JavaScript使用promise处理多重复请求,感兴趣的可以了解一下
    2021-05-05

最新评论