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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
js实现AI五子棋人机大战
May 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
Vue实现本地购物车功能
2018/12/05 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
500行python代码实现飞机大战
2020/04/24 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
2014年小班保育员工作总结
2014/12/23 职场文书
教师个人教学总结
2015/02/11 职场文书
缅怀先烈主题班会
2015/08/14 职场文书