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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
JS隐藏号码中间4位代码实例
Apr 09 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中的Streams详细介绍
2014/11/12 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python实现将内容分行输出
2015/11/05 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
Python如何实现单例模式
2016/06/03 面试题
自考自我鉴定范文
2013/10/30 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
小学家长会邀请函
2014/01/23 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
党支部意见范文
2015/06/02 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL