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

原文链接:http://www.cnblogs.com/leona-d/p/5950280.html 

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
posted @ 2016-11-08 13:39  YanEr、  阅读(5192)  评论(0编辑  收藏  举报