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学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
Php header()函数语法及使用代码
2013/11/04 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
性能服装:HYLETE
2018/08/14 全球购物
如何保障Web服务器安全
2014/05/05 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
工商管理实习生自我鉴定范文
2013/12/18 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2014年度安全工作总结
2014/12/04 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
九寨沟导游词
2015/02/02 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
详解Python flask的前后端交互
2022/03/31 Python