实现简单的进度条效果

封装一个简单的jquery插件，实现简单的可滚动进度条。可能一些情况没有考虑到，仅供参考。

(function ($) {
    $.fn.sliderProgress = function (options, actions) {
        var defaults = {
            width: 200, // 这是宽度
            height: 10, // 这是高度 写的时候虽然考虑到百分比但数值更可靠一点
            barColor: "#ffffff",  // 整个进度条的背景色
            valColor: "#eaeaea",  // 已滑动区域的背景色
            max: 100,  // 可以设置的最大值当做100%，比如200是100%或者300是100%
            value: 0,  // 当前初始值
            border: true, // 进度条边框
            borderWidth: 1, // 进度条边框宽度
            borderColor: "#efefef",  // 边框颜色
            dotRadius: 10,  // 进度条滑块圆点的半径
            dotColor: "#ffffff" // 滑块颜色
        };
        var that = this;
        this.settings = null;
        if (typeof options === "string") {
            // 这里提供了getValue和setValue两个方法
            var tmp = options;
            options = actions;
            actions = tmp;
            if (actions == "setValue") {
                if (typeof options === "number") {
                    that.find(".bar").css({
                        width: options / settings.max * 100 + "%"
                    })
                    that.find(".dot").css({
                        left: "calc(" + options / settings.max * 100 + "%" + " - " + (settings.dotRadius + "px") + ")"
                    })
                } else {
                    throw Error("方法调用错误！")
                }
            }
            if (actions == "getValue") {
                // getValue有两种返回值，第一个是数值，第二个是返回百分比的值
                // return Math.round(settings.max * (that.find(".bar").width() / that.width()));
                return Math.round(that.find(".bar").width() / that.width() * 100);
            }
        } else {
            // 初始化
            settings = $.extend(true, defaults, options);
            if (typeof settings.max !== "number" || typeof settings.value !== "number" || typeof settings.borderWidth !== "number" || typeof settings.border !== "boolean") {
                throw Error("参数字段有误！");
            }
            init(settings);
        }

        function dealNumber(num) {
            var reg1 = /^(\w)+$/; // 判断是数字
            var reg2 = /^(\w)+%$/; // 判断是百分比
            if (reg1.test(num)) {
                return num + "px";
            } else if (reg2.test(num)) {
                return num;
            } else {
                return "200px"
            }
        }

        function init(settings) {
            flag = true;
            // 初始化样式
            that.css({
                position: "relative",
                width: dealNumber(settings.width),
                height: dealNumber(settings.height),
                backgroundColor: settings.barColor,
                borderRadius: "5px",
                border: settings.border ? settings.borderWidth + "px " + settings.borderColor + " solid" : "none",
                margin: "10px 0"
            })
            // 初始化值样式
            var bar = $("<div class='bar'></div>").css({
                width: (settings.value / settings.max) * 100 + "%",
                height: "100%",
                backgroundColor: settings.valColor,
                borderRadius: "5px"
            });
            that.append(bar);
            // 初始化点样式
            var dot = $("<div class='dot'></div>").css({
                position: "absolute",
                left: "calc(" + (settings.value / settings.max) * 100 + "%" + " - " + (settings.dotRadius + "px") + ")",
                top: settings.height > settings.dotRadius * 2 ? (settings.height - settings.dotRadius * 2) / 2 + (settings.border ? settings.borderWidth : 0) + "px" : "-" + ((settings.dotRadius * 2 - settings.height) / 2 + (settings.border ? settings.borderWidth : 0)) + "px",
                width: settings.dotRadius * 2 + "px",
                height: settings.dotRadius * 2 + "px",
                borderRadius: "50%",
                border: "1px solid #aaa",
                backgroundColor: settings.dotColor,
                cursor: "pointer"
            });
            that.append(dot);
            var min = that.offset().left;
            var max = min + settings.width;
            var startX;
            var endX;
            var flag = false;
            // 监听鼠标事件
            that.on("mousedown", ".dot", function (e) {
                // screenX,screenY显示相对于用户显示器屏幕的X,Y坐标。
                // clientX,clientY显示相对于浏览器可视区域的X,Y坐标。可视区域不包含工具栏和滚动条
                // pageX,pageY显示相对于文档的坐标，包含滚动条。
                flag = true;
                startX = e.pageX;
            });
            $(document).on("mousemove", function (e) {
                if (!flag) {
                    return;
                }
                endX = e.pageX;
                var left = 0;
                if (endX <= min) {
                    left = 0;
                } else if (endX <= startX) {
                    left = (endX - min) / settings.width * 100;;
                } else if (endX > startX && endX <= max) {
                    left = (endX - min) / settings.width * 100;
                } else {
                    left = 100;
                }
                that.sliderProgress("setValue", left);
            });
            $(document).on("mouseup", function (e) {
                flag = false;
            })
            // 移动端触摸事件没有写。。。
        }
        return this;
    }
})(jQuery);