html5进度条插件

1. (function () {  
2.     window.H5ProgressBar = function (obj) {  
3.         this.height = obj.height;  
4.         this.width = obj.width;  
5.         this.speed = obj.speed;  
6.   
7.     };  
8.   
9.     //在界面上布局元素  
10.     H5ProgressBar.prototype.drawLayout = function () {  
11.         document.write("<p id=\"loadTip\">开始下载</p>")  
12.         document.write("<progress value=\"0\" max=\"100\" id=\"proDownFile\"></progress> ")  
13.         document.write("<button id=\"load\">下载</button> <br> ")  
14.         document.write("<br> ")  
15.         document.write("设置宽度：<input  id=\"width\" placeholder=\"number类型\"><button id=\"setWidthBtn\">确定</button> <br> ")  
16.         document.write("设置高度：<input  id=\"height\" placeholder=\"number类型\"><button id=\"setHeightBtn\">确定</button> <br> ")  
17.         document.write("设置速度：<input  id=\"speed\" placeholder=\"number类型(1-100%)\"><button id=\"setSpeedBtn\" >确定</button> <br> ")  
18.     }  
19.     //初始化方法，即程序入口，一开始从这里执行  
20.     H5ProgressBar.prototype.init = function () {  
21.         this.drawLayout();  
22.         var objPro = document.getElementById('proDownFile');  
23.         var width = this.width + "px"  
24.         var height = this.height + "px"  
25.   
26.   
27.         objPro.style.width = width;  
28.         objPro.style.height = height;  
29.   
30.         this.setProgressWidth();  
31.         this.setProgressHeight();  
32.         this.load();  
33.         this.setLoadSpeed();  
34.   
35.     }  
36.     //设置进度条的宽度  
37.     H5ProgressBar.prototype.setProgressWidth = function () {  
38.         var setWidthBtn = document.getElementById('setWidthBtn');  
39.         setWidthBtn.addEventListener('click', function () {  
40.             var progress = document.getElementById('proDownFile');  
41.             var width = document.getElementById('width');  
42.             var newWidth = width.value  
43.             if (newWidth.length == 0) {  
44.                 alert("不能为空");  
45.             } else {  
46.                 if (!isNaN(newWidth)) {  
47.                     progress.style.width = newWidth + "px"  
48.                 }  
49.                 else {  
50.                     alert("请输入数字类型")  
51.                 }  
52.   
53.             }  
54.         });  
55.     }  
56.     //设置进度条的高度  
57.     H5ProgressBar.prototype.setProgressHeight = function () {  
58.         var setHeightBtn = document.getElementById('setHeightBtn');  
59.         setHeightBtn.addEventListener('click', function () {  
60.             var progress = document.getElementById('proDownFile');  
61.             var height = document.getElementById('height');  
62.             var newHeight = height.value  
63.   
64.             if (newHeight.length == 0) {  
65.                 alert("不能为空");  
66.             } else {  
67.                 if (!isNaN(newHeight)) {  
68.                     progress.style.height = newHeight + "px"  
69.                 }  
70.                 else {  
71.                     alert("请输入数字类型")  
72.                 }  
73.   
74.             }  
75.         });  
76.     }  
77.     var intValue = 0;  
78.     var intTimer;  
79.     var objTip;  
80.     //下载  
81.     H5ProgressBar.prototype.load = function () {  
82.         var load = document.getElementById('load');  
83.         var time = 1000 - this.speed * 10;  
84.   
85.         load.addEventListener('click', function () {  
86.   
87.             Btn_Click(time);  
88.   
89.         });  
90.   
91.     }  
92.     //设置下载速度  
93.     H5ProgressBar.prototype.setLoadSpeed = function () {  
94.         var speed = document.getElementById('setSpeedBtn');  
95.         speed.addEventListener('click', function () {  
96.             var speed = document.getElementById('speed');  
97.             var newSpeed = speed.value  
98.   
99.             if (newSpeed.length == 0) {  
100.                 alert("不能为空");  
101.             }  
102.             else {  
103.                 if (!isNaN(newSpeed)) {  
104.                     if (newSpeed <= 0 || newSpeed > 100) {  
105.                         alert("请设置1-100%之内的数")  
106.   
107.                     } else {  
108.                         Btn_Click(1000 - newSpeed * 10);  
109.                     }  
110.                 }  
111.                 else {  
112.                     alert("请输入数字类型")  
113.                 }  
114.             }  
115.         })  
116.     }  
117.     //设置时间  
118.     function Btn_Click(time) {  
119.         var progress = document.getElementById('proDownFile');  
120.         intValue = progress.value  
121.   
122.         if (intValue == progress.max) {  
123.             reset()  
124.         }  
125.         else {  
126.             intTimer = setInterval(Interval_handler, time);  
127.         }  
128.   
129.     }  
130.   
131.     //重新下载  
132.     function reset() {  
133.         intValue = 0;  
134.         var progress = document.getElementById('proDownFile');  
135.         intTimer = setInterval(Interval_handler, 1000);  
136.     }  
137.   
138.     //定时事件  
139.     function Interval_handler() {  
140.         intValue++;  
141.         var objPro = document.getElementById('proDownFile');  
142.         objTip = document.getElementById('loadTip');  
143.         objPro.value = intValue;  
144.         if (intValue >= objPro.max) {  
145.             clearInterval(intTimer);  
146.             objTip.innerHTML = "下载完成";  
147.         } else {  
148.             intValue += Math.random() * 1.8;  
149.             intValue = parseFloat(intValue.toFixed(1));  
150.             objTip.innerHTML = "正在下载" + intValue + "%";  
151.   
152.         }  
153.     }  
154.   
155. })();  

用法:

[html]  view plain copy

1. <!DOCTYPE html>  
2. <html>  
3. <head lang="en">  
4.     <meta charset="UTF-8">  
5.     <title></title>  
6. </head>  
7. <body>  
8.   
9. <script type="text/javascript" src="js/H5ProgressBar.js"></script>  
10. <script type="text/javascript">  
11.     new H5ProgressBar({  
12.         height:20,  
13.         width:500,  
14.         speed:10  
15.     }).init();  
16. </script>  
17. </body>  
18. </html>