前端常见的时间转换方法以及获取当前时间方法小结

 更新时间:2024年01月22日 15:22:17   作者:起名时在学Aiifox  
在做开发时会对不同的时间格式进行转换,下面这篇文章主要给大家介绍了关于前端常见的时间转换方法以及获取当前时间方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

1、获取当前年月日时间

getCurrentDate() {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // JavaScript的月份是从0开始的,所以需要加1
  const day = date.getDate();
  const hours = date.getHours().toString().padStart(2, '0'); // 补零
  const minutes = date.getMinutes().toString().padStart(2, '0'); // 补零			

  this.currentDate = `${year}-${month}.${day}-${hours}:${minutes}`;
			},

2、将时间戳转换为指定格式

function formatTime(time, format) {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hour = date.getHours().toString().padStart(2, '0');
  const minute = date.getMinutes().toString().padStart(2, '0');
  const second = date.getSeconds().toString().padStart(2, '0');

  let result = '';

  switch (format) {
    case 'yyyy-MM-dd':
      result = `${year}-${month}-${day}`;
      break;
    case 'yyyy/MM/dd':
      result = `${year}/${month}/${day}`;
      break;
    case 'yyyy年MM月dd日':
      result = `${year}年${month}月${day}日`;
      break;
    case 'HH:mm:ss':
      result = `${hour}:${minute}:${second}`;
      break;
    default:
      result = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  }

  return result;
}

3、vue中时间转换插件:moment.js

官网:Moment.js 中文网

(1)下载安装包

npm install moment --save

(2)在main.js中引入 

import moment from 'moment'
Vue.prototype.$moment = moment

(3)使用

this.$moment('需要转换的时间').format('YYYY-MM-DD')  

总结 

到此这篇关于前端常见的时间转换方法以及获取当前时间方法的文章就介绍到这了,更多相关前端时间转换及获取当前时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS字典Dictionary类定义与用法示例

    JS字典Dictionary类定义与用法示例

    这篇文章主要介绍了JS字典Dictionary类定义与用法,结合实例形式分析了javascript字典Dictionary的定义、添加、移除、统计等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 微信小程序bindtap与catchtap的区别详解

    微信小程序bindtap与catchtap的区别详解

    本文主要介绍了微信小程序bindtap与catchtap的区别详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解JS设计模式之桥接模式用法

    详解JS设计模式之桥接模式用法

    javascript桥接桥接设计模式(Bridge Pattern)是一种结构型设计模式,它用于将抽象部分与其具体实现部分分离,使它们可以独立地变化,本文将通过代码示例详解的给大家介绍一下JS桥接模式,需要的朋友可以参考下
    2023-08-08
  • 根据输入邮箱号跳转到相应登录地址的解决方法

    根据输入邮箱号跳转到相应登录地址的解决方法

    本文分享了基于javascript实现的根据输入邮箱号跳转到相应登录地址的具体实例代码,需要的朋友一起来看下吧
    2016-12-12
  • js使用eval解析json(js中使用json)

    js使用eval解析json(js中使用json)

    eval的用法eval函数接收一个参数s,如果s不是字符串,则直接返回s。否则执行s语句,下面给出eval解析json的示例
    2014-01-01
  • js使用child_process模块操作cmd命令

    js使用child_process模块操作cmd命令

    这篇文章主要给大家介绍了关于js使用child_process模块操作cmd命令的相关资料,在JavaScript中执行CMD命令非常灵活,可以执行任何CMD命令,例如:复制、移动、删除文件等等,需要的朋友可以参考下
    2024-01-01
  • 根据地区不同显示时间的javascript代码

    根据地区不同显示时间的javascript代码

    根据地区不同显示时间的javascript代码...
    2007-08-08
  • js中的屏蔽的使用示例

    js中的屏蔽的使用示例

    本文为大家介绍下js中的屏蔽的应用;屏蔽网页内容选中、剪切、复制及拷屏总之你能想象的应该都有,感兴趣的朋友可以参考下,希望对大家学习js有所帮助
    2013-07-07
  • javascript移动的盒子效果代码

    javascript移动的盒子效果代码

    不错的应用,用方向键控制小方块的移动
    2008-09-09
  • JS基于对象的特性实现去除数组中重复项功能详解

    JS基于对象的特性实现去除数组中重复项功能详解

    这篇文章主要介绍了JS基于对象的特性实现去除数组中重复项功能,结合实例形式较为详细的分析了js基于key值唯一性实现数组去重的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-11-11

最新评论