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获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
window.location.hash知识汇总
Nov 09 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
vue-cli2.9.3 详细教程
Apr 23 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图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
jQuery的三种$()
2009/12/30 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
JS表的模拟方法
2015/02/05 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python中文竖排显示的方法
2015/07/28 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
学Python 3的理由和必要性
2019/11/19 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
请用用Java代码写一个堆栈
2012/01/26 面试题
实体的生命周期
2013/08/31 面试题
护士节慰问信
2015/02/15 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
导游词之麻姑仙境
2019/11/18 职场文书