bootstrap建立動態進度條
阿新 • • 發佈：2019-01-30
效果圖：
附原始碼：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>進度條</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="div11" class="progress progress-striped active"> <div id="div1" class="progress-bar progress-bar-success"> <span class="sr-only">40% 完成</span> </div> </div> </div> </body> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> var progress = 1; var totalWidth = $('#div11').css('width'); var initstr=''; $(function () { initstr = setInterval("change('div1')",100); }) function change(id){ console.log(progress); $('#'+id).css({ width:progress }) if(progress==totalWidth){ clearInterval(initstr); } progress= progress+1; } </script> </html>