html5进度条插件 传递参数,Html5进度条插件(自写)

(function () {

window.H5ProgressBar = function (obj) {

this.height = obj.height;

this.width = obj.width;

this.speed = obj.speed;

};

//在界面上布局元素

H5ProgressBar.prototype.drawLayout = function () {

document.write("

开始下载

")

document.write(" ")

document.write("下载
")

document.write("
")

document.write("设置宽度：确定
")

document.write("设置高度：确定
")

document.write("设置速度：确定
")

}

//初始化方法，即程序入口，一开始从这里执行

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 + "%";

}

}

})();

用法:

new H5ProgressBar({

height:20,

width:500,

speed:10

}).init();