html、css和jquery相结合实现简单的进度条效果实例代码_jquery_
2016-10-27 12:03:48
[小 大]
已经帮助：人解决问题
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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毫秒执行一个匿名函数，里面的代码就是一次增加一个像素，当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
（责任编辑：）
