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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
JS实现数组去重的11种方法总结
Apr 04 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python if not in 多条件判断代码
2016/09/21 Python
python实现贪吃蛇游戏
2020/03/21 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
大课间活动制度
2014/01/18 职场文书
服务员岗位职责
2014/01/29 职场文书
教师评语大全
2014/04/28 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
报名委托书
2015/01/29 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS