js clearInterval()方法的定义和用法


Posted in Javascript onNovember 11, 2015

此方法能够取消setInterval()方法设置的定时器。

此方法的参数必须是要取消相应的setInerval()方法的返回值。

点击可参阅更多window对象的属性和方法。

语法结构:

clearInterval(id)

参数列表:

参数 描述
id 必需。此id是setInerval()的返回值,是此setInerval()方法的唯一标识。

浏览器支持:

(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>window对象的clearInterval()方法 -蚂蚁部落</title>
<style type="text/css">
#num{
 width:100px;
 height:100px;
 text-align:center;
 line-height:100px;
 background-color:green;
 margin:50px auto 0px auto;
 color:red;
}
#btdiv{
 width:76px;
 height:76px;
 margin:0px auto;
}
</style>
<script type="text/javascript">
var a=0;
window.onload=function(){
 var num=document.getElementById("num");
 var bt=document.getElementById("bt");
 function jisuan(){
 num.innerHTML=a;
 a=a+1;
 }
 var flag=setInterval(jisuan,1000);
 bt.onclick=function(){
 clearInterval(flag);
 }
}
</script>
</head>
<body>
<div id="num"></div>
<div id="btdiv"><button id="bt">点击取消</button></div>
</body>
</html>

以上代码点击按钮可以取消数字自增效果。

Javascript 相关文章推荐
模仿百度三维地图的js数据分享
May 12 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
jquery原理以及学习技巧介绍
Nov 11 #Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 #Javascript
轻松实现javascript数据双向绑定
Nov 11 #Javascript
谈谈对offsetleft兼容性的理解
Nov 11 #Javascript
详解 javascript中offsetleft属性的用法
Nov 11 #Javascript
jquery事件的ready()方法使用详解
Nov 11 #Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP面向对象精要总结
2014/11/07 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
js实现拖拽效果
2015/02/12 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
Python正则捕获操作示例
2017/08/19 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python 下载及安装详细步骤
2019/11/04 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
庆八一活动方案
2014/01/25 职场文书
小学教师办公室制度
2014/02/03 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers