html、css和jquery相结合实现简单的进度条效果实例

这篇文章主要介绍了html、css和jquery相结合实现简单的进度条效果的实例代码,这个进度条特别简单,首先html里面的话就是一个div里面嵌套一个div,然后写好想要的样式就行了,具有一定的参考借鉴价值,感兴趣的朋友一起看看吧

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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="https://www.jb51.net/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="开始" />   <div><div></div></div><span>0</span><span>%</span> </body> </html>

这个进度条特别简单,首先html里面的话就是一个div里面嵌套一个div,然后写好想要的样式就行,特效的实现也很简单就是,一个定时器里面写一个匿名函数里面实现也很简单,我这里是20毫秒执行一个匿名函数,里面的代码就是一次增加一个像素,当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdysy.html