×

学习简单的进度条效果

作者:天空2017.04.11来源:Web前端之家浏览:11172评论:0
关键词:JQueryJS

学习简单的进度条效果,废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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毫秒执行一个匿名函数,里面的代码就是一次增加一个像素,当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Web前端之家网站的支持!

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/biji51.html

网友评论文明上网理性发言 已有0人参与

发表评论: