Desarrollado un tiempo real de instrucciones de conversión v-tiempo

efecto:

requisitos:

Hace 1 minuto, la pantalla 'sólo'.

Hace 1 día ~ 1 hora, 'hace xx minutos a una pantalla.

De 1 hora a 1 día, 'xx horas hace visualización.

Entre el 1 día a 1 mes (31 días), la pantalla 'xx hace días'.

Más de un mes, muestran 'xx xx xx días'.

<div id="app" v-cloak>
	<div v-time="timeNow"></div>
	<div v-time="timeBefore"></div>
</div>
 var Time = {
        //获取当前时间戳
        getUnix:function(){
            var date = new Date();
            return date.getTime();
        },
        //获取今天0点0分0秒的时间戳
        getTodayUnix:function(){
            var date = new Date();
            date.setHours(0);
            date.setMinutes(0);
            date.setSeconds(0);
            date.setMilliseconds(0);
            return date.getTime();
        },
        //获取今年1月1日0点0分0秒的时间戳
        getYearUnix:function(){
            var date = new Date();
            date.setMonth(0);
            date.setDate(1);
            date.setHours(0);
            date.setMinutes(0);
            date.setSeconds(0);
            date.setMilliseconds(0);
            return date.getTime();
        },
        //获取标准年月日
        getLastDate:function(time){
            var date = new Date(time);
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            return date.getFullYear() + '-' + month + '-' + day;
        },
        //转换时间
        getFormatTime:function(timestamp){
            var now = this.getUnix(); // 当前时间戳
            var today = this.getTodayUnix(); // 今天0点的时间戳
            var year = this.getYearUnix(); // 今年0点的时间戳
            var timer = (now - timestamp) / 1000; // 转换为秒级时间戳
            var tip = '';

            if(timer <= 0){
                tip = '刚刚';
            }else if(Math.floor(timer/60) <= 0){
                tip = '刚刚';
            }else if(timer < 3600){
                tip = Math.floor(timer/60) + '分钟前';
            }else if(timer >= 3600 && (timestamp - today >= 0)){
                tip = Math.floor(timer/3600) + '小时前';
            }else if(timer/86400 <= 31){
                tip = Math.ceil(timer/86400) + '天前';
            }else{
                tip = this.getLastDate(timestamp);
            }
            return tip;
        }
    }
    Vue.directive('time',{
          bind:function(el,binding){
             el.innerHTML = Time.getFormatTime(binding.value);
             el.__timeout__ = setInterval(function(){
                 el.innerHTML = Time.getFormatTime(binding.value)
			 },60000)
		  },
		  unbind:function(el){
             clearInterval(el.__timeout__);
             delete el.__timeout__;
		  }
    })
    var app = new Vue({
        el:'#app',
        data:{
            timeNow:(new Date()).getTime(),
            timeBefore:6834345656585
        }
    })

 

Publicado 54 artículos originales · ganado elogios 8 · Vistas a 70000 +

Supongo que te gusta

Origin blog.csdn.net/yang295242361/article/details/104511327
Recomendado
Clasificación