jQuery时间轴播放(原创)

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

 33795  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();
相关插件-日期和时间

js css3扁平化APP图标时钟动画

js css3扁平化APP图标时钟动画
  日期和时间
 25467  327

日程表插件(fullcalendar),自定义任务显示、切换视图

加载事件数据、能切换年月视图、控制任务的自定义显示数量和效果、单元格绑定事件和元素
  日期和时间
 41738  317

jquery日历控件datePicker

jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表
  日期和时间
 66796  370

带有标记的日期选择器

基于bootstarpdatetimepicker的带标记的日期选择器
  日期和时间
 48766  319

讨论这个项目(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
    大神 我想 设置就只有当天时间段 我该怎么处理呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复