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 实现GridView异步排序、分页的代码
Feb 06 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
VSCode launch.json配置详细教程
Jun 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
php生成文件
2007/01/15 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
JS实现打字游戏
2019/12/17 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Django框架中的对象列表视图使用示例
2015/07/21 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python变量和字符串详解
2017/04/29 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
中科方德软件测试面试题
2016/04/21 面试题
七年级政治教学反思
2014/02/03 职场文书
安全目标责任书
2014/07/22 职场文书
2014年营销工作总结
2014/11/22 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2016七夕情人节感言
2015/12/09 职场文书
中学语文教学反思
2016/02/16 职场文书