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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
Angular2自定义分页组件
Apr 19 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
使用vue制作滑动标签
Sep 21 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数据库操作方法(MYSQL版)
2011/06/08 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
在vue中封装可复用的组件方法
2018/03/01 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python读写文件基础知识点
2019/06/10 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
高三语文教学反思
2014/01/15 职场文书
一句话工作感言
2014/03/01 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
找工作求职信
2014/07/07 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android