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 相关文章推荐
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
在 HTML 页面中使用 React的场景分析
Jan 18 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
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
Python3中的真除和Floor除法用法分析
2016/03/16 Python
详解Python中heapq模块的用法
2016/06/28 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
结构工程研究生求职信
2013/10/13 职场文书
季度思想汇报
2014/01/01 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
求职面试个人自我评价
2014/02/28 职场文书
建筑工地宣传标语
2014/06/18 职场文书
节约用水的口号
2014/06/20 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android