vue js 封装方法获取当前时间(年月日时分秒)格式

18 篇文章 2 订阅
14 篇文章 1 订阅

方法获取格式化时间函数

formatDate (fmt) {
  const date = new Date()
  const o = {
    'Y+': date.getFullYear(),
    'M+': date.getMonth() + 1, // 月
    'D+': date.getDate(), // 日
    'h+': date.getHours(), // 时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    W: date.getDay() // 周
  }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, () => {
        if (k === 'W') {
          // 星期几
          const week = ['日', '一', '二', '三', '四', '五', '六']
          return week[o[k]]
        } else if (k === 'Y+' || RegExp.$1.length === 1) {
          // 年份 or 小于10不加0
          return o[k]
        } else {
          return ('00' + o[k]).substr(('' + o[k]).length) // 小于10补位0
        }
      })
    }
  }
  return fmt
}

使用

formatDate('YY') // 2022
formatDate('YY-MM')	// 2022-06
formatDate('YY-MM-DD')	// 2022-06-02
formatDate('YY-MM-DD hh:mm:ss')	// 2022-06-02 10:02:23
formatDate('星期W')	// 星期四

在这里插入图片描述
扩展
1.得到当前(年月日)

getNowMonths() {
      let timeOne = new Date();
      let year = timeOne.getFullYear();
      let month = timeOne.getMonth() + 1;
      let day = timeOne.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`;
      return NOW_MONTHS_AGO;
    }

2.得到三个月前的(年月日)

getThreeMonths() {
      let timeOne = new Date();
      let year = timeOne.getFullYear();
      let month = timeOne.getMonth() + 1;
      let day = timeOne.getDate();

      // 计算3个月后的月份
      let ThreeMonths = month - 3;

      // 如果小于 0 说明是去年
      if (ThreeMonths <= 0) {
        year = year - 1;
      }
      // 如果 等于 -2 说明当前月是 1 月份 所以三个月前是去年 10月
      if (ThreeMonths === -2) {
        ThreeMonths = 10;
      }
      // 如果 等于 -1 说明当前月是 2 月份 所以三个月前是去年 11月
      if (ThreeMonths === -1) {
        ThreeMonths = 11;
      }
      // 如果 等于 0 说明当前月是 3 月份 所以三个月前是去年 12月
      if (ThreeMonths === 0) {
        ThreeMonths = 12;
      }
      ThreeMonths = ThreeMonths < 10 ? "0" + ThreeMonths : ThreeMonths;

      // 获取当前的时间的日期字符串
      // **如果天数的值为零,则默认返回当前月份的最后一天
      let timeTow = new Date(year, ThreeMonths, 0);
      // 获取三个月前的最后一天
      let ThreeMonthsDay = timeTow.getDate();
      // 判断如果当前月份的天数大于三个月前的天数时,则当前天数等于三个月前的天数
      if (day > ThreeMonthsDay) {
        day = ThreeMonthsDay;
      }
      day = day < 10 ? "0" + day : day;
      // 格式化时间
      // const THREE_MONTHS_AGO = `${year}/${ThreeMonths}/${day}`

      // 生成时间戳  需要的话做
      //const THREE_STAMP = new Date(THREE_MONTHS_AGO).getTime()
      const THREE_STAMP = `${year}-${ThreeMonths}-${day}`;
      return THREE_STAMP;
    },

进阶版封装方法

function getDate(type = null, number = 0) {
      var nowdate = new Date();
      switch (type) {
        case "day": //取number天前、后的时间
          nowdate.setTime(nowdate.getTime() + 24 * 3600 * 1000 * number);
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = `${y}-${m}-${d}`;
          break;
        case "week": //取number周前、后的时间
          var weekdate = new Date(nowdate + 7 * 24 * 3600 * 1000 * number);
          var y = weekdate.getFullYear();
          var m = weekdate.getMonth() + 1;
          var d = weekdate.getDate();
          var retrundate = `${y}-${m}-${d}`;
          break;
        case "month": //取number月前、后的时间
          nowdate.setMonth(nowdate.getMonth() + number);
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = `${y}-${m}-${d}`;
          break;
        case "year": //取number年前、后的时间
          nowdate.setFullYear(nowdate.getFullYear() + number);
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = `${y}-${m}-${d}`;
          break;
        default: //取当前时间
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = `${y}-${m}-${d}`;
      }
      return retrundate;
    }

测试
console.log(getDa)

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我会尽力回答你的问题。 首先,我们需要了解Vue.js是什么。Vue.js是一个轻量级的JavaScript框架,用于构建交互式的Web界面。它与Angular和React类似,但相比之下,Vue.js更加简单易用,因此被广泛应用于Web开发中。 接下来,我们可以通过Vue.js提供的各种API和路由来实现用户登录注册程序设计。具体步骤如下: 1. 引入Vue.jsVue Router 首先,在HTML文件中引入Vue.jsVue Router: ``` <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> ``` 2. 创建Vue应用 接下来,我们需要创建一个Vue应用: ``` const app = new Vue({ el: '#app', router: router, data: { // ... }, methods: { // ... } }) ``` 在这个应用中,我们使用了Vue Router,它是Vue.js提供的一个路由管理器,用于管理应用的不同页面。 3. 创建登录和注册组件 接下来,我们需要创建登录和注册组件。这些组件将用于在应用中显示登录和注册表单。 ``` const LoginComponent = { template: ` <div> <h2>登录</h2> <form> // ... </form> </div> ` } const RegisterComponent = { template: ` <div> <h2>注册</h2> <form> // ... </form> </div> ` } ``` 在这些组件中,我们可以编写表单代码,用于收集用户的登录和注册信息。 4. 定义路由 接下来,我们需要定义路由。路由将用于将URL映射到不同的组件上。 ``` const router = new VueRouter({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: LoginComponent }, { path: '/register', component: RegisterComponent } ] }) ``` 在这个路由定义中,我们将根URL重定向到登录页面,然后定义了两个路由,一个用于登录,一个用于注册。 5. 在应用中使用路由 最后,我们需要在应用中使用路由。我们可以使用Vue.js提供的`<router-view>`标签来显示当前路由的组件。 ``` <div id="app"> <router-view></router-view> </div> ``` 现在,我们已经完成了用户登录注册程序的设计。用户可以通过浏览器访问/login和/register URL来访问登录和注册页面,然后填写表单进行登录和注册。 以上就是使用Vue.js各种API及路由实现用户登录注册程序设计的步骤。希望能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值