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 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
DIV始终居中的js代码
Feb 17 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
js判断是否是手机页面
Mar 17 Javascript
js微信分享实现代码
Oct 11 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 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
mysql建立外键
2006/11/25 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python isinstance函数介绍
2015/04/14 Python
Python素数检测的方法
2015/05/11 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
业务代表的岗位职责
2013/11/16 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
暑期实习鉴定
2013/12/16 职场文书
见习报告格式要求
2014/11/04 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
公司董事任命书
2015/09/21 职场文书
《春酒》教学反思
2016/02/22 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Python语言规范之Pylint的详细用法
2021/06/24 Python
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server