html、css和jquery相结合实现简单的进度条效果实例代码
2016年11月25日
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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></div></div><span>0</span><span>%</span> </body> </html>这个进度条特别简单，首先html里面的话就是一个div里面嵌套一个div，然后写好想要的样式就行，特效的实现也很简单就是，一个定时器里面写一个匿名函数里面实现也很简单，我这里是20毫秒执行一个匿名函数，里面的代码就是一次增加一个像素，当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
相关阅读