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