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

编程学习 2021-07-04 20:01www.dzhlxh.cn编程入门
这篇文章主要介绍了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="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毫秒执行一个匿名函数,里面的代码就是一次增加一个像素,当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板