下載開始效果圖.png
下載完成效果圖.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<progress>是HTML 5中新增的狀態(tài)交互元素，用來表示頁面中的某個任務(wù)完成的進(jìn)度（進(jìn)程），如下載文件時，文件下載到本地的進(jìn)度值，可以通過該元素動態(tài)展示在頁面中，展示的方式既可以使用整數(shù)（如1到100），也可以使用百分比（如10%到100%）。
</progress>
<!--<progress></progress>-->
<p id="pTip">開始下載</p>
<progress value="0" max="100" id="proDownFile"></progress>
<!-- <input type="range" id="range" max="100" value="0"></input> -->
<input type="button" value="下載" class="inputbtn" onClick="Btn_Click();">
<script>
var intValue = 0;
var intTimer;
var objPro = document.getElementById('proDownFile');
var objTip = document.getElementById('pTip');
function Interval_handler() {
intValue++;
objPro.value = intValue;
//給進(jìn)度條賦值改變進(jìn)度條進(jìn)度
if (intValue >= objPro.max) {
clearInterval(intTimer);
objTip.innerHTML = "下載完成!";
} else {
objTip.innerHTML = "正在下載" + intValue + "%";
}
}
function Btn_Click() {
intTimer = setInterval(Interval_handler, 100);
}
</script>
</body>
</html>
