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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
jquery replace方法去空格
May 08 jQuery
薪资那么高的Web前端必看书单
Oct 13 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
Vue使用mixin分发组件的可复用功能
Sep 01 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php构造函数实例讲解
2013/11/13 PHP
php实现微信扫码支付
2017/03/26 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
服装促销活动方案
2014/02/23 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
六五普法学习心得体会
2016/01/21 职场文书
Jsonp劫持学习
2021/04/01 PHP
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
vue实现拖拽交换位置
2022/04/07 Vue.js
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技