js实现进度条的方法

 更新时间:2015年02月13日 10:35:21   作者:尹若轩  
这篇文章主要介绍了js实现进度条的方法,实例分析了两种不同的实现方法,并说明了setTimeout和setInterval的使用区别,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下:

1.setTimeout和clearTimeout

<html> 
<head> 
<title>进度条</title> 
<style type="text/css">  
.container{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 } 
#bar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
  function run(){  
        var bar = document.getElementById("bar"); 
        var total = document.getElementById("total"); 
    bar.style.width=parseInt(bar.style.width) + 1 + "%";  
    total.innerHTML = bar.style.width; 
    if(bar.style.width == "100%"){  
      window.clearTimeout(timeout); 
      return; 
    } 
    var timeout=window.setTimeout("run()",100); 
  } 
    window.onload = function(){  
       run(); 
    }  
</script> 
 
</head> 
<body> 
  <div class="container"> 
   <div id="bar" style="width:0%;"></div>  
  </div>  
  <span id="total"></span> 
</body> 
</html>

效果图:

2.setInterval和clearInterval

<html>  
<head>  
<title>进度条</title>  
<style type="text/css">  
.processcontainer{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 }  
#processbar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
 function setProcess(){  
  var processbar = document.getElementById("processbar");  
  processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
  processbar.innerHTML = processbar.style.width;  
  if(processbar.style.width == "100%"){  
     window.clearInterval(bartimer);  
  }  
 }  
var bartimer = window.setInterval(function(){setProcess();},100);  
window.onload = function(){  
   bartimer;  
}  
</script>  
</head>  
<body>  
  <div class="processcontainer">  
   <div id="processbar" style="width:0%;"></div>  
  </div>  
</body>  
</html>

效果图:

3.setTimeout和setInterval区别

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() ,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭,或者让 code 自身再次调用 setTimeout()。

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • js实现当鼠标移到表格上时显示这一格全部内容的代码

    js实现当鼠标移到表格上时显示这一格全部内容的代码

    下面小编就为大家带来一篇js实现当鼠标移到表格上时显示这一格全部内容的代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript 获取链接文件地址中第一个斜线内的正则表达式

    javascript 获取链接文件地址中第一个斜线内的正则表达式

    我想得到“windows”,请问用正则表达式怎么写?
    2009-06-06
  • javascript中xml操作实现代码

    javascript中xml操作实现代码

    好久没写了。感觉今时今日,HTML5 还依然只是一种玩票的东东。但愿 w3c 的标准可以早一点出台,不要让各种浏览器的兼容问题和支持程度搞死
    2011-11-11
  • JavaScript获取路径设计源码

    JavaScript获取路径设计源码

    JavaScript获取路径的方法有很多,网上也可以搜索的到,下面本例也要为大家讲解下,有源码及结果截图
    2014-05-05
  • wx-charts 微信小程序图表插件的具体使用

    wx-charts 微信小程序图表插件的具体使用

    这篇文章主要介绍了wx-charts 微信小程序图表插件的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 微信小程序swiper使用网络图片不显示问题解决

    微信小程序swiper使用网络图片不显示问题解决

    这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 详解bootstrap导航栏.nav与.navbar区别

    详解bootstrap导航栏.nav与.navbar区别

    本篇文章主要介绍了详解bootstrap导航栏.nav与.navbar区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 小程序click-scroll组件设计

    小程序click-scroll组件设计

    这篇文章主要介绍了小程序click-scroll组件设计,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • JavaScript对Cookie进行读写操作实例

    JavaScript对Cookie进行读写操作实例

    这篇文章主要介绍了JavaScript对Cookie进行读写操作的方法,实例分析了javascript针对cookie的读写操作技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • JSONP基础知识详解

    JSONP基础知识详解

    JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于务器与客户端跨源通信,在后来的Web服务中非常流行。本文将详细介绍JSONP,下面跟着小编一起来看下吧
    2017-03-03

最新评论