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 相关文章推荐
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 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小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
用python读写excel的方法
2014/11/18 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python3使用requests发闪存的方法
2016/05/11 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
浅谈python之新式类
2018/08/12 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Django实现基于类的分页功能
2019/10/31 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
python 如何实现遗传算法
2020/09/22 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
公司董事长岗位职责
2014/06/08 职场文书
技术负责人岗位职责
2015/02/10 职场文书
被告代理词范文
2015/05/25 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android