js实现进度条的方法


Posted in Javascript onFebruary 13, 2015

本文实例讲述了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>

效果图:

js实现进度条的方法

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>

效果图:

js实现进度条的方法

3.setTimeout和setInterval区别

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

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

Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
javascript实现简易计算器的代码
May 31 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
动态加载js的方法汇总
Feb 13 #Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 #Javascript
jQuery向后台传入json格式数据的方法
Feb 13 #Javascript
浅谈轻量级js模板引擎simplite
Feb 13 #Javascript
js实现拖拽效果
Feb 12 #Javascript
jQuery多个input求和的实现方法
Feb 12 #Javascript
JQuery实现防止退格键返回的方法
Feb 12 #Javascript
You might like
在smarty中调用php内置函数的方法
2013/02/07 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
javascript History对象原理解析
2020/02/17 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python操作MySQL简单实现方法
2015/01/26 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
社区中秋节活动方案
2014/01/29 职场文书
12月红领巾广播稿
2014/02/13 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
vue使用watch监听属性变化
2022/04/30 Vue.js
mysql全面解析json/数组
2022/07/07 MySQL