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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
javascript获取当前ip的代码
May 10 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
jquery实现轮播图特效
Apr 12 jQuery
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 printf输出格式使用说明
2010/12/05 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python3中zip()函数使用详解
2018/06/29 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python实现图片插入文字
2019/11/26 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
如何手工释放资源
2013/12/15 面试题
校园学雷锋活动月总结
2014/03/09 职场文书
机械工程师岗位职责
2014/06/16 职场文书
教书育人演讲稿
2014/09/11 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
2016年会开场白台词
2015/06/01 职场文书
售房协议书范本
2015/08/11 职场文书