下载开始效果图.png
下载完成效果图.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<progress>是HTML 5中新增的状态交互元素，用来表示页面中的某个任务完成的进度（进程），如下载文件时，文件下载到本地的进度值，可以通过该元素动态展示在页面中，展示的方式既可以使用整数（如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;
//给进度条赋值改变进度条进度
if (intValue >= objPro.max) {
clearInterval(intTimer);
objTip.innerHTML = "下载完成!";
} else {
objTip.innerHTML = "正在下载" + intValue + "%";
}
}
function Btn_Click() {
intTimer = setInterval(Interval_handler, 100);
}
</script>
</body>
</html>
