js 获取当前时间、时间格式转换

在获取当前时间之前我们先来了解 vue 的两个生命周期函数

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。（请求接口）

mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

所以如果我们的需求是要实时更新当前的时间，代码写在这个 mounted 函数中，实现每秒刷新时间

	created() {
		this.$nextTick(() => {
			this.initialize(); //请求接口
		})
	},
	mounted() {
		
		this.timer = setInterval(() => {
			//获取时间对象
			var dd = new Date();
			//获取年、月、日、时、分、秒
			//月份要加 1
			//月、日、时、分、秒、用三目运算法判断是否小于等于9，是则在数字前面自动补0，否则不处理
			var y = String(dd.getFullYear());
			var m = String(dd.getMonth() + 1 <= 9 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1));
			var d = String(dd.getDate() <= 9 ? '0' + dd.getDate() : dd.getDate());
			var h = String(dd.getHours() <= 9 ? "0" + dd.getHours() : dd.getHours());
			var i = String(dd.getMinutes() <= 9 ? '0' + dd.getMinutes() : dd.getMinutes());
			var s = String(dd.getSeconds() <= 9 ? '0' + dd.getSeconds() : dd.getSeconds());
			var wkday = dd.getDay();  //获取今天是星期几
			var time = y + "年" + m + "月" + d + "日" + "   " + h + ":" + i + ":" + s + "  " + "星期" + "日一二三四五六".charAt(wkday);
			console.log(time)
		}, 1000)
		
	},
	// 在Vue实例销毁前，清除我们的定时器
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer); 
		}
	},

如果你不想实时更新时间，只想显示当前时间，可以封装一个函数，获取时间的代码放进去，去掉setInterval()定时器，然后拼接完成字符串后 return 返回出去，调用这个函数就可以返回当前时间

时间格式转换

这是后台接口返回的数据格式 

将日期转换为指定的格式：比如转换成 年月日时分秒 这种格式：yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd

可以为Date原型添加如下的方法：

Date.prototype.format = function(fmt) { 
     var o = { 
        "M+" : this.getMonth()+1,                 //月份 
        "d+" : this.getDate(),                    //日 
        "h+" : this.getHours(),                   //小时 
        "m+" : this.getMinutes(),                 //分 
        "s+" : this.getSeconds(),                 //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S"  : this.getMilliseconds()             //毫秒 
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
     for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
    return fmt; 
}        

我们在拿到数据接口后，进行循环遍历，调用刚才我们为Date原型添加的format()方法，参数为你想要的时间格式，最后赋值给数组中指定的字段，更新视图

newRptdatas.suppDelayTable.map(v=>{

            var oldTime = (new Date(v.date)).getTime();

            //var curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");

             var curTime = new Date(oldTime).format("yyyy-MM-dd");

             v.date = curTime;

        })

 

 将 "时间戳" 转换为 "年月日" 的格式

可以将Date( )括号中的参数改为后台接口请求到的时间戳，这里只是做个例子

        var da = 1602233166999;
        da = new Date(da);
        var year = da.getFullYear()+'年';
        var month = da.getMonth()+1+'月';
        var date = da.getDate()+'日';
        var time = year+""+month+""+date;
        console.log(time);

对时间格式进行修改 将 - 横杆改为 / 斜杆  去掉20 保留当前的年份，去掉时间的毫秒

时间为  add_time: "2022-07-08 16:19:49"

res.data 是后台返回的数组

res.data.forEach(v=>{
              let add_time = v.add_time.replace(/-/g,"/")
              v.add_time = add_time.substring(2,16)
          })

效果