jquery实现日期进度选择效果代码-html代码-BFW代码库

代码语言：html
所属分类：进度条
代码描述：jquery实现日期进度选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .box {
            width: 1036px;
            height: 36px;
            margin: 200px auto;
        }
        #progressTime_control {
            float: left;
            width: 36px;
            height: 36px;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5ff8ef3f20eea.png);
            background-color: rgba(0,0,0,0.45);
            border: none;
            outline: none;
            position: relative;
            cursor: pointer;
            box-sizing: border-box;
            background-size: 10px;
            background-repeat: no-repeat;
            background-position: center;
        }
        #progressTime_control:before {
            content: '';
            width: 36px;
            height: 6px;
            background-color: #9D0300;
            position: absolute;
            left: 0;
            top: -6px;
        }
        /*#progressTime_control:after { content: ''; width: 0; height: 0; border: 8px solid transparent; border-left: 12px solid #fff; position: absolute; left: 50%; margin-left: -6px; top: 50%; margin-top: -8px; }*/
        #progressTime_control:hover:after {
            border-left-color: #ccc;
        }
        .progressTime {
            /*filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;*/ color: white;
            background: rgba(0,0,0,0.45);
            width: 1000px;
            height: 36px;
            padding-top: 0px;
            padding-bottom: 0px;
            display: none;
            position: relative;
            float: left;
        }
        #progressTime_concent {
            width: 100%;
            height: 36px;
            margin: 0 auto;
            cursor: pointer;
        }
        #scrollBarBox {
            width: 100%;
            height: 6px;
            padding: 5px 0;
            position: absolute;
            top: -11px;
            background-color: transparent;
            z-index: 2;
        }
        #scrollBar {
            width: 100%;
            height: 6px;
            background-color: #d3d3d3;
            cursor: pointer;
            position: absolute;
            top: 5px;
        }
        .timecode {
            width: 56px;
            height: 24px;
            background-color: #9D0300;
            position: absolute;
            left: 0;
            top: -35px;
            color: #fff;
            text-align: center;
            cursor: pointer;
            display: none;
        }
        .timecode:after {
            content: '';
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top: 5px solid #9D0300;
            position: absolute;
            left: 50%;
            bottom: -10px;
            margin-left: -5px;
        }
        #scroll_Track {
            width: 0px;
            height: 6px;
            background-color: #9D0300;
            transition: all ease-in-out .25s;
        }
        #scroll_Thumb {
            height: 24px;
            width: 100px;
            text-align: center;
            line-height: 24px;
            background-color: #fff;
            position: absolute;
            left: -25px;
            margin-top: -35px;
            cursor: pointer;
            color: #000;
            font-size: 12px;
            transition: all ease-in-out .25s;
        }
        #scroll_Thumb:after {
            content: '';
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top: 5px solid #fff;
            position: absolute;
            left: 20px;
            bottom: -10px;
        }
        /*#scroll_Thumb:hover { background-color: #ff4400; border: 1px solid #fff; }*/
        .time_slot p {
            float: left;
            line-height: 36px;
            width: calc(20% - 1px);
            border-left: 1px solid #ccc;
            margin: 0;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script>

        $(document).ready(function (e) {
            SetProgressTime(null, "2017/07/29 0:00:00", "2017/08/10 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", $(.........完整代码请登录后点击上方下载按钮下载查看