Js操控----HTML5 <progress> 标签
简单模拟下下载进度跑条
<h4>加载进度</h4>
<input type="button" value="下载" onclick="DownloadStart();" />
<progress id="Download" value="" max="100"></progress> <script>
function DownloadStart() {
alert("加载下载")
var Down = document.getElementById("Download");
var i = 0;
var DownSetTime;
DownSetTime = setInterval(function () {
i += 10
Down.value = i;
if (i == 100) {
clearInterval(DownSetTime);
alert("加载完成")
}
}, 500)
} </script>
当然了，真正的进度是肯定不能这样写的，因为实际上目前还没有一种方法可以判断进度的进程，因此只能让跑条一直跑，或者跑到一个顶峰然后停着等下载完成，直接跳了100%。
例一：进度条跑到90，然后等，等服务器或者其他地方传进来一个值，然后再一下子到100.
<h4>加载进度</h4>
<input type="button" value="加载" onclick="LoadStart();" />
<progress id="Load" value="0" max="100"></progress> <script>
function LoadStart() {
var Complete = 0;//加载完成与否，初始为0，完成为1
var Load = document.getElementById("Load");//获取进度条
var i = 0;//声明跑条的初始值 //加载进度跑条
LoadSetTime = setInterval(function () {
i += 10;//每500毫米跑10份
Load.value = i;
if (i >= 90) {//当跑条到90时，就不跑了，停止
clearInterval(LoadSetTime);
return;
}
}, 500); //加载完成与否
GetData = setInterval(function () {
if (Complete == 1) {//当加载完成，也就等于1的时候
Load.value = 100;//跑条完成，到100
alert("加载完成");
clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器
clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器
}
}); //从服务器获得加载内容完成与否的值，当然了你可以定义这个值从任何地方来，比如页面加载完成，动画加载完成，图片加载完成，一个动作执行完毕等等都可以，具体看你需要用在的地方
$.post(URL, function (data) {
if (parseInt(data) == 1) {
Complete = 1;
}
})
}
</script>
例二：进度条一直跑，然后等，等服务器或者其他地方传进来一个值，然后再一下子到100以后清除所有计时器，加载完成
<h4>加载进度</h4>
<input type="button" value="加载" onclick="LoadStart();" />
<progress id="Load" value="0" max="100"></progress> <script>
function LoadStart() {
var Complete = 0;//加载完成与否，初始为0，完成为1
var Load = document.getElementById("Load");//获取进度条
var i = 0;//声明跑条的初始值 //加载进度跑条
LoadSetTime = setInterval(function () {
i += 10;//每500毫米跑10份
Load.value = i;
if (i == 100) {
i = 0;
}
}, 500); //加载完成与否
GetData = setInterval(function () {
if (Complete == 1) {//当加载完成，也就等于1的时候
Load.value = 100;//跑条完成，到100
clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器
clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器
}
}); //从服务器获得加载内容完成与否的值，当然了你可以定义这个值从任何地方来，比如页面加载完成，动画加载完成，图片加载完成，一个动作执行完毕等等都可以，具体看你需要用在的地方
$.post(URL, function (data) {
if (parseInt(data) == 1) {
Complete = 1;
}
})
}
</script>
ok，简单介绍下js操控“progress”标签，具体看你用在什么地方。
作者：leona
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接