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 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
js实现网页抽奖实例
Aug 05 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
JavaScript实现简单图片切换
Apr 29 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 $_SERVER当前完整url的写法
2009/11/12 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
python写xml文件的操作实例
2014/10/05 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
电焊工岗位工作职责
2014/07/09 职场文书
首都博物馆观后感
2015/06/05 职场文书