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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
分享vim python缩进等一些配置
2018/07/02 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
谈谈Python中的while循环语句
2019/03/10 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
心得体会开头
2014/01/01 职场文书
辩论赛主持词
2014/03/18 职场文书
客户答谢会活动方案
2014/08/31 职场文书
教育教学读书笔记
2015/07/02 职场文书
勤俭节约主题班会
2015/08/13 职场文书
初中数学教学反思范文
2016/02/17 职场文书