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 相关文章推荐
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
深入理解javascript中的this
Feb 08 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
轻松实现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产生动态的影像图
2006/10/09 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
基于python实现地址和经纬度转换
2020/05/19 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python pymsql模块的使用
2020/09/07 Python
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
甜品店创业计划书
2014/08/14 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
公司表扬信格式
2015/05/04 职场文书
安全教育第一课观后感
2015/06/17 职场文书
安全伴我行主题班会
2015/08/13 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python