Vue的实时时间转换Demo

Vue的实时时间转换Demo

time.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间转换指令</title>
</head>
<body>

<div id="app" v-cloak>
    <div v-time="timeNow"></div>
    <div v-time="timeBefore"></div>
</div>

<script src="../js/vue.js"></script>
<script src="./time.js"></script>
<script src="./index.js"></script>
</body>
</html>

index.js

var app = new Vue({
    el:'#app',
    data:{
        timeNow:(new Date()).getTime(),
        timeBefore:1488930695721
    }
});

time.js

var time= {
    //获取当前时间戳
    getUnix: function () {
        var data = new Date();
        return data.getTime();
    },

    //获取今天0点0分0秒的时间戳
    getTodayUnix: function () {
        var data = new Date();
        data.setHours(0);
        data.setMinutes(0);
        data.setSeconds(0);
        data.setMilliseconds(0);
        return data.getTime();
    },

    //获取今年1月1日0点0分0秒的时间戳
    getYearUnix: function () {
        var data = new Date();
        data.setMonth(0);
        data.setDate(1);
        data.setHours(0);
        data.setMinutes(0);
        data.setSeconds(0);
        data.setMilliseconds(0);//毫秒
        return data.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();
        var year = this.getYearUnix();
        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_;

    }
    
    
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

前端面试大坑实录

找工作嘛,要面试;公司招人嘛,也要面试。你面试是答题,公司招人是出题;双方都是陌生的,怎么凑成一对呢?就要靠面试题来牵线。在这个过程中呢,自然免不了要通过面试题...

9820
来自专栏生信宝典

R语言学习 - 图形设置中英字体

绘制生信宝典调查总结文中的柱状图时,出现了中文乱码,就搜索了下解决方案,记录如下。 修改图形的字体 ggplot2中修改图形字体。 # 修改坐标轴和legend...

40280
来自专栏lonelydawn的前端猿区

datepicker小插件(日期时间 & 日期 & 月份)

一个简单的日期时间选择小插件,引用 jquery.js  & bootstrap.css (需要图标文件) 如果路过的 朋友只是为了 找一个 可以直接引入 项目...

26850
来自专栏hightopo

基于 HTML5 Canvas 的 3D 模型贴图问题

15520
来自专栏天天

网页image资源如何判断加载完毕

在之前的工作中,越大过这样的场景,在做banner图的时候,使用的定位,实现图片的淡入淡出和放大效果,

19810
来自专栏Golang语言社区

【Go 语言社区】GO语言练习:网络编程 ICMP 示例

1、代码 2、编译及运行 ---- 1、Go语言网络编程:ICMP示例代码 icmptest.go 1 package main 2 3 import...

36670
来自专栏糊一笑

IScroll的那些事——内容不足时下拉刷新

之前项目中的列表是采用的IScroll,但是在使用IScroll有一个问题就是:当内容不足全屏的时候,是木有办法往下拉的,这样就达不到刷新的目的了。【这是本人工...

453110
来自专栏GIS讲堂

Arcgis for Javascript之featureLayer图和属性的互操作

说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果:

72320
来自专栏進无尽的文章

实践-小细节 II

button.titleLabel.textAlignment = NSTextAlignmentLeft; 这行代码是没有效果的,这只是让标签中的文本左对齐,...

9420
来自专栏Java成神之路

Java企业微信开发_03_自定义菜单

这里需要格外注意的是,企业微信中请求包的数据是Json字符串格式的,而不是xml格式。关于json序列化的问题请参考上一节   Java企业微信开发_03_通讯...

17120

扫码关注云+社区

领取腾讯云代金券