html、css和jquery相结合实现简单的进度条效果实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>jquery实现进度条</title> <styletype="text/css"> body{ padding:30px; margin-left:450px; margin-top:200px; width:350px; border:1pxsolid#98AFB7; } .progressBar{ width:280px; height:20px; border:1pxsolid#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文件 <scriptsrc="Jquerys/jquery.js"></script> <scripttype="text/javascript"> functionprogressBar(){ $("#bar").css("width","0px"); varspeed=20;//进度条的速度 bar=setInterval(function(){ nowWidth=parseInt($("#bar").width()); if(nowWidth<=279){ varbarWidth=(nowWidth+1); $("#bar").css("width",barWidth+"px"); vartotla=parseInt($(".progressBar").width()) varss=barWidth/totla*100; $("#span_s").text(ss); varindex=$("#span_s").text().indexOf("."); if(index!=-1){ varcontext=$("#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> <inputtype="button"value="开始"onclick="progressBar()"/> <divclass="progressBar"><divid="bar"></div></div><spanid="span_s">0</span><span>%</span> </body> </html>
这个进度条特别简单,首先html里面的话就是一个div里面嵌套一个div,然后写好想要的样式就行,特效的实现也很简单就是,一个定时器里面写一个匿名函数里面实现也很简单,我这里是20毫秒执行一个匿名函数,里面的代码就是一次增加一个像素,当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!