js学习笔记之：时间（二）
今天来了解一下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学习笔记之：时间（二）的更多相关文章
- JS学习笔记：（二）回流和重绘
在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- 一点感悟：《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
- React Native 学习笔记--进阶（二）--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 汇编入门学习笔记 （十二）—— int指令、port
疯狂的暑假学习之 汇编入门学习笔记 (十二)-- int指令.port 參考: <汇编语言> 王爽 第13.14章 一.int指令 1. int指令引发的中断 int n指令,相当于引 ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
随机推荐
- 实战weblogic集群之创建domain，AdminServer
在weblogic安装完后,接下来就可以创建domain,AdminSever了. 第1步: $ cd /app/sinova/Oracle/wlserver_10./common/bin $ ./c ...
- 浅度围观SBJson
JSON JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度, 那么,JSON到底是什么? JSON就是一串字符串 只不 ...
- 后缀自动机(SAM) ：SPOJ LCS - Longest Common Substring
LCS - Longest Common Substring no tags A string is finite sequence of characters over a non-empty f ...
- ARM启动流程
S3C2440支持两种启动方式:norflash启动和nandflash启动. 一.norflash启动 NOR Flash 的特点是芯片内执行(XIP ,eXecute In Place),这样应用 ...
- 跳跃表Skip List【附java实现】
skip list的原理 Java中的LinkedList是一种常见的链表结构,这种结构支持O(1)的随机插入及随机删除, 但它的查找复杂度比较糟糕,为O(n). 假如我们有一个有序链表如下,如果我们 ...
- CentOS虚拟机不能联网状况下yum方式从本地安装软件包(转载的)
大家都知道yum是linux下一个非常好用的软件安装/卸载软件,它方便操作,而且最厉害的是可以解决令人头疼的包依赖关系.但是若是你的linux不能联网,若想使用yum安装软件,可以依照下面的方法. 1 ...
- Solr系列一:Solr与Tomcat的整合
第一次尝试着去写一个系列的教程,希望自己能坚持下去,也希望自己能够通过博客的编写来加深自己对solr搜索的理解. Solr与Tomcat的整合网上有很多教程,我就以我的整合为例来讲述一下我的整合过程, ...
- halt和shutdown 的区别
1.halt -h 标准情况下是关机 但是要手动关闭电源 .有些发行版增强了halt脚本 使其可以关闭电源 halt执行时﹐杀死应用进程﹐执行sync系统调用﹐文件系统写操作完成后就会停止内核. 2. ...
- boost库在工作（15）绑定器与函数对象之三
前面已经可以优美地解决两个参数的函数给算法for_each调用了,但是又会遇到这样的一种情况,当需要三个参数或者三个以上的参数给算法for_each调用呢?从STL里的绑定器bind1st,显然是不行 ...
- Topcoder SRM 656 (Div.1) 250 RandomPancakeStack - 概率+记忆化搜索
最近连续三次TC爆零了,,,我的心好痛. 不知怎么想的,这题把题意理解成,第一次选择j,第二次选择i后,只能从1~i-1.i+1~j找,其实还可以从j+1~n中找,只要没有被选中过就行... [题意] ...