Html5进度条插件(自写)

当前位置 : 首页 > 网页制作 > html5 > Html5进度条插件(自写)

Html5进度条插件(自写)

来源: 作者: 时间:2016-01-14 17:05
(function () { window H5ProgressBar = function (obj) { this height = obj height; this width = obj width; this speed = obj speed;
(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 + "%";  
  
        }  
    }  
  
})();  

\

用法:

 




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

 

Tag:
网友评论

<