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 获取select下拉列表值的代码
Sep 07 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
JavaScript 与 TypeScript之间的联系
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
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
使用python装饰器验证配置文件示例
2014/02/24 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
消防安全检查制度
2014/02/04 职场文书
青年教师培训方案
2014/02/06 职场文书
班长自荐书范文
2014/02/11 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
妈妈活动方案
2014/08/15 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
初中运动会前导词
2015/07/20 职场文书
小学校本教研总结
2015/08/13 职场文书