开发一个 实时时间转换指令 v-time

效果:

需求:

1分钟前,显示‘刚刚’。

1分钟前~1个小时,显示‘xx分钟前’。

1小时~1天之间,显示‘xx小时前’。

1天~1个月(31天)之间,显示‘xx天前’。

大于1个月,显示‘xx年xx月xx日’。

<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
        }
    })

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值