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 相关文章推荐
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
JavaScript中的Proxy对象
Nov 27 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
JS实现简单打字测试
2020/06/24 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python3字符串操作总结
2019/07/24 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Python 使用office365邮箱的示例
2020/10/29 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
党员学习十八大感想
2014/01/17 职场文书
2014学年自我鉴定
2014/02/23 职场文书
房地产广告词大全
2014/03/19 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
会计稽核岗位职责
2015/04/13 职场文书
人代会简报
2015/07/21 职场文书
建议书的格式及范文
2015/09/14 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android