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 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
Javascript玩转继承(三)
May 08 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
javascript连续赋值问题
Jul 08 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
理解JavaScript中的对象
Aug 25 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php split汉字
2009/06/05 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
教你php如何实现验证码
2016/01/20 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
三级下拉菜单的js实现代码
2011/05/23 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python configparser模块操作代码实例
2020/06/08 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
新书吧创业计划书
2014/01/31 职场文书
业务员自荐信范文
2014/04/20 职场文书
小学家长学校培训材料
2014/08/24 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
女儿满月酒致辞
2015/07/29 职场文书