欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现的一个简单进度条效果实例

程序员文章站 2022-04-04 20:27:36
jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的。 效果演示: 进度条实现源码: . 代码...

jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的。

效果演示:

jquery实现的一个简单进度条效果实例

进度条实现源码

. 代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现进度条</title>
<style>
 .progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
 #bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type="text/jscript" src="jquery.min.js"></script>
<script type="text/javascript">
 function progressBar(){
  //初始化js进度条
  $("#bar").css("width","0px");
  //进度条的速度,越小越快
  var speed = 20;

  bar = setInterval(function(){
   nowWidth = parseInt($("#bar").width());
   //宽度要不能大于进度条的总宽度
   if(nowWidth<=200){
    barWidth = (nowWidth + 1)+"px";
    $("#bar").css("width",barWidth);
   }else{
    //进度条读满后,停止
    clearInterval(bar);
   } 
  },speed);
 }
</script>
</head>

 

<body>
 <input type="button" value="开始" onclick="progressBar()" />
 <p class="progressBar"><p id="bar"></p></p>
</body>
</html>