jquery实现简单定时器自动执行示例
实现一个简单的定时器处理效果,使用了setInterval来进行定时器的执行,自动执行,手动启动定时器,停止定时器的操作。
源代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo测试-建百站www.jianbaizhan.com</title> </head> <body> <button id="run">启动定时器</button> <button id="close">停止定时器</button> <div></div> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script> <script type="text/javascript"> //当页面执行完毕执行代码 $(function(){ //定义定时器变量 var interval; //加载立即执行第一次 goToDo(); //初始化自动执行。毫秒计算,当期表示2秒调用goToDo方法一次 interval = setInterval("goToDo()",2 * 1000 ); //监控id="run"的按钮,点击按钮进行开启执行定时器 $("#run").click(function(){ //清除当前的定时器,防止重复启动定时器 clearInterval(interval); //执行启动定时器 interval = setInterval("goToDo()",2 * 1000 ); //文本交互 $('div').append("<p>定时器已启动</p>"); }); //监控id="close"的按钮,点击按钮进行关闭定时器 $("#close").click(function(){ //清除定时器 clearInterval(interval); //文本交互 $('div').append("<p>定时器已停止</p>"); }); }); //goToDo要执行的方法 function goToDo(){ //时间,记录执行的时间 var date = new Date(); //对div添加内容,展示效果 $('div').append("<p>"+ date +"</p>"); } </script> </body> </html>
本文作者: Liaodeity
本文链接: https://www.jianbaizhan.com/article/327
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!