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

Vue的实时时间转换Demo的更多相关文章

  1. 用Vue开发一个实时性时间转换功能,看这篇文章就够了

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...

  2. vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss

    vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...

  3. vue.js实战——vue 实时时间

    created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用. mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里 ...

  4. vue ele 日期时间格式限制不能早于当天,时间转换成时间戳 进行比较

    <el-date-picker             value-format="yyyy-MM-dd HH:mm:ss"             v-model=&quo ...

  5. C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志

    C#实现多级子目录Zip压缩解压实例 参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩, ...

  6. UTC 时间转换 All In One

    UTC 时间转换 All In One http://www.timebie.com/cn/stduniversal.php UTC 时间 世界的每个地区都有自己的本地时间,在 Internet 及无 ...

  7. PostgreSQL 时间转换

    背景:最近频繁使用到时间转换相关的操作,特此小记. 1.实时取最近24小时内数据. select now() - interval '24h'; 通过sql获得符合要求的时间段,当做where条件即可 ...

  8. [jquery]将当前时间转换成yyyymmdd格式

    如题: function nowtime(){//将当前时间转换成yyyymmdd格式 var mydate = new Date(); var str = "" + mydate ...

  9. MySQL 日期、时间转换函数

    MySQL 日期.时间转换函数:date_format(date,format), time_format(time,format) 能够把一个日期/时间转换成各种各样的字符串格式.它是 str_to ...

随机推荐

  1. HDU 1061 Rightmost Digit (快速幂取模)

    题意:给定一个数,求n^n的个位数. 析:很简单么,不就是快速幂么,取余10,所以不用说了,如果不会快速幂,这个题肯定是周期的, 找一下就OK了. 代码如下: #include <iostrea ...

  2. js继承——扩展Object方式实现继承

    function Parent(name,sex){ this.name = name; this.sex = sex; this.sayName = function(){ console.log( ...

  3. dos常用命令使用说明

    cd 改变当前目录 sys 制作DOS系统盘 copy 拷贝文件 del 删除文件 deltree 删除目录树 dir 列文件名 diskcopy 制磁盘 edit 文本编辑 format 格式化磁盘 ...

  4. jacob将word转换为html

    1.导包jacob.jar 2.将下面两个文件复制到C:\Windows\System32路径下 3.代码如下 // 8 代表word保存成html public static final int W ...

  5. hdu3333 Turing Tree 2016-09-18 20:53 42人阅读 评论(0) 收藏

    Turing Tree Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  6. underscore functions

    // 创建一个用于设置prototype的公共函数对象 var ctor = function() {}; 1..bind(function, object, [*arguments]) :绑定fun ...

  7. java web eclipse中项目的加载过程

    java web eclipse中项目的加载过程: Tomcat默认从WEB-INF/目录下加载资源,Eclipse在发布程序的时候,并没有把User Libraries的相关资源拷贝到WEB-INF ...

  8. Fig 7.2.4 & Fig 7.3.2

    Fig 7.2.4 \documentclass[varwidth=true, border=2pt]{standalone} \usepackage{tkz-euclide} \begin{docu ...

  9. WebApi使用JWT认证(一)

    这是第一部:先实现NetFramework上的WebApi使用JWT认证 1.VS新建一个WebApi项目 2.项目右键----管理Nuget程序包----找到JWT,然后安装 3.Model文件夹下 ...

  10. Alwayson--与复制的影响

    在主副本上建立复制后,复制的事务日志读取代理(log reader)不会读取尚未同步到辅助副本的日志,因为辅助副本可能在下一时刻转化成为主副本,变为新的复制发布服务器,为此需要保证复制处理的日志总慢于 ...