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学 ...
随机推荐
- javascript 基础学习整理
1. javascript是动态语言,脚本语言,弱类型语言. 2. javascript代码在html文件中的位置安排,放在<body></body>内部与外部的区别.如何引用 ...
- Mac下Shell快捷键
ctrl+a //移到行首 ctrl+e //移到行尾 ctrl+y // 插入最近删除的单词或语句 ctrl+k //删除光标处到行尾部分 ctrl+u //删除光标处到行首部分 ctrl+w // ...
- HDOJ 2071 Max Num
Problem Description There are some students in a class, Can you help teacher find the highest studen ...
- POJ 2376 贪心
题意:FJ希望它的牛做一些清洁工作.有N只牛和T个时间段,每只牛可以承担一段时间内的工作.FJ希望让最小数量的牛覆盖整个T,求出其数量.若无法覆盖整个T,则输出-1. 分析:首先要注意T表示T个时间段 ...
- ubuntu编译openwrt前端web界面
openwrt是由Cisco放出源代码的开放无线路由平台.由于是基于linux内核,所以可以将很多linux平台下的软件移植到此平台下,然后让无线路由拥有很多意想不到的功能,例如拿来做BT下载器,音乐 ...
- [置顶] VC++界面编程之--使用分层窗口实现界面皮肤
使用分层界面来实现界面皮肤的好处是:可以保证图片边缘处理不失真,且能用于异形窗口上,如一些不规则的窗口,你很难用SetWindowRgn来达到理想效果. 在很多情况下,界面的漂亮与否,取决于PS的制作 ...
- pl sql developer登陆界面找不到oracle数据库选项
window 64位的操作系统 装的数据库win64_11gR2的数据库,PL SQL是PLSQL Developer 7.1.5最后是下载了一个instantclient_11_2包将你数据库安装路 ...
- javaweb笔记4之httpservlet
1 httpservlet简介 service方法是Servlet的入口方法,调用servlet会首先调用service方法.在service方法中,会根据请求方式分别调用不同的doXXX方法.例如, ...
- dubbo简述
转http://blog.csdn.net/hzzhoushaoyu/article/details/4327309 一.前言 部门去年年中开始各种改造,第一步是模块服务化,这边初选dubbo试用在一 ...
- C - Surprising Strings
C - Surprising Strings 题意:输入一段字符串,假设在同一距离下有两个字符串同样输出Not surprising ,否 ...