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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jquery中动态效果小结
Dec 16 Javascript
Script的加载方法小结
Jan 12 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
原生javascript获取元素样式
Dec 31 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
图片按比例缩放函数
2006/06/26 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python中max函数用法实例分析
2015/07/17 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
pandas删除指定行详解
2019/04/04 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
技术副厂长岗位职责
2013/12/26 职场文书
公司会议策划方案
2014/05/17 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android