限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

jquery多功能时间轴插件

所属分类: 网页特效-日期时间    2025-02-03 07:45:23

jquery多功能时间轴插件 ie兼容8
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery多功能时间轴插件(共3个文件)

    • index.html

使用方法

  • code
  • source
  1. $(document).ready(function (e) {
  2. SetProgressTime(null, "2025/01/22 0:00:00", "2025/02/03 0:00:00")
  3. });
  4. var _index = 0;//进度
  5. var _mProgressTimer;//定时器
  6. var _speed = 1000;
  7. var myfun;//执行方法,当前时间为参数
  8. function SetProgressTime(fun, startTime, endTime) {
  9. myfun = fun;
  10. $("#progressTime").show();
  11. // 开始时间
  12. var startDate = new Date(startTime);
  13. var Year = startDate.getFullYear();
  14. var Month = (startDate.getMonth()+1) < 10 ? "0" + (startDate.getMonth()+1) : (startDate.getMonth()+1);
  15. var currentDate = startDate.getDate() < 10 ? "0" + startDate.getDate() : startDate.getDate();
  16. var Hours = startDate.getHours() < 10 ? "0" + startDate.getHours() : startDate.getHours();
  17. var Minutes = startDate.getMinutes() < 10 ? "0" + startDate.getMinutes() : startDate.getMinutes();
  18. var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
  19. var week = weekArray[new Date(startDate).getDay()];
  20. var indexStart2 = week + " " + currentDate + " - " + Hours + ":" + Minutes;
  21. var indexStart3 = Hours + ":" + Minutes;
  22. var firstStart = Year + "-" + Month + "-" + currentDate;
  23. // 结束时间
  24. var endDate = new Date(endTime);
  25. var endYear = endDate.getFullYear();
  26. var endMonth = (endDate.getMonth()+1) < 10 ? "0" + (endDate.getMonth()+1) : (endDate.getMonth()+1);
  27. var endcurrentDate = endDate.getDate() < 10 ? "0" + endDate.getDate() : endDate.getDate();
  28. var endHours = endDate.getHours() < 10 ? "0" + endDate.getHours() : endDate.getHours();
  29. var endMinutes = endDate.getMinutes() < 10 ? "0" + endDate.getMinutes() : endDate.getMinutes();
  30. var lastEnd = endYear + "-" + endMonth + "-" + endcurrentDate;
  31. $("#scroll_Thumb").html(indexStart2);
  32. $(".timecode").html(indexStart3);
  33. $("#startTime").text(startTime);
  34. $("#endTime").text(endTime);
  35. // 得到总天数
  36. function getDateDiff(date1,date2){
  37. var arr1=date1.split('-');
  38. var arr2=date2.split('-');
  39. var d1=new Date(arr1[0],arr1[1],arr1[2]);
  40. var d2=new Date(arr2[0],arr2[1],arr2[2]);
  41. return (d2.getTime()-d1.getTime())/(1000*3600*24);
  42. }
  43. var dateNum = getDateDiff(firstStart,lastEnd);
  44. var str = '';
  45. for(var i = 0; i < dateNum; i ++){
  46. var d1 = new Date(startTime);
  47. var d2 = new Date(d1);
  48. d2.setDate(d1.getDate() + i);
  49. var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
  50. var week = weekArray[new Date(d2).getDay()];
  51. var monthNum = d2.getDate() < 10 ? "0" + d2.getDate() : d2.getDate();
  52. str += '<p>'+week + ' ' + monthNum+'</p>';
  53. }
  54. $(".time_slot").html(str);
  55. $(".time_slot p").css({"width":"calc("+100/dateNum+"% - 1px)"});
  56. //设置最大值
  57. var qdsjDate = new Date(startTime);
  58. var jssjDate = new Date(endTime);
  59. ScrollBar.maxValue = Math.abs(qdsjDate - jssjDate) / 1000 / 60 / 60;
  60. //初始化
  61. ScrollBar.Initialize();
  62. }
  63. //滑块
  64. var ScrollBar = {
  65. value: 0,
  66. maxValue: 40,
  67. step: 1,
  68. currentX: 0,
  69. Initialize: function () {
  70. if (this.value > this.maxValue) {
  71. alert("给定当前值大于了最大值");
  72. return;
  73. }
  74. this.GetValue();
  75. $("#scroll_Track").css("width", this.currentX + "px");
  76. $("#scroll_Thumb").css("margin-left", this.currentX + "px");
  77. this.Value();
  78. },
  79. SetValue: function (aValue) {
  80. this.value = aValue;
  81. if (this.value >= this.maxValue) this.value = this.maxValue;
  82. if (this.value <= 0) this.value = 0;
  83. var mWidth = this.value / this.maxValue * $("#scrollBar").width() + "px";
  84. $("#scroll_Track").css("width", mWidth);
  85. $("#scroll_Thumb").css("margin-left", mWidth);
  86. },
  87. Value: function () {
  88. var valite = false;
  89. var currentValue;
  90. // 点击进度条时滑块到达对应位置
  91. $("#scrollBarBox").click(function (event) {
  92. var changeX = event.clientX - ScrollBar.currentX;
  93. currentValue = changeX - ScrollBar.currentX - $("#scrollBar").offset().left;
  94. $("#scroll_Thumb").css("margin-left", currentValue + "px");
  95. $("#scroll_Track").css("width", currentValue + 2 + "px");
  96. if ((currentValue + 1) >= $("#scrollBar").width()) {
  97. $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 1 + "px");
  98. $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");
  99. ScrollBar.value = ScrollBar.maxValue;
  100. } else if (currentValue <= 0) {
  101. $("#scroll_Thumb").css("margin-left", "0px");
  102. $("#scroll_Track").css("width", "0px");
  103. ScrollBar.value = 0;
  104. } else {
  105. ScrollBar.value = Math.round(currentValue * ScrollBar.maxValue / $("#scrollBar").width());
  106. }
  107. SetTime(ScrollBar.value);
  108. SetInterval(ScrollBar.value);
  109. _index = ScrollBar.value;
  110. });
  111. // 鼠标在进度条上面滑动时小滑块显示并对应相应的时间
  112. $("#scrollBarBox").mousemove(function (event) {
  113. var changeX = event.clientX - ScrollBar.currentX;
  114. currentValue = changeX - ScrollBar.currentX - $("#scrollBar").offset().left;
  115. $(".timecode").show().css("left", currentValue -28 + "px");
  116. if ((currentValue + 1) >= $("#scrollBar").width()) {
  117. $(".timecode").css("left", $("#scrollBar").width() - 43 + "px");
  118. ScrollBar.value = ScrollBar.maxValue;
  119. } else if (currentValue <= 0) {
  120. $(".timecode").css("left", "-28px");
  121. ScrollBar.value = 0;
  122. } else {
  123. ScrollBar.value = Math.round(currentValue * ScrollBar.maxValue / $("#scrollBar").width());
  124. }
  125. SetTime1(ScrollBar.value);
  126. });
  127. // 鼠标移入进度条时小滑块显示
  128. $("#scrollBarBox").mouseover(function (event) {
  129. $(".timecode").show();
  130. });
  131. // 鼠标移除进度条时小滑块消失
  132. $("#scrollBarBox").mouseout(function (event) {
  133. $(".timecode").hide();
  134. });
  135. },
  136. GetValue: function () {
  137. this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
  138. }
  139. }
  140. // 控制大滑块的当前时间
  141. function SetTime(value) {
  142. var start = $("#startTime").html();
  143. var startDate = new Date(start);
  144. startDate.setHours(startDate.getHours() + 1 * value);//十五分钟为进度
  145. var month = startDate.getMonth() + 1 < 10 ? "0" + (startDate.getMonth() + 1) : startDate.getMonth() + 1;
  146. var currentDate = startDate.getDate() < 10 ? "0" + startDate.getDate() : startDate.getDate();
  147. var Hours = startDate.getHours() < 10 ? "0" + startDate.getHours() : startDate.getHours();
  148. var Minutes = startDate.getMinutes() < 10 ? "0" + startDate.getMinutes() : startDate.getMinutes();
  149. var Seconds = startDate.getSeconds() < 10 ? "0" + startDate.getSeconds() : startDate.getSeconds();
  150. var indexStart = startDate.getFullYear() + "/" + month + "/" + currentDate + " " + Hours + ":" + Minutes + ":" + Seconds;
  151. var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
  152. var week = weekArray[new Date(startDate).getDay()];
  153. var indexStart1 = week + " " + currentDate + " - " + Hours + ":" + Minutes;
  154. $("#scroll_Thumb").html(indexStart1);
  155. if (window.parent.currentTime) {
  156. currentTime = indexStart;
  157. }
  158. if (typeof (myfun) == "function") {
  159. var jscode = new Function('return ' + myfun)();
  160. jscode(indexStart)
  161. }
  162. }
  163. // 控制小滑块的当前时间,小滑块时间变化时大滑块不变
  164. function SetTime1(value) {
  165. var start = $("#startTime").html();
  166. var startDate = new Date(start);
  167. startDate.setHours(startDate.getHours() + 1 * value);//十五分钟为进度
  168. var Hours = startDate.getHours() < 10 ? "0" + startDate.getHours() : startDate.getHours();
  169. var Minutes = startDate.getMinutes() < 10 ? "0" + startDate.getMinutes() : startDate.getMinutes();
  170. var indexStart = Hours + ":" + Minutes;
  171. var indexStart2 = Hours + ":" + Minutes;
  172. $(".timecode").html(indexStart2);
  173. if (window.parent.currentTime) {
  174. currentTime = indexStart;
  175. }
  176. if (typeof (myfun) == "function") {
  177. var jscode = new Function('return ' + myfun)();
  178. jscode(indexStart)
  179. }
  180. }
  181. //开始 暂停
  182. function progressTimeControl(img) {
  183. if ($(img).attr("title") == "暂停") {
  184. $(img).attr("title", "开始");
  185. $(img).css("background-image", "url(img/play.png)");
  186. window.clearInterval(_mProgressTimer);
  187. }else {
  188. $(img).attr("title", "暂停");
  189. $(img).css("background-image", "url(img/pause.png)");
  190. _mProgressTimer = window.setInterval(function () {
  191. if (_index <= ScrollBar.maxValue) {
  192. _index += 1;
  193. ScrollBar.SetValue(_index);
  194. SetTime(_index)
  195. }else {
  196. progressTimeStop()
  197. }
  198. }, _speed);
  199. }
  200. }
  201. //停止
  202. function progressTimeStop() {
  203. $("#progressTime_control").attr("title", "开始");
  204. $("#progressTime_control").css("background-image", "url(img/play.png)");
  205. $("#scroll_Thumb").css("margin-left", "0px");
  206. $("#scroll_Track").css("width", "0px");
  207. ScrollBar.value = 0;
  208. _index = 0;
  209. _speed = 1000;
  210. window.clearInterval(_mProgressTimer);
  211. SetTime(ScrollBar.value);
  212. SetInterval(_index);
  213. }
  214. //重制时间
  215. function SetInterval(_index) {
  216. window.clearInterval(_mProgressTimer);
  217. if ($("#progressTime_control").attr("title") == "开始") {
  218. ScrollBar.SetValue(_index);
  219. SetTime(_index)
  220. }else{
  221. _mProgressTimer = window.setInterval(function () {
  222. if (_index <= ScrollBar.maxValue) {
  223. _index += 1;
  224. ScrollBar.SetValue(_index);
  225. SetTime(_index)
  226. }else {
  227. progressTimeStop()
  228. }
  229. }, _speed);
  230. }
  231. }
$(document).ready(function (e) {
    SetProgressTime(null, "2025/01/22 0:00:00", "2025/02/03 0:00:00")
});
var _index = 0;//进度
var _mProgressTimer;//定时器
var _speed = 1000;
var myfun;//执行方法,当前时间为参数
function SetProgressTime(fun, startTime, endTime) {
    myfun = fun;
    $("#progressTime").show();
    // 开始时间
    var startDate = new Date(startTime);
    var Year = startDate.getFullYear();
    var Month = (startDate.getMonth()+1) < 10 ? "0" + (startDate.getMonth()+1) : (startDate.getMonth()+1);
    var currentDate = startDate.getDate() < 10 ? "0" + startDate.getDate() : startDate.getDate();
    var Hours = startDate.getHours() < 10 ? "0" + startDate.getHours() : startDate.getHours();
    var Minutes = startDate.getMinutes() < 10 ? "0" + startDate.getMinutes() : startDate.getMinutes();
    var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
    var week = weekArray[new Date(startDate).getDay()];
    var indexStart2 = week + "  " + currentDate + " - " + Hours + ":" + Minutes;
    var indexStart3 = Hours + ":" + Minutes;
    var firstStart = Year + "-" + Month + "-" + currentDate;
    // 结束时间
    var endDate = new Date(endTime);
    var endYear = endDate.getFullYear();
    var endMonth = (endDate.getMonth()+1) < 10 ? "0" + (endDate.getMonth()+1) : (endDate.getMonth()+1);
    var endcurrentDate = endDate.getDate() < 10 ? "0" + endDate.getDate() : endDate.getDate();
    var endHours = endDate.getHours() < 10 ? "0" + endDate.getHours() : endDate.getHours();
    var endMinutes = endDate.getMinutes() < 10 ? "0" + endDate.getMinutes() : endDate.getMinutes();
    var lastEnd = endYear + "-" + endMonth + "-" + endcurrentDate;
    $("#scroll_Thumb").html(indexStart2);
    $(".timecode").html(indexStart3);
    $("#startTime").text(startTime);
    $("#endTime").text(endTime);
    // 得到总天数
    function getDateDiff(date1,date2){
        var arr1=date1.split('-');
        var arr2=date2.split('-');
        var d1=new Date(arr1[0],arr1[1],arr1[2]);
        var d2=new Date(arr2[0],arr2[1],arr2[2]);
        return (d2.getTime()-d1.getTime())/(1000*3600*24);
    }
    var dateNum = getDateDiff(firstStart,lastEnd);
    var str = '';
    for(var i = 0; i < dateNum; i ++){
        var d1 = new Date(startTime);
        var d2 = new Date(d1);
        d2.setDate(d1.getDate() + i);
        var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
        var week = weekArray[new Date(d2).getDay()];
        var monthNum = d2.getDate() < 10 ? "0" + d2.getDate() : d2.getDate();
        str += '<p>'+week + ' ' + monthNum+'</p>';
    }
    $(".time_slot").html(str);
    $(".time_slot p").css({"width":"calc("+100/dateNum+"% - 1px)"});
    //设置最大值
    var qdsjDate = new Date(startTime);
    var jssjDate = new Date(endTime);
    ScrollBar.maxValue = Math.abs(qdsjDate - jssjDate) / 1000 / 60 / 60;
    //初始化
    ScrollBar.Initialize();
}
//滑块
var ScrollBar = {
    value: 0,
    maxValue: 40,
    step: 1,
    currentX: 0,
    Initialize: function () {
        if (this.value > this.maxValue) {
            alert("给定当前值大于了最大值");
            return;
        }
        this.GetValue();
        $("#scroll_Track").css("width", this.currentX + "px");
        $("#scroll_Thumb").css("margin-left", this.currentX + "px");
        this.Value();
    },
    SetValue: function (aValue) {
        this.value = aValue;
        if (this.value >= this.maxValue) this.value = this.maxValue;
        if (this.value <= 0) this.value = 0;
        var mWidth = this.value / this.maxValue * $("#scrollBar").width() + "px";
        $("#scroll_Track").css("width", mWidth);
        $("#scroll_Thumb").css("margin-left", mWidth);
    },
    Value: function () {
        var valite = false;
        var currentValue;
        // 点击进度条时滑块到达对应位置
        $("#scrollBarBox").click(function (event) {
            var changeX = event.clientX - ScrollBar.currentX;
            currentValue = changeX - ScrollBar.currentX - $("#scrollBar").offset().left;
            $("#scroll_Thumb").css("margin-left", currentValue + "px");
            $("#scroll_Track").css("width", currentValue + 2 + "px");
            if ((currentValue + 1) >= $("#scrollBar").width()) {
                $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 1 + "px");
                $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");
                ScrollBar.value = ScrollBar.maxValue;
            } else if (currentValue <= 0) {
                $("#scroll_Thumb").css("margin-left", "0px");
                $("#scroll_Track").css("width", "0px");
                ScrollBar.value = 0;
            } else {
                ScrollBar.value = Math.round(currentValue * ScrollBar.maxValue / $("#scrollBar").width());
            }
            SetTime(ScrollBar.value);
            SetInterval(ScrollBar.value);
            _index = ScrollBar.value;
        });
        // 鼠标在进度条上面滑动时小滑块显示并对应相应的时间
        $("#scrollBarBox").mousemove(function (event) {
            var changeX = event.clientX - ScrollBar.currentX;
            currentValue = changeX - ScrollBar.currentX - $("#scrollBar").offset().left;
            $(".timecode").show().css("left", currentValue -28 + "px");
            if ((currentValue + 1) >= $("#scrollBar").width()) {
                $(".timecode").css("left", $("#scrollBar").width() - 43 + "px");
                ScrollBar.value = ScrollBar.maxValue;
            } else if (currentValue <= 0) {
                $(".timecode").css("left", "-28px");
                ScrollBar.value = 0;
            } else {
                ScrollBar.value = Math.round(currentValue * ScrollBar.maxValue / $("#scrollBar").width());
            }
            SetTime1(ScrollBar.value);
        });
        // 鼠标移入进度条时小滑块显示
        $("#scrollBarBox").mouseover(function (event) {
            $(".timecode").show();
        });
        // 鼠标移除进度条时小滑块消失
        $("#scrollBarBox").mouseout(function (event) {
            $(".timecode").hide();
        });
    },
    GetValue: function () {
        this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
    }
}

// 控制大滑块的当前时间
function SetTime(value) {
    var start = $("#startTime").html();
    var startDate = new Date(start);
    startDate.setHours(startDate.getHours() + 1 * value);//十五分钟为进度
    var month = startDate.getMonth() + 1 < 10 ? "0" + (startDate.getMonth() + 1) : startDate.getMonth() + 1;
    var currentDate = startDate.getDate() < 10 ? "0" + startDate.getDate() : startDate.getDate();
    var Hours = startDate.getHours() < 10 ? "0" + startDate.getHours() : startDate.getHours();
    var Minutes = startDate.getMinutes() < 10 ? "0" + startDate.getMinutes() : startDate.getMinutes();
    var Seconds = startDate.getSeconds() < 10 ? "0" + startDate.getSeconds() : startDate.getSeconds();
    var indexStart = startDate.getFullYear() + "/" + month + "/" + currentDate + " " + Hours + ":" + Minutes + ":" + Seconds;
    var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
    var week = weekArray[new Date(startDate).getDay()];
    var indexStart1 = week + "  " + currentDate + " - " + Hours + ":" + Minutes;
    $("#scroll_Thumb").html(indexStart1);
    if (window.parent.currentTime) {
        currentTime = indexStart;
    }
    if (typeof (myfun) == "function") {
        var jscode = new Function('return ' + myfun)();
        jscode(indexStart)
    }
}
// 控制小滑块的当前时间,小滑块时间变化时大滑块不变
function SetTime1(value) {
    var start = $("#startTime").html();
    var startDate = new Date(start);
    startDate.setHours(startDate.getHours() + 1 * value);//十五分钟为进度
    var Hours = startDate.getHours() < 10 ? "0" + startDate.getHours() : startDate.getHours();
    var Minutes = startDate.getMinutes() < 10 ? "0" + startDate.getMinutes() : startDate.getMinutes();
    var indexStart = Hours + ":" + Minutes;
    var indexStart2 = Hours + ":" + Minutes;
    $(".timecode").html(indexStart2);
    if (window.parent.currentTime) {
        currentTime = indexStart;
    }
    if (typeof (myfun) == "function") {
        var jscode = new Function('return ' + myfun)();
        jscode(indexStart)
    }
}

//开始 暂停
function progressTimeControl(img) {
    if ($(img).attr("title") == "暂停") {
        $(img).attr("title", "开始");
        $(img).css("background-image", "url(img/play.png)");
        window.clearInterval(_mProgressTimer);
    }else {
        $(img).attr("title", "暂停");
        $(img).css("background-image", "url(img/pause.png)");
        _mProgressTimer = window.setInterval(function () {
            if (_index <= ScrollBar.maxValue) {
                _index += 1;
                ScrollBar.SetValue(_index);
                SetTime(_index)
            }else {
                progressTimeStop()
            }
        }, _speed);
    }
}

//停止
function progressTimeStop() {
    $("#progressTime_control").attr("title", "开始");
    $("#progressTime_control").css("background-image", "url(img/play.png)");
    $("#scroll_Thumb").css("margin-left", "0px");
    $("#scroll_Track").css("width", "0px");
    ScrollBar.value = 0;
    _index = 0;
    _speed = 1000;
    window.clearInterval(_mProgressTimer);
    SetTime(ScrollBar.value);
    SetInterval(_index);
}

//重制时间
function SetInterval(_index) {
    window.clearInterval(_mProgressTimer);
    if ($("#progressTime_control").attr("title") == "开始") {
        ScrollBar.SetValue(_index);
        SetTime(_index)
    }else{
        _mProgressTimer = window.setInterval(function () {
            if (_index <= ScrollBar.maxValue) {
                _index += 1;
                ScrollBar.SetValue(_index);
                SetTime(_index)
            }else {
                progressTimeStop()
            }
        }, _speed);
    }
}

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 日期时间

jquery带回调函数的全屏响应式日历插件

该插件自适应设计,按月份排序显示,可切换年份,鼠标经过日期显示星期几。
  日期时间
 8506  0

jquery+CSS3创建逼真的品牌手表在线时钟特效

一款纯CSS打造的仿真腕表,结合一点点javascript制作动态的手表动画效果。
  日期时间
 9283  0

jquery带上下箭头切换选择的日期选择器插件

一款点击Input弹出选择器特效,带按钮切换动画滑动效果,非常实用。
  日期时间
 2502  0

jquery响应式超漂亮的事件日历插件

evo-calendar是一个响应式自定义的事件日历插件,可在日期中标记当天有无事件信息,点击即可在右侧显示事件内容。
  日期时间
 1532  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论