javascript时间自动刷新实现原理与步骤


Posted in Javascript onJanuary 06, 2013

项目结构:

javascript时间自动刷新实现原理与步骤

运行效果:

javascript时间自动刷新实现原理与步骤

=========================================================

代码部分:

=========================================================

/Clock/WebContent/index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme() + "://" 
+ request.getServerName() + ":" + request.getServerPort() 
+ path + "/"; 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<base href="<%=basePath%>" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
</head> 
<body> 
<span id="clock"> </span> 
</body> 
<script type="text/javascript" src="<%=basePath%>js/clock/clock.js" charset="UTF-8"></script> 
</html>

/Clock/WebContent/js/clock/clock.js
/** 
* 时间显示 
* @date 2012-12-31 
* @author hongten(hongtenzone@foxmail.com) 
* 
* @returns 
*/ 
function Clock() { 
var date = new Date(); 
this.year = date.getFullYear(); 
this.month = date.getMonth() + 1; 
this.date = date.getDate(); 
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()]; 
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); 
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); 
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); // 日期:2012-12-31-17:03:18 星期一 
this.toString = function() { 
return "日期:" + this.year + "-" + this.month + "-" + this.date + "-" + this.hour + ":" + this.minute + ":" + this.second + " " + this.day; 
}; 
// 2012-12-31 
this.toSimpleDate = function() { 
return this.year + "-" + this.month + "-" + this.date; 
}; 
// 2012-12-31 17:04:03 
this.toDetailDate = function() { 
return this.year + "-" + this.month + "-" + this.date + " " + this.hour + ":" + this.minute + ":" + this.second; 
}; 
this.display = function(ele) { 
var clock = new Clock(); 
ele.innerHTML = clock.toString(); 
window.setTimeout(function() { 
clock.display(ele); 
}, 1000); 
}; 
} 
// <span id="clock"> </span> 
var clock = new Clock(); 
clock.display(document.getElementById("clock"));

我个人认为这个在web中很实用...所以推荐给大家啦...
Javascript 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
jQuery技巧总结
Jan 01 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
javascript动态创建链接的方法
May 13 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
JS实现打字游戏
Dec 17 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 #Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 #Javascript
javascript编码的几个方法详细介绍
Jan 06 #Javascript
javascript返回顶部效果(自写代码)
Jan 06 #Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 #Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 #Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 #Javascript
You might like
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python 同时运行多个程序的实例
2019/01/07 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python将字典转换为XML的方法
2020/08/01 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
4s店销售经理岗位职责
2014/07/19 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书