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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
用户注册常用javascript代码
2009/08/29 Javascript
JS 表单验证大全
2011/11/23 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
React优化子组件render的使用
2019/05/12 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
js动态生成表格(节点操作)
2021/01/12 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python实现计算倒数的方法
2015/07/11 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python 装饰器使用详解
2017/07/29 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python代码xml转txt实例
2020/03/10 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
租房协议书
2014/04/10 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
淮海战役观后感
2015/06/11 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Python如何将list中的string转换为int
2022/07/15 Ruby
VUE递归树形实现多级列表
2022/07/15 Vue.js