游戏 html 加载完进度条,HTml5 进度条实现，以及控制进度条加载速度

 progress元素的使用

开始下载

var intValue = 0;

var intTimer;

var objPro = document.getElementById('proDownFile');

var objTip = document.getElementById('pTip');

//定时事件

function Interval_handler() {

intValue++;

objPro.value = intValue;

if (intValue >= objPro.max) {

clearInterval(intTimer);

objTip.innerHTML = "下载完成";

} else {

objTip.innerHTML = "正在下载" + intValue + "%";

}

}

//设置时间

function Btn_Click(time) {

var progress = document.getElementById('proDownFile');

intValue = progress.value

if (intValue == objPro.max) {

reset()

}

else {

intTimer = setInterval(Interval_handler, time);

}

}

//设置进度条的宽度

function setProgressWidth() {

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("请输入数字类型")

}

}

}

//设置进度条的高度

function setProgressHeight() {

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("请输入数字类型")

}

}

}

//设置间隔时间

function setTimer() {

var time = document.getElementById('speed');

var newTimer = time.value

if (newTimer.length == 0) {

alert("不能为空");

}

else {

if(!isNaN( newTimer ) ){

if (newTimer <= 0 || newTimer > 100) {

alert("请设置1-100%之内的数")

} else {

Btn_Click(1000 - newTimer * 10);

}

}

else{

alert("请输入数字类型")

}

}

}

//重新下载

function reset() {

intValue = 0;

var progress = document.getElementById('proDownFile');

intTimer = setInterval(Interval_handler, 1000);

}

动态设置宽：

确定

动态设置高：

确定

设置加载速度:

确定