setInterval与clearInterval的使用示例代码


Posted in Javascript onJanuary 28, 2014

setInterval是一个很有用的js函数,可以用来重复执行某些功能,利用这个我们可以实现一些很有趣的功能,比如:

不刷新页面的情况下,"实时"获取其它会员给你发来的问候,并弹出显示之类

下面给一个示例代码:(里面用了一些jquery的方法)

<html>
<head>
<title>jquery 操作 Select</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
var i=1;
var _interval;
function showTime()
{
    var today = new Date();
    $("#msg").html(today.toLocaleString() + ",i=" + i);    
    i++;
    if (i>10)
    {
        clearInterval(_interval);
    }
}
$(document).ready(function(){    
    $("#btnStart").click(function(){
        showTime();
        _interval = setInterval("showTime()", 1000);
    })
    $("#btnStop").click(function(){                
        clearInterval(_interval);
        i=0;
    })
})
</script>
</head>
<body>
<label id="msg"></label> 
<button id="btnStart">开始记时</button> 
<button id="btnStop">停止记时</button>
<script type="text/javascript"></script>
</body>
</html>
Javascript 相关文章推荐
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
详解vue-router基本使用
Apr 18 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Jquery实现的一种常用高亮效果示例代码
Jan 28 #Javascript
基于JQuery实现的Select级联
Jan 27 #Javascript
javascript根据像素点取位置示例
Jan 27 #Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 #Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 #Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 #Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 #Javascript
You might like
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python 切片和range()用法说明
2013/03/24 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
使用python绘制二维图形示例
2019/11/22 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
优秀毕业生自我鉴定
2014/02/11 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
同志主要表现材料
2014/08/21 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
未婚证明格式
2015/06/15 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记