html5获取当前日期 前端获取当前日期

在前端开发过程中，有时候会需要获取当前时间和已知时间做对比的需求，也有单纯的获取当前时间然后传给后台，还有各种需要把获取到的当前时间转化成特定的时间格式传给后台，这虽然不是一个复杂的操作，但是不同的产品需求不一样，有时候还需要转时区。总之，就是各种稀奇古怪的需求，那么本篇博文就来分享一下关于在前端开发过程中获取当前时间或者日期相关的各种操作。

首先来了解一下获取当前日期和时间的原理：JS通过Date对象来获取当前日期和时间，通过使用Date()方法来获取系统当前时间，定义和用法如下所示：

1、语法

Date()
2、用法

eg：获取并输出当前的日期和时间，如下所示：

具体的一些获取时间不同类型的方法如下所示：

var date = new Date(); //Date() 方法可返回当天的日期和时间
date.getYear(); //获取当前年份
date.getFullYear(); //获取完整的年份(4位,1970-xxxx)
date.getMonth(); //获取当前月份(0-11，0代表1月，11代表12月)
date.getDate(); //获取当前日期对象是几号(1-31)
date.getDay(); //获取当前星期X(0-6，0代表星期天)
date.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
date.getHours(); //获取当前小时数(0-23)
date.getMinutes(); //获取当前分钟数(0-59)
date.getSeconds(); //获取当前秒数(0-59)
date.getMilliseconds(); //获取当前毫秒数(0-999)
date.toLocaleDateString(); //获取当前日期
var myDate=date.toLocaleTimeString(); //获取当前时间(eg: 上午 10:31:52)
var myDate2=date.toTimeString(); //获取当前时间(eg: 10:31:52 GMT+0800(中国))
date.toLocaleString( ); //获取日期与时间
date.toLocaleDateString(); //2021/3/26
date.toDateString(); //Thu Mar 26 2021
getTime() //获取当前日期对象的时间戳(方法一)
date.valueof() //获取当前日期对象的时间戳(方法二)
Data.now() //获取当前日期对象的时间戳(方法三)

具体实际案例如下所示：

步骤一：创建一个公用的获取年月日的方法

//取年月日
function getDateByType(type) {
  var date = new Date();
  var myyear = date.getFullYear();
  var mymonth = date.getMonth() + 1;
  var myweekday = date.getDate();
  if (mymonth < 10) {
    mymonth = '0' + mymonth;
  }
  if (myweekday < 10) {
    myweekday = '0' + myweekday;
  }
  if (type === "year") {
    return myyear;
  } else if (type === "month") {
    return myyear + '-' + mymonth;
  }
  return myyear + '-' + mymonth + '-' + myweekday;
}

步骤二：直接在需要获取年月日的地方调用步骤一的方法即可

1、使用场景一：

created() {
    this.year = this.getDateByType('year').toString();  //获取当前年份
  },

2、使用场景二：

<div class="x-footer">
      <div class="x-footer-l">
      </div>
      <div class="x-footer-r">
        某某科技公司{{getDateByType}}版权所有
      </div>
    </div>

  data(){
      return {
        getYear: this.getDateByType('year').toString(),
      }
    },