javascript基于定时器实现进度条功能实例


Posted in Javascript onOctober 13, 2017

本文实例讲述了javascript基于定时器实现进度条功能。分享给大家供大家参考,具体如下:

Javascript 中的定时器

window度一线下面的方法 window.setInterval() 启动定时器

1.setInterval(function(函数),time(每隔多少时间执行一次函数,单位是毫秒))

会重复执行某项操作

2.setTimeout 运用在延迟一段时间,再进行某项操作

setTimeout(function,time) ,setTimeout 不会重复!

停止定时器

setTimeoout 对应的是clearTimeout(对象)   清除已设置的setTiemout对象

setInterval 对应的是clearInterval(对象)  清除已经设置的setInterval对象

给出一个案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com js进度条</title>
<style type="text/css">
#outer/*外部*/
{
  margin-top:100px;
  border:solid black 1px;
  background-color:white;
  width:1004px;
  height:54px;
}
#inner/*内部*/
{
  background-color:red;
  width:0px;/*首先将内部的宽度定为0,用show()来实现进度条!*/
  height:50px;
  margin-left:2px;
  margin-top:2px;
}
</style>
<script language="javascript">
function show()
{
  if(document.getElementById("inner").offsetWidth<1000)//offsetWidth实现的时候width是没有宽度的,而style.width实现的时候则有宽度(px)!
  {
    document.getElementById("inner").style.width=
    document.getElementById("inner").offsetWidth+20+"px";//每次执行show()函数的时候宽度都会加上20!
    console.log(document.getElementById("inner").style.width);//console 控制台 :可以在网页上看到width的变化(利用F12)
  }
  else
  {
    document.getElementById("inner").style.width=1000+"px";//如果大于1000px的话,只能将1000px赋值给border-width;!
    stop();//此时就应该执行停止定时器的函数!
  }
}
var timer;//定义在两个函数外面,因为两个函数都会用到!
function start()
{
 timeer = window.setInterval(show,200);//每隔200ms调用一次show函数
}
function stop()
{
  timer = window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>

运行效果:

javascript基于定时器实现进度条功能实例

运行程序的时候,网页上的进度条就会加载,加载的快慢与时间有关!

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

Javascript 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 #Javascript
详解如何去除vue项目中的#——History模式
Oct 13 #Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 #Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 #Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 #Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 #Javascript
JavaScript实现随机数生成器(去重)
Oct 13 #Javascript
You might like
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JQuery球队选择实例
2015/05/18 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
深入了解js原型模式
2019/05/30 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python实现二叉堆
2016/02/03 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
三个Unix的命令面试题
2015/04/12 面试题
个人评价范文分享
2014/01/11 职场文书
元旦晚会感言
2014/03/12 职场文书
揭牌仪式主持词
2014/03/19 职场文书
家长对学生的评语
2014/04/18 职场文书
住房抵押登记委托书
2014/09/27 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript