jquery完毕轻便的进程条实例,css和jquery相结合贯彻轻易的进程条效果实例代码

By admin in 4858美高梅 on 2019年8月24日

html、css和jquery相结合贯彻轻巧的进程条效果实例代码,cssjquery

废话十分的少说了,直接给大家贴代码了,具体代码如下所示:

<!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>0%
</body>
</html>

以此进程条非常轻易,首先html里面包车型大巴话就是贰个div里面嵌套二个div,然后写好想要的样式就行,特效的兑现也异常粗略就是,一个放大计时器里面写四个无名函数里面完成也很简单,小编那边是20皮秒试行一个佚名函数,里面包车型地铁代码正是三次扩大八个像素,当然你那边也可以用百分比去充实像素。倘诺大家有另外疑问请给自个儿留言,笔者会及时过来大家的。在此也特别感激我们对帮客之家网址的援救!

废话相当少说了,直接给大家贴代码了,具体代码如下所示: !DOCTYPE
htmlhtml…

废话非常少说了,直接给我们贴代码了,具体代码如下所示:

html + css + jquery达成轻易的进程条实例,cssjquery

<!DOCTYPE html>
<html xmlns=”;
<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 #jquery完毕轻便的进程条实例,css和jquery相结合贯彻轻易的进程条效果实例代码。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_4858美高梅,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微秒施行贰个无名函数,里面包车型大巴代码正是二遍增添一个像素,当然你这里也能够用百分比去充实像素。介绍其他一种形式,也足以用动画去落实进程条的效劳。。。。。。风野趣的能够去品味一下

 

+ css +
jquery完成轻松的进程条实例,cssjquery !DOCTYPE html html
xmlns=”” head meta http-equiv=”Content-Type”
content=”text/html; charse…

<!DOCTYPE html>
<html xmlns=”;
<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>

<!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>0%
</body>
</html>

//引入Jquery文件

以此进程条极其简单,首先html里面包车型客车话正是二个div里面嵌套贰个div,然后写好想要的体裁就行,特效的达成也很简单就是,八个机械漏刻里面写贰个无名氏函数里面达成也一点也不细略,小编这里是20皮秒实施叁个无名氏函数,里面的代码便是三遍扩大三个像素,当然你这里也得以用百分比去充实像素。假诺咱们有别的疑问请给自个儿留言,小编会及时回复我们的。在此也特别谢谢大家对台本之家网址的支撑!

<script src=”Jquerys/jquery.js”></script>
<script type=”text/javascript”>
function progressBar() {
  $(“#bar”).css(“width”, “0px”);
  var speed =20;//进程条的速度

你恐怕感兴趣的稿子:

  • jQuery轻便完毕提交数据出现loading进程条的方法
  • 听别人说HTML5
    Ajax文件上传进程条怎么着落实(jquery版本)
  • jquery完结模拟百分比进度条渐变效果代码
  • 使用jQuery完结完美的圆形进程条倒计时插件
  • 自定义刻度jQuery进度条及插件
  • 6款新颖的jQuery和CSS3进程条插件推荐
  • 享用8款优良的 jQuery
    加载动画和进度条插件
  • 用jQuery模拟页面加载进程条的贯彻代码
  • jQuery EasyUI API 粤语文书档案 – ProgressBar
    进程条

  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纳秒实施三个佚名函数,里面包车型大巴代码正是一遍扩张二个像素,当然你那边也得以用百分比去充实像素。介绍另外一种艺术,也足以用动画去落到实处进程条的效应。。。。。。有意思味的能够去尝尝一下

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有