Javascript/Jquery——简单定时器的多种实现方法


Posted in Javascript onJuly 03, 2013

第一种方法:

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>定时器</title> 
<script language="javascript" src="jquery-1.4.2.js"></script> 
<script language="javascript"> 
//使用setInterval间歇调用 (不建议使用该方法) 
$(function(){ 
setInterval(function(){ 
$("#currentTime").text(new Date().toLocaleString()); 
},1000); 
}); 
</script> 
</head> 
<body> 
<div id="currentTime"></div> 
</body> 
</html>

第二种方法:
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<title>定时器</title> 
<script language="javascript" src="jquery-1.4.2.js"></script> 
<script language="javascript"> 
//使用setTimeout超时调用 
function startTime(){ 
$("#currentTime").text(new Date().toLocaleString()); 
setTimeout('startTime()',1000); 
} 
</script> 
</head> 
<body onload="startTime()"> 
<div id="currentTime"></div> 
</body> 
</html>

第三种方法:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<title>定时器</title> 
<script type="text/javascript"> 
var c=0; 
var t; 
function timedCount(){ 
document.getElementById('txt').value=c; 
c=c+1; 
t=setTimeout("timedCount()",1000); 
} 
function stopCount(){ 
clearTimeout(t); 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="开始计时!" onclick="timedCount()"/> 
<input type="text" id="txt"/> 
<input type="button" value="停止计时!" onclick="stopCount()"/> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 #Javascript
JS去除右边逗号的简单方法
Jul 03 #Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 #Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 #Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 #Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 #Javascript
JS实现可改变列宽的table实例
Jul 02 #Javascript
You might like
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
php中的登陆login
2007/01/18 PHP
PHP中的extract的作用分析
2008/04/09 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
js的回调函数详解
2015/01/05 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python获取交互式ssh shell的方法
2019/02/14 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
就业协议书样本
2014/08/20 职场文书
英文演讲稿开场白
2014/08/25 职场文书
英语复习计划
2015/01/19 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书