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 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
详解javascript脚本何时会被执行
Feb 05 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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的反射实现委托模式的讲解
2019/03/22 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python抓取手机号归属地信息示例代码
2016/11/28 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python binascii 进制转换实例
2019/06/12 Python
python同步windows和linux文件
2019/08/29 Python
基于python实现操作redis及消息队列
2020/08/27 Python
详解python tkinter 图片插入问题
2020/09/03 Python
大学在校生求职信范文
2013/11/21 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
文明寝室申报材料
2014/05/12 职场文书
创先争优活动心得体会
2014/09/04 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
中学生检讨书1000字
2014/10/28 职场文书
投标承诺函范文
2015/01/21 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
春节晚会开场白
2015/05/29 职场文书
建国大业电影观后感
2015/06/01 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书