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();
總結
以上是生活随笔為你收集整理的html5进度条插件 传递参数,Html5进度条插件(自写)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 公钥，私钥和数字签名
- 下一篇： oracle 查看表空间及用户,orac