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

 更新时间: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编写trim()函数及正则表达式的运用

    js编写trim()函数及正则表达式的运用

    js中本身是没有trim函数的,不过你可以自己写一个,下面的实现方法是用到了正则表达式,效率不错,并把这三个方法加入String对象的内置方法中去
    2013-10-10
  • 基于JS实现简单的随机抽取幸运员工系统

    基于JS实现简单的随机抽取幸运员工系统

    这篇文章主要为大家详细介绍了基于HTML+JavaScript实现简单的随机抽取幸运员工系统,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-11-11
  • 判断是否安装flash player及当前版本的JS代码

    判断是否安装flash player及当前版本的JS代码

    本文为大家讲述下如何使用jsJS判断是否安装flash player及版本,下面的处理代码或许对大家有所帮助,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • JS实现自定义弹窗功能

    JS实现自定义弹窗功能

    浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。下面小编给大家带来了JS实现自定义弹窗,感兴趣的朋友一起看看吧
    2018-08-08
  • JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法

    JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法

    这篇文章主要介绍了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法,涉及javascript页面元素与事件相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 几款极品的javascript压缩混淆工具

    几款极品的javascript压缩混淆工具

    几款极品的javascript压缩混淆工具...
    2007-05-05
  • layui上传图片到服务器的非项目目录下的方法

    layui上传图片到服务器的非项目目录下的方法

    今天小编就为大家分享一篇layui上传图片到服务器的非项目目录下的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现网络测速的方法详解

    JavaScript实现网络测速的方法详解

    在我们的日常生活中离不开网络,而网络的快慢直接决定了用户的产品使用体验。本文就来带大家了解如何用JavaScript实现网络测速,需要的可以参考一下
    2023-01-01
  • js获取内联样式的方法

    js获取内联样式的方法

    这篇文章主要介绍了js获取内联样式的方法,针对标准浏览器与IE浏览器进行不同的判断与获取,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • JS简单设置下拉选择框默认值的方法

    JS简单设置下拉选择框默认值的方法

    这篇文章主要介绍了JS简单设置下拉选择框默认值的方法,涉及javascript针对页面元素的遍历、查找及设置技巧,需要的朋友可以参考下
    2016-08-08

最新评论