window.setInterval()方法的定义和用法及offsetLeft与style.left的区别


Posted in Javascript onNovember 11, 2015

定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示: 1000 毫秒= 1 秒。

语法

setInterval(code,millisec,lang)

参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
lang 可选。 JScript | VBScript | JavaScript

总结:

此方法可以按照指定的周期执行来执行一段程序。周期是以毫秒为单位的。

此方法如果不关闭游览器或者调用clearInterval()方法将会永远的执行下去。

返回值是此方法的唯一ID标识。

停止此定时器函数的执行可以参阅clearInterval()方法一章节。

点击可参阅更多window对象的属性和方法。

浏览器支持:

(1).IE浏览器支持此方法。
(2).Firefox浏览器支持此方法。
(3).Opera浏览器支持此方法。
(4).chrome浏览器支持此方法。
(5).safria浏览器支持此方法。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){ 
 n=0; 
 function show(){ 
 document.getElementById("mytext").value=n+1; 
 n=n+1; 
 } 
 var flag=setInterval(show,1000) 
} 
</script> 
</head> 
<body> 
<input type="text" size=10 id="mytext" /> 
</body> 
</html>

下面给大家介绍offsetLeft与style.left的区别

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,
这同offsetLeft是相同的,区别在于:

1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,
还用offsetLeft比较方便。

2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。

3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在
css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。

offsetLeft则仍然能够取到,无需事先定义div的位置。

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
jQuery 联动日历实现代码
May 31 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
轻松实现javascript数据双向绑定
Nov 11 #Javascript
谈谈对offsetleft兼容性的理解
Nov 11 #Javascript
详解 javascript中offsetleft属性的用法
Nov 11 #Javascript
jquery事件的ready()方法使用详解
Nov 11 #Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 #Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 #Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 #Javascript
You might like
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python3正则提取字符串里的中文实例
2019/01/31 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
自我评价怎么写正确呢?
2013/12/02 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
创优争先心得体会
2014/09/11 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
邹越演讲观后感
2015/06/15 职场文书
新郎结婚感言
2015/07/31 职场文书
vue 实现上传组件
2021/05/31 Vue.js
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers