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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
node网页分段渲染详解
Sep 05 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
Vue用mixin合并重复代码的实现
Nov 27 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
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
python实现装饰器、描述符
2018/02/28 Python
Python中的heapq模块源码详析
2019/01/08 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python实现串口通信的示例代码
2020/02/10 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python 如何调用 dubbo 接口
2020/09/24 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
银行求职信个人范文
2013/12/16 职场文书
平面设计专业求职信
2014/08/09 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
银行授权委托书范本
2014/10/04 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
工作检讨书怎么写
2015/01/23 职场文书
感恩教育主题班会
2015/08/12 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle