(function () {
    window.H5ProgressBar = function (obj) {
        this.height = obj.height;
        this.width = obj.width;
        this.speed = obj.speed;

    };

    //在介面上佈局元素
    H5ProgressBar.prototype.drawLayout = function () {
        document.write("<p id=\"loadTip\">開始下載</p>")
        document.write("<progress value=\"0\" max=\"100\" id=\"proDownFile\"></progress> ")
        document.write("<button id=\"load\">下載</button> <br> ")
        document.write("<br> ")
        document.write("設定寬度：<input  id=\"width\" placeholder=\"number型別\"><button id=\"setWidthBtn\">確定</button> <br> ")
        document.write("設定高度：<input  id=\"height\" placeholder=\"number型別\"><button id=\"setHeightBtn\">確定</button> <br> ")
        document.write("設定速度：<input  id=\"speed\" placeholder=\"number型別(1-100%)\"><button id=\"setSpeedBtn\" >確定</button> <br> ")
    }
    //初始化方法，即程式入口，一開始從這裡執行
    H5ProgressBar.prototype.init = function () {
        this.drawLayout();
        var objPro = document.getElementById('proDownFile');
        var width = this.width + "px"
        var height = this.height + "px"


        objPro.style.width = width;
        objPro.style.height = height;

        this.setProgressWidth();
        this.setProgressHeight();
        this.load();
        this.setLoadSpeed();

    }
    //設定進度條的寬度
    H5ProgressBar.prototype.setProgressWidth = function () {
        var setWidthBtn = document.getElementById('setWidthBtn');
        setWidthBtn.addEventListener('click', function () {
            var progress = document.getElementById('proDownFile');
            var width = document.getElementById('width');
            var newWidth = width.value
            if (newWidth.length == 0) {
                alert("不能為空");
            } else {
                if (!isNaN(newWidth)) {
                    progress.style.width = newWidth + "px"
                }
                else {
                    alert("請輸入數字型別")
                }

            }
        });
    }
    //設定進度條的高度
    H5ProgressBar.prototype.setProgressHeight = function () {
        var setHeightBtn = document.getElementById('setHeightBtn');
        setHeightBtn.addEventListener('click', function () {
            var progress = document.getElementById('proDownFile');
            var height = document.getElementById('height');
            var newHeight = height.value

            if (newHeight.length == 0) {
                alert("不能為空");
            } else {
                if (!isNaN(newHeight)) {
                    progress.style.height = newHeight + "px"
                }
                else {
                    alert("請輸入數字型別")
                }

            }
        });
    }
    var intValue = 0;
    var intTimer;
    var objTip;
    //下載
    H5ProgressBar.prototype.load = function () {
        var load = document.getElementById('load');
        var time = 1000 - this.speed * 10;

        load.addEventListener('click', function () {

            Btn_Click(time);

        });

    }
    //設定下載速度
    H5ProgressBar.prototype.setLoadSpeed = function () {
        var speed = document.getElementById('setSpeedBtn');
        speed.addEventListener('click', function () {
            var speed = document.getElementById('speed');
            var newSpeed = speed.value

            if (newSpeed.length == 0) {
                alert("不能為空");
            }
            else {
                if (!isNaN(newSpeed)) {
                    if (newSpeed <= 0 || newSpeed > 100) {
                        alert("請設定1-100%之內的數")

                    } else {
                        Btn_Click(1000 - newSpeed * 10);
                    }
                }
                else {
                    alert("請輸入數字型別")
                }
            }
        })
    }
    //設定時間
    function Btn_Click(time) {
        var progress = document.getElementById('proDownFile');
        intValue = progress.value

        if (intValue == progress.max) {
            reset()
        }
        else {
            intTimer = setInterval(Interval_handler, time);
        }

    }

    //重新下載
    function reset() {
        intValue = 0;
        var progress = document.getElementById('proDownFile');
        intTimer = setInterval(Interval_handler, 1000);
    }

    //定時事件
    function Interval_handler() {
        intValue++;
        var objPro = document.getElementById('proDownFile');
        objTip = document.getElementById('loadTip');
        objPro.value = intValue;
        if (intValue >= objPro.max) {
            clearInterval(intTimer);
            objTip.innerHTML = "下載完成";
        } else {
            intValue += Math.random() * 1.8;
            intValue = parseFloat(intValue.toFixed(1));
            objTip.innerHTML = "正在下載" + intValue + "%";

        }
    }

})();
 

用法:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript" src="js/H5ProgressBar.js"></script>
<script type="text/javascript">
    new H5ProgressBar({
        height:20,
        width:500,
        speed:10
    }).init();
</script>
</body>
</html>