html5进度条标签
1.、progess标签
通过 progress 标签可以直接生成进度条效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <label for="pp">一个进度条</label> 9 <progress id="pp" value="0" max="100">10%</progress> 10 <script> 11 const ppElement = document.querySelector('#pp') 12 const interval = setInterval(() => { 13 ppElement.value += 1 14 if (ppElement.value === 100) { 15 clearInterval(interval) 16 } 17 }, 50) 18 </script> 19 </body> 20 </html>
效果如下：
2、meter进度条标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <label for="pp">类似于充电的效果</label> 9 <meter id="pp" min="0" max="100" low="33" high="66" optimum="80" value="20"></meter> 10 <script> 11 const ppElement=document.querySelector('#pp'); 12 const interval=setInterval( 13 ()=>{ 14 ppElement.value +=1; 15 if(ppElement.value==100){ 16 clearInterval(interval); 17 } 18 },50) 19 </script> 20 </body> 21 </html>
效果如下：
浙公网安备 33010602011771号