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代码
Aug 13 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
javascript解析json数据的3种方式
May 08 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
angularJS深拷贝详解
Mar 23 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python读取Excel的方法实例分析
2015/07/11 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
详解Anaconda 的安装教程
2020/09/23 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
工程材料采购方案
2014/05/18 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Python实现排序方法常见的四种
2021/07/15 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang
Python实现Hash算法
2022/03/18 Python
python中filter,map,reduce的作用
2022/06/10 Python