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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
轻松实现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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
PHP array_push 数组函数
2009/12/26 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
JS实现图片高亮展示效果实例
2015/11/24 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
原生js调用json方法总结
2018/02/22 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python 实现A*算法的示例代码
2018/08/13 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
基于Python的PIL库学习详解
2019/05/10 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
网络工程专业毕业生推荐信
2013/10/28 职场文书
买房子个人收入证明
2014/01/16 职场文书
工厂见习报告范文
2014/10/31 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
图文详解nginx日志切割的实现
2022/01/18 Servers