今天来了解一下js中定时器的两种用法。js中包括2种定时器，分别是：

          间隔型定时器：setInterval（开）    clearInterval （关） 

          延时性定时器：setTimeout（开）   clearTimeout  （关） 

   （1）间隔型定时器:

          间隔型定时器功能是每隔指定时间进行一次操作，直到定时器关闭；

setInterval(function(){

alert('a');},1000);   //每隔1000毫秒进行输出a字符；如果要停止使用clearInterval

（2）延时性定时器：

延时性定时器功能是延时指定时间执行操作，之后不在执行；

setTimeout(function(){

alert('a');},1000);  //1000豪秒后输出字符a，之后不再输出

（3）使用定时器来制作一个移动的div

           通过定时器可以来控制一个div在页面上运动，主要原理是通过设置div的style.left值，来改变div的位置。注   意div的position属性需要设置为absolute，否则div不能运动。函数在执行前，首选需要关闭一个定时器，因为重复开启定时器会造成移动速度加快；

<body>

<input id = "btn1" type = "button" value = "开始运动"“ onclick="startMove()"/>

<input id = "btn2" type= "button" value = "停止运动" onclick="stopMove()"/>

<div id= "div1">

</div>

</body>

//------------------------------js代码------------------------------------------------

<script>

var timer = null;

function startMove()

{

var oDiv = document.getElementById('div1'); //获取Div

clearInterval(timer);//关闭已有定时器；

timer = setInterval(function()

{

if(oDiv.offsetLeft >= 300)//判断当前Div位置，到达300px定制运动

{

clearInterval(timer);   //到达终点以后

}

else //把运动和停止隔开

{

oDiv.style.left = oDiv.offsetLeft + 2 + "px"; //运动过程，到达终点之前

}

},30);  //30毫秒执行一次

}

function stopMove()

{

clearInterval(timer);  //关闭定时器

}

</script>

js学习笔记之：时间（二）的更多相关文章

  1. JS学习笔记：（二）回流和重绘

    在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...

  2. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  3. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  4. React Native 学习笔记--进阶（二）--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  5. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  7. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  8. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  9. 汇编入门学习笔记 （十二）—— int指令、port

    疯狂的暑假学习之  汇编入门学习笔记 (十二)--  int指令.port 參考: <汇编语言> 王爽 第13.14章 一.int指令 1. int指令引发的中断 int n指令,相当于引 ...

  10. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

随机推荐

  1. 模板：强连通分量&2-sat

    void Tarjan(int x){ low[x]=ID[x]=++tot; st[++top]=x;Inst[x]=true; for(int i=fir[x];i;i=nxt[i]) if(!I ...

  2. ltp工具使用配置

    ltp是一个比较全的自然语言处理工具,可以用它进行分词.词性标注.语法分析等任务. ---- 准备 下载 下载ltp和ltp4j,在cmake官网下载并安装相应版本的cmake,并且下载ant. 构建 ...

  3. ovs router

  4. 无题II hdu 2236（二分枚举区间）

    分析:只需要用二分找一个区间,然后不断枚举这个区间是否可以达到最大匹配,一直二分到答案为止.   代码: =============================================== ...

  5. 关于node升级到7.0，无法gulp alljs的问题

    http://stackoverflow.com/questions/40308623/cannot-find-module-internal-fs-afer-upgrading-to-node-7 ...

  6. bzoj3669: [Noi2014]魔法森林 lct

    记得去年模拟赛的时候好像YY出二分答案枚举a,b的暴力,过了55欸 然后看正解,为了将两维变成一维,将a排序,模拟Kruskal的加边过程,同时维护1到n的最大值,加入一条边e(u,v,a,b)时有以 ...

  7. WebService-通俗讲解

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  8. HDU-3473Minimum Sum

    Problem Description You are given N positive integers, denoted as x0, x1 ... xN-1. Then give you som ...

  9. 统计学习导论：基于R应用——第五章习题

    第五章习题 1. 我们主要用到下面三个公式: 根据上述公式,我们将式子化简为 对求导即可得到得到公式5-6. 2. (a) 1 - 1/n (b) 自助法是有有放回的,所以第二个的概率还是1 - 1/ ...

  10. CodeForces 55D Beautiful numbers（数位dp）

    数位dp,三个状态,dp[i][j][k],i状态表示位数,j状态表示各个位上数的最小公倍数,k状态表示余数 其中j共有48种状态,最大的是2520,所以状态k最多有2520个状态. #include ...