获取当前时间并计时

本文介绍如何在Vue项目中封装一个获取当前时间并进行计时的函数。函数在页面加载时启动,离开页面时销毁定时器。通过自定义时间格式以满足不同项目需求,将工具函数放在`src/utils/index.js`中,方便其他页面引用和调用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

封装函数----

methods:{
                //获取当前时间
                getDate(){
                    let that = this
                    this.timer=setInterval(function(){
                        let dt = new Date();
                        let days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                        let y = dt.getFullYear();
                        let mt = dt.getMonth() + 1;
                        let day = dt.getDate();
                        let week = days[dt.getDay()];
                        let h = dt.getHours();
                        let m = dt.getMinutes()>=10?dt.getMinutes():('0'+dt.getMinutes());
                        let s = dt.getSeconds()>=10?dt.getSeconds():('0'+dt.getSeconds());
                        that.nowTime = y + "年" + mt + "月" + day + "日" +week ;
                        that.hms=h + ":" + m + ":" + s
                    },1000)
                }
       }

页面进入即调此函数

created(){
	this.getDate()
}

离开页面前销毁定时器

            beforeDestroy() {
                if (this.timer) {
                    clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
                }
          }

html部分-----

        <div id="nowDate">
            <span style="margin-right: 10px;">{{nowTime}}</span>
            <span >{{hms}}</span>
        </div>

显示效果-----

在这里插入图片描述
根据项目需求,在getDate中自定义时间格式

补充-----
单独封装工具类函数,如在vue中使用
src/utils/index.js

export function dateFormat(date, newDate) {
    let dt = date;
    let days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    let y = dt.getFullYear();
    let mt = (dt.getMonth() + 1) >= 10 ? (dt.getMonth() + 1) : ('0' + (dt.getMonth() + 1));
    let day = dt.getDate() >= 10 ? dt.getDate() : ('0' + dt.getDate());
    let week = days[dt.getDay()];
    let h = dt.getHours() >= 10 ? dt.getHours() : ('0' + dt.getHours());
    let m = dt.getMinutes() >= 10 ? dt.getMinutes() : ('0' + dt.getMinutes());
    let s = dt.getSeconds() >= 10 ? dt.getSeconds() : ('0' + dt.getSeconds());
    let outDate = `${y}-${mt}-${day} ${h}:${m}:${s}`
    newDate = outDate
    return newDate
}

页面文件引入
import { dateFormat } from ‘@/utils’
调用

    // 时间变化
    timeChange (e) {
      console.log('选择的时间')
      console.log(e)
      console.log('处理后的时间')
      let newDate = ''
      console.log(dateFormat(e, newDate ))
    }

在这里插入图片描述

搬运vue-admin-element上的源码

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
    return value.toString().padStart(2, '0')
  })
  return time_str
}

格式化时间转换成时间戳

new Date().getTime()        //当天时间戳
new Date('2020-03-09').getTime()    //某天时间戳

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值