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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
Js callBack 返回前一页的js方法
Nov 30 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
vue keep-alive的简单总结
Jan 25 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
星际争霸秘籍
2020/03/04 星际争霸
索尼ICF-SW100收音机评测
2021/03/02 无线电
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
js函数般调用正则
2008/04/08 Javascript
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python爬取指定微信公众号文章
2018/12/20 Python
使用python绘制温度变化雷达图
2019/10/18 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
公司部门司机岗位职责
2014/01/03 职场文书
小学校长个人总结
2015/03/03 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
Python基础详解之描述符
2021/04/28 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
Python sklearn分类决策树方法详解
2022/09/23 Python