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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
jQuery插件的写法分享
Jun 12 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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修正代码
2011/05/09 PHP
基于empty函数的输出详解
2013/06/17 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
Python中的集合类型知识讲解
2015/08/19 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python日期相关操作实例小结
2019/06/24 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
小学生竞选班干部演讲稿
2014/04/24 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
MySQL分布式恢复进阶
2022/07/23 MySQL