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

<!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="/UploadFiles/2021-04-02/jquery.js">

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

标签:
jquery,进度条实例

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com