jQuery时间轴播放(原创)

所属分类:输入-日期和时间

 33515  322  查看评论 (11)
分享到微信朋友圈
X
jQuery时间轴播放(原创) ie兼容10

更新时间:2018/10/26 上午11:30:12

更新说明:
1.修复一些逻辑上的错误
2.配置参数和返回值的优化,时间部分都改为date对象
3.新增一些配置参数


发布时间:2018-8-7 0:04

使用方法

1.先引入样式和js

<link rel="stylesheet" type="text/css" href="css/timePlay.css"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/timePlay.js" type="text/javascript" charset="utf-8"></script>

2.写一个时间轴容器

<div id="timePlay"></div>

3.调用插件

var timeplay = new TimePlay({
    speed: 2000, //播放速度
    startDate: 20180701, //开始日期
    endDate: 20190131, //结束日期
    timeUnitControl: true, //是否显示时/天切换控件
    onClickChangeEnd: function() { //点击后回调
        //获取点击的时间
        var hour = timeplay.curr_day.hour, //小时
            day = timeplay.curr_day.day, //日
            mon = timeplay.curr_day.mon, //月
            year = timeplay.curr_day.year; //年
        console.log(year + "年" + mon + "月" + day + "日" + hour + "时");
    },
    onAnimateEnd: function() { //时间轴动画每次结束回调
        var hour = timeplay.curr_day.hour, //小时
            day = timeplay.curr_day.day, //日
            mon = timeplay.curr_day.mon, //月
            year = timeplay.curr_day.year; //年
        console.log(year + "年" + mon + "月" + day + "日" + hour + "时");
    }
});

4.因为渲染不是瞬间完成,有时候时间到还没完成渲染,这时候就需要延迟一下动画

timeplay.delayAnimation();

待渲染完成后再继续动画

timeplay.continueAnimation();
相关插件-日期和时间

jQuery蓝色发光网站倒计时模板

jQuery蓝色发光网站倒计时模板
  日期和时间
 40123  381

jquery移动端日期选择插件mobiscroll3.0.0

jquery移动端日期选择插件mobiscroll3.0.0APP日期选择器
  日期和时间
 67142  375

jQuery日期时间选择器插件

jQuery日期时间选择器插件
  日期和时间
 78381  425

timeago.js自动将时间戳转换为更易读的时间轴

timeago.js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成如:5分钟前,约3小时前这样的更友好易读的时间轴,而且使用timeago.js无需刷新页面即自动更新页面时间的显示。
  日期和时间
 31810  344

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    xhdn123 0
    2020/10/25 15:28:39
    大佬这个怎么在vue中使用呢急需 回复
    方 樘 ㄟ 0
    2020/4/7 11:04:07
    大神 请问如何改变时间间隔格式 加上分钟和秒钟阿 回复
    Loading... 0
    2020/2/24 20:13:36
    可以循环播放么?
    回复
    路边一野牛 0
    2020/2/15 2:27:36
    大神,要是能设置默认时间和默认hover的显示格式就完美了! 回复
    杨璐 0
    2019/8/14 16:43:19
    大神,我有一个需求,和这个很像,但是你的代码我不知道怎么改一下才能用,你有联系方式吗 ?
        L0
        2019/8/20 11:27:23
        你好,你知道这个项目怎么应用到vue项目中吗
    回复
    俊俊 0
    2019/8/6 19:25:51
    很强!!!感谢啦!!! 回复
    啊耶 0
    2019/4/24 19:40:34
    请叫我蔡小厨?? 0
    2018/11/16 17:32:04
    时间间隔只有几个小时,该怎么播放 ,如果时间段更改,不能刷新 回复
    mdsbri748 0
    2018/8/14 15:54:30
    或什么参数默认选到 本月第一天 回复
    mdsbri748 0
    2018/8/14 15:52:26
    大神 我想 设置就只有当天时间段 我该怎么处理呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复