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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
JavaScript 特殊字符
Apr 05 Javascript
javascript 面向对象 function类
May 13 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
javascript实现2048游戏示例
2014/05/04 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python如何重载模块实例解析
2018/01/25 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python实现证件照换底功能
2019/08/20 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
工作的心得体会
2013/12/31 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
先进教师事迹材料
2014/12/16 职场文书
学生检讨书
2015/01/27 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers