首页 > 编程语言 >JavaScript实现Date( ) ——日期格式化的三种常用方法

JavaScript实现Date( ) ——日期格式化的三种常用方法

时间:2023-11-14 17:34:26浏览次数:35  
标签:console log JavaScript js date let Date 格式化

Date( ) 介绍

Date( ) 基本使用

Date()日期对象是构造函数,必须使用new来调用我们的日期对象。

  • Date()没有参数时 返回当前时间
  • Date(timer)有参数时 返回参数设置的时间
    • 参数写法:'2012-2-2 08:54:32'(字符串)
    • 返回值格式:Sun May 28 2023 23:36:28 GMT+0800 (中国标准时间)
  js 复制代码
    // 无参数时
    let dateW = new Date();
    console.log('当前时间', dateW); // Sun May 28 2023 23:36:28 GMT+0800 (中国标准时间)
    // 有参数时
    let dateY = new Date('2012-2-2 08:54:32');
    console.log('指定时间', dateY); // Thu Feb 02 2012 08:54:32 GMT+0800 (中国标准时间)

Date() 常用API

Date() 可以通过许多方法获取日期和时间的各个部分,在格式化时间时我们经常用到这些API。

  js 复制代码
    let date = new Date();
    console.log(date.getFullYear()); //当前日期的年 2022
    console.log(date.getMonth() + 1); //月份+1 由于月份是0-11计算 所以需要 +1 
    console.log(date.getDate()); // 日
    console.log(date.getDay()); // 星期几  注意:星期日返回的是0
    console.log(date.getHours()); // 时
    console.log(date.getMinutes()); // 分
    console.log(date.getSeconds()); // 秒

日期格式化

1.1 toLocaleString(原生方法)

Date 对象有一个 toLocaleString 方法,该方法可以格式化日期和时间,同时衍生出另外两种分别获得日期和时间的方法。

  • 字段说明:

    • 日期+时间: toLocaleString()
    • 日期: toLocaleDateString()
    • 时间: toLocaleTimeString()
  • 参数说明 (非必填)

    • 'en-US', { timeZone: 'America/New_York' }
    • en-US : 地区设置(String)
    • { timeZone: 'America/New_York' }: 日期时间格式和时区信息(Object)
  js 复制代码
    let timer = new Date()
    console.log(timer.toLocaleString()) // 日期+时间 2023/5/28 23:07:35
    console.log(timer.toLocaleDateString()) // 日期 2023/5/28 
    console.log(timer.toLocaleTimeString()) // 时间 23:10:31 
  js 复制代码
    // 两个参数:(地区设置,日期时间格式和时区信息)
    console.log(time.toLocaleString('en-US', { timeZone: 'America/New_York' }))
    // 打印结果 5/28/2023, 11:08:39 AM

1.2 字符串方法

string.padStart(字符串长度, 填充元素) : 用填充元素填充string字符串,使得产生的新字符串达到所设置的长度(参数一:字符串长度)。

  • padStart 从原字符串左侧开始填充
  • padEnd 从原字符串右侧开始填充
  js 复制代码
    let str = 'str'
    str.padStart(5,'0') // "00str"
    
    // 不指定填充元素时,以空字符串填充
    str.padStart(5) // "  abc" 
    // 填充元素超出指定长度时,从左->右对填充元素截取
    str.padStart(6,'123465'); // "123str"
    // 原字符串长度大于设定长度时,以原字符串长度为准 不截断原字符串
    str.padStart(2); // "str"

1) 利用字符串进行日期格式化

  js 复制代码
  console.log(time.getFullYear().toString().padStart(4, '0')) // 年 2023
  console.log((time.getMonth() + 1).toString().padStart(2, '0')) // 月 05
  console.log(time.getDate().toString().padStart(2, '0')) // 日 29
  console.log('星期' + (time.getDay() === 0 ? 7 : time.getDay())) // 周 星期1
  console.log(time.getHours().toString().padStart(2, '0')) // 时 01
  console.log(time.getMinutes().toString().padStart(2, '0')) // 分 19
  console.log(time.getSeconds().toString().padStart(2, '0')) // 秒 55

2) 格式化函数封装

  js 复制代码
    let time = new Date()
    // 定义格式化封装函数
    function formaData(timer) {
        const year = timer.getFullYear()
        const month = timer.getMonth() + 1 // 由于月份从0开始,因此需加1
        const day = timer.getDate()
        const hour = timer.getHours()
        const minute = timer.getMinutes()
        const second = timer.getSeconds()
        return `${pad(year, 4)}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`
    }
    // 定义具体处理标准
    // timeEl 传递过来具体的数值:年月日时分秒
    // total 字符串总长度 默认值为2
    // str 补充元素 默认值为"0"
    function pad(timeEl, total = 2, str = '0') {
        return timeEl.toString().padStart(total, str)
    }
    // 调用函数
    console.log(formaData(time)) // 2023-05-29 00:30:19

1.3 第三方库

除了以上方法外,还有很多第三方库可以用来格式化日期时间,最常用的主要为 Moment.js

1)安装 Moment.js

  js 复制代码
    npm install moment

2)导入 Moment.js 模块(main.js)

  js 复制代码
    import moment from 'moment';
    Vue.prototype.$moment = moment

3)格式化时间

  js 复制代码
// `this.$moment()` 输出当前时间的moment对象
console.log(this.$moment().format('YYYY-MM-DD HH:mm:ss')); // 2023-05-29 00:30:19

其他处理方法

2.1 时间戳

date 时间戳(毫秒数):

  • 获取date总的毫秒数,不是当前时间的毫秒数,而是距离1970年1月1日过了多少毫秒数。

  • 获取方法:

    • valueof( ) 、 getTime( )
    • const timer = + new Date() 常用
    • Date.now( ) 低版本浏览器打不开
      js 复制代码
    let date = new Date();
    // 写法一
    console.log(date.valueOf()); //现在时间距离1970.1.1的毫秒数
    console.log(date.getTime());
    
    // 写法二
    let date = +new Date(); 
    console.log(date); //返回当前总的毫秒数
    
    // 写法三
     console.log(Date.now()); // H5新增 低版本浏览器打不开
    

倒计时函数封装

  js 复制代码
    function countDown(time) {
        let dateNow = +new Date(); // 获取当前时间的毫秒数
        let dateOver = +new Date(time); // 获取目标时间的毫秒数
        let gapTime = (dateOver - dateNow) / 1000 // 由毫秒得到秒
        let s = pad(parseInt(gapTime % 60)); // 秒数
        let m = pad(parseInt(gapTime / 60 % 60)); // 分钟数
        let h = pad(parseInt(gapTime / 60 / 60 % 24)); // 小时数
        let d = pad(parseInt(cha / 60 / 60 / 24)); // 天数
        return d + '天' + h + '小时' + m + '分钟' + s + '秒';
    }
    
    // 时间标准的处理函数
    function pad(timeEl, total = 2, str = '0') {
        return timeEl.toString().padStart(total, str)
    }
    
    // 调用函数
    console.log(countDown('2122-5-19 8:00:00'));

作者:sevenBoy
链接:https://juejin.cn/post/7238199999732711481
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:console,log,JavaScript,js,date,let,Date,格式化
From: https://www.cnblogs.com/Alex80/p/17832118.html

相关文章

  • JavaScript slice 方法用法与实例解析
    在JavaScript中,slice()是一个常用的数组方法,用于从现有数组中提取一部分元素,然后返回一个新的数组。它是一个非常有用的工具,可以帮助你在不改变原始数组的情况下操作数组的子集。本文将介绍slice()的基本概念、使用方法、实践案例和互动练习,以帮助你更好地理解和掌握这一功能......
  • 数据库 常用,字符串类型 数据转换成date 类型数据
      数据库中 时间是用:VARCHAR2  字符串类型数据:20231226  来显示 '20231226'char字符串转换成date类型时间selectto_date(字段名,'yyyy-MM-dd')fromxx转换后,显示成:'2023-12-2600:00:00.000'  ......
  • python datetime对象转成字符串类型str
    ptrada=dbutil.select(f"selecttrade_datefrom...")print(type(ptrada),ptrada)    # <class'list'>[(datetime.datetime(2023,8,1,0,0),)]一般从数据库中取到的日期都是datetime对象数据结构pretra=ptrada[0][0]    print(type(pretra ),pr......
  • JavaScript - js生成 txt 文件
    JavaScript-js生成txt文件/***方法定义*/functiondownload(filename,text){varelement=document.createElement('a');element.style.display='none';varcontent=encodeURIComponent(text);element.setAttribute('href&#......
  • kali linux系统下格式化硬盘/U盘
    首先点击虚拟机左上角,搜素GParted工具:打开该工具后,将磁盘切换至要格式化的设备:切换完成后,右键磁盘的未分配区域,选择New在createnewpartition对话框中,可以拖拽要格式化的磁盘边界:还可以选择filesystem格式:修改卷标后,点击Add:最后点击√选择Applied:待进......
  • JavaScript 事件的类型
    单击事件:当用户单击HTML元素时,会触发单击事件,这对于创建响应式和交互式界面至关重要。它们经常用于按钮单击或链接导航等操作,从而增强整体用户体验。鼠标事件:鼠标事件捕获涉及鼠标的用户操作,例如在元素上移动(鼠标悬停)、离开元素(鼠标移出)。为悬停效果或复杂的拖放交互等功能提供......
  • Mac Os VS Code 无法升级Cannot update while running on a read-only volume.
    macOSVSCode无法升级,提示“Cannotupdatewhilerunningonaread-onlyvolume“错误提示错误如下:Cannotupdatewhilerunningonaread-onlyvolume.Theapplicationisonaread-onlyvolume.Pleasemovetheapplicationandtryagain.Ifyou’reonmacOSSierr......
  • Nessus 10.6 Auto Installer for macOS Sonoma (updated Nov 2023)
    Nessus10.6AutoInstallerformacOSSonoma(updatedNov2023)发布Nessus试用版自动化安装程序,支持macOSSonoma、RHEL9和Ubuntu22.04请访问原文链接:https://sysin.org/blog/nessus-auto-install-for-macos/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org......
  • JavaScript使用JS从JSON获取信息并遍历输出到网页展示信息------前端
    遍历JSON获取数据<!DOCTYPEhtml><!--这是HTML的注释--><htmllang="en"id="myHtml"> <head> <!--这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码--> <metacharset="UTF-8"> <metaname="viewport"......
  • JavaScript--tomcat的下载和使用
     tomcat的配置 项目打包经常打包成war包,war包放到webspps中可以自动解压 ......