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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
AngularJS自动表单验证
Feb 01 Javascript
Bootstrap插件全集
Jul 18 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 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判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
搭建pomelo 开发环境
2014/06/24 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jquery密码强度校验
2015/12/02 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
理解Python垃圾回收机制
2016/02/12 Python
python验证码识别的实例详解
2016/09/09 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
使用python模拟命令行终端的示例
2019/08/13 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python eval函数原理及用法解析
2020/11/14 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
专升本自我鉴定
2013/10/10 职场文书
党校学习思想汇报
2014/01/06 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android