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 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
动态加载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
php minixml详解
2008/07/19 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js日历功能对象
2012/01/12 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
简单学习vue指令directive
2016/11/03 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
微信小程序API—获取定位的详解
2019/04/30 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python通过实例讲解反射机制
2019/10/17 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
详解Python中namedtuple的使用
2020/04/27 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
大学生护理专业自荐信
2013/10/03 职场文书
公司晚会策划方案
2014/05/17 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
中学生学习保证书
2015/02/26 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS