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插入样式实现代码
Feb 22 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
JS实现图片切换效果
Nov 17 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
如何利用js在两个html窗口间通信
Apr 27 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 进程锁定问题分析研究
2009/11/24 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python实现Decorator模式实例代码
2018/02/09 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python代码xml转txt实例
2020/03/10 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
如何用Python徒手写线性回归
2021/01/25 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android