timeago.js-时间显示插件
注意事项:
1. 时间格式 = “2018-03-02 17:13:00”时,动态获取的时间无法通过 拼接字符串的方法 添加到 dom元素的 datetime属性上,结果为 <div class="time" datetime="2018-03-02"17:13:00></div>,因为中间有空格。如果使用hogan.js模板引擎{{time}}则不存在此问题。
解决办法为:用js动态添加 时间变量 到dom节点的 datetime属性上。
即:<div class="time" datetime=“”></div>;
$(‘.time’).attr('datetime',时间变量);
timeago.js 是一个非常简洁、轻量级、不到 2kb 的很简洁的 Javascript 库,用来将 datetime 时间转化成类似于*** 时间前的描述字符串,例如:“3小时前”。
本地化支持,默认自带中文和英文语言;
之前 xxx 时间前、xxx 时间后;
支持自动实时更新;
支持npm方式和浏览器script方式;
测试用例完善,执行良好;
html:
<div class="time" datetime="2018-03-02 17:13:00"></div>
js:
<script src="https://cdn.bootcss.com/timeago.js/3.0.2/timeago.js"></script>
<script>
// 不自动更新
var timeagoInstance = timeago();// 实例
var time = timeagoInstance.format('2018-03-2 17:13:00','zh_CN');
console.log(time);
// 自动更新
var timeagoInstance = timeago();// 实例
timeagoInstance.render(document.querySelectorAll('.time'),'zh_CN');
</script>
timeago.js-时间显示插件的更多相关文章
- [转载]时间显示插件 flipclock.js
<html> <head> <link rel="stylesheet" href="/assets/css/flipclock.css&q ...
- JS时间扩展插件
前言 原生JS有些没定义的方法只能自己封装了,比如获取现在相隔本年过了几天以及过了多少周,这些都是原JS里没有的方法,现在插件只有一些方法,后期再慢慢扩展 插件使用方法 引用TimeToPack.js ...
- 一款好用的JS时间日期插件layDate
觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
- js时间倒计时
看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...
- 前端 时间个性化 插件 jquery.timeago.js
关键词 : 时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 MM-dd hh:mm 或者 yyyy-MM-dd 前端: <span class="time" ...
- ****timeago.js插件:jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例
前端 时间个性化 插件 jquery.timeago.js 关键词 : 时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 MM-dd hh:mm 或者 yyyy-MM-dd 前端: & ...
- js获取当前时间显示在页面上
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery时间格式插件-moment.js的使用
jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...
随机推荐
- python slots源码分析
上次总结Python3的字典实现后的某一天,突然开窍Python的__slots__的实现应该也是类似,于是翻了翻CPython的源码,果然如此! 关于在自定义类里面添加__slots__的效果,网上 ...
- route add提示: "SIOCADDRT: No such process
解决方法如下: 原因: There are multiple known causes for this error: - You attempted to set a route specific ...
- caffe Python API 之中值转换
# 编写一个函数,将二进制的均值转换为python的均值 def convert_mean(binMean,npyMean): blob = caffe.proto.caffe_pb2.BlobPro ...
- AssetBundle——外部加载资源Asset
几篇很不错的文章 AssetBundle创建到使用入门 全面理解Unity加载和内存管理 实用的创建AssetBundle的脚本 相关资源 相关的共享资源下载 本共享包括创建assetbund ...
- BootStrap的栅格系统的基本写法(布局)
代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...
- mknod命令
mknod - make block or character special filesmknod [OPTION]... NAME TYPE [MAJOR MINOR] option 有用的 ...
- redis关闭保护模式
1. set key出现的报错 在192.168.56.57客户端登录192.168.56.56的redis服务器时,报错如下: [root@localhost src]# ./redis-cli - ...
- python selenium自动化测试之路(1)--分层测试概念、selenium工具介绍
1.分层自动化测试概念 传统的自动化市场更关注产品UI层的自动化测试,而分层的自动化测试倡导产品开发的不同阶段都需要自动化测试 大多公司与研发团队其实是忽略了单元测试与集成测试阶段的自动化测试工作,所 ...
- python中list的底层实现
这里不讨论具体的实现细节,主要是转载这篇文章: 顺序表的原理与python中的list类型. 原文就不贴过来了,总结一下: 确定数据类型的意义在于确定一个数据在内存中占据的空间大小以及如何解释一段内存 ...
- 洛谷 P2077 红绿灯 题解
题目传送门 这道题一秒一秒的扫描一定会超时,所以就用一种O(N)的算法. #include<bits/stdc++.h> using namespace std; ],b[],c[],x= ...