样式:
<style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2C; height:25px; border-radius: 10px; box-shadow: 5px 10px 20px lightgray; } #processbar2{ background:green; float:left; height:100%; text-align:center; line-height:150%; border-radius: 10px; color: white; } </style>
关键HTML代码:
<body> <div class="processcontainer2"> <div id="processbar2">0</div> </div> </body>
脚本:
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script> <script type="text/javascript"> function gogogo(){ var bar=$("#processbar2"); $(bar).html(parseInt($(bar).html())+1+"%") $(bar).css("width",$(bar).html()) console.log($(bar).html()) //进度条满 if($(bar).html()=="100%"){ window.clearInterval(start); } } var start=setInterval(function(){gogogo()},50); $(document).ready(function(){ start; }) </script>
效果: