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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python三级目录展示的实现方法
2016/09/28 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
python模块内置属性概念及实例
2021/02/18 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
学期评语大全
2014/04/30 职场文书
婚纱店策划方案
2014/05/22 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
会计求职信怎么写
2015/03/20 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
六年级作文之自救
2019/12/19 职场文书