廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>jquery實現進度條</title><style type="text/css">body{ padding:30px; margin-left:450px; margin-top:200px; width:350px; border: 1px solid #98AFB7;}.progressBar{ width:280px; height:20px; border: 1px solid #98AFB7; border-radius:8px; background:#e1dfdf;}input{ margin-bottom:15px;}span{ position:relative; top:-20px; left:290px;}#bar { width: 0px; height: 20px; border-radius: 7px; background: #5EC4EA;}</style>//引入Jquery檔案<script src="Jquerys/jquery.js"></script><script type="text/javascript">function progressBar() { $("#bar").css("width", "0px"); var speed =20;//進度條的速度 bar = setInterval(function () { nowWidth = parseInt($("#bar").width()); if (nowWidth <= 279) { var barWidth = (nowWidth + 1); $("#bar").css("width", barWidth + "px"); var totla = parseInt($(".progressBar").width()) var ss = barWidth / totla * 100; $("#span_s").text(ss); var index = $("#span_s").text().indexOf("."); if (index != -1) { var context = $("#span_s").text().substring(0, index); $("#span_s").text(context); } else { $("#span_s").text(ss); if (parseInt($("#span_s").text()) == 100) { alert('完成'); } } } else { clearInterval(bar); } }, speed);}</script></head><body> <input type="button" value="開始" onclick="progressBar()" /> <div class="progressBar"><div id="bar"></div></div><span id="span_s">0</span><span>%</span></body></html>
這個進度條特別簡單，首先html裡面的話就是一個div裡面嵌套一個div，然後寫好想要的樣式就行，特效的實現也很簡單就是，一個定時器裡面寫一個匿名函數裡面實現也很簡單，我這裡是20毫秒執行一個匿名函數，裡面的代碼就是一次增加一個像素，當然你這裡也可以用百分比去增加像素。如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
