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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JS实现炫酷轮播图
Nov 15 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
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php的4种常用运行方式详解
2016/12/22 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
工作过失检讨书
2014/02/23 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
春节请假条
2014/04/11 职场文书
激励员工的口号
2014/06/16 职场文书
2015年党性分析材料
2014/12/19 职场文书