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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python函数式编程
2017/07/20 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
tensorflow获取变量维度信息
2018/03/10 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python之list对应元素求和的方法
2018/06/28 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
使用python+whoosh实现全文检索
2019/12/09 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
中层干部培训方案
2014/06/16 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
开学第一周总结
2015/07/16 职场文书