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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
js中less常用的方法小结
Aug 09 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
es6基础学习之解构赋值
Dec 10 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
php join函数应用
2011/05/04 PHP
PHP中常用的转义函数
2014/02/28 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
js中开关变量使用实例
2017/02/24 Javascript
ionic3 懒加载
2017/08/16 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
简析Python的闭包和装饰器
2016/02/26 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
了解一下python内建模块collections
2020/09/07 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
Java的基础面试题附答案
2016/01/10 面试题
顶岗实习接收函
2014/01/09 职场文书
公积金单位接收函
2014/01/11 职场文书
公司户外活动总结
2014/07/04 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
中秋节主题班会
2015/08/14 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang