jQuery时间轴播放(原创)

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

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

优雅的日期选择插件daterangepicker

jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择
  日期和时间
 84863  374

pc端多种格式时间选择控件

提供如年月,年月日,年月日时,年月日时分 时间段等时间格式选择
  日期和时间
 83029  381

jQuery简单实用的日历插件(原创)

非常简单实用的日历插件
  日期和时间
 42008  352

jQuery日期时间选择器

基于Bootstrup 3的jQuery日期时间选择器
  日期和时间
 153570  468

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