(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();

總結

以上是生活随笔為你收集整理的html5进度条插件 传递参数,Html5进度条插件(自写)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。