javascript时间自动刷新实现原理与步骤
2013-01-06 00:00
786 查看
项目结构:
运行效果:
=========================================================
代码部分:
=========================================================
/Clock/WebContent/index.jsp
/Clock/WebContent/js/clock/clock.js
我个人认为这个在web中很实用...所以推荐给大家啦...
运行效果:
=========================================================
代码部分:
=========================================================
/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时间自动刷新实现原理与步骤
- javascript实现页面刷新时自动清空表单并选中的方法
- javascript 定时器 实现时间自动更新的特效
- 获取服务器时间戳,实现自动刷新,同时多语言
- [置顶] javascript 定时器 实现时间自动更新的特效
- 到达时间自动点击按钮弹出提示并跳转【JavaScript实现】
- javascript实现页面自动刷新和自动跳转代码
- 原生javascript实现自动更新的时间日期
- javascript(js)自动刷新页面的实现方法总结
- javascript实现页面刷新时自动清空表单并选中的方法
- javascript观察者模式实现自动刷新效果
- asp.net使用javascript实现不刷新页面获取当前时间
- javascript(js)自动刷新页面的实现方法总结
- 原生javascript实现自动更新的时间日期
- javascript(js)自动刷新页面的实现方法总结
- [转]JavaScript实现页面每30秒自动刷新
- 用javascript实现无刷新更新数据的详细步骤 asp
- Javascript实现页面加载完成后自动刷新一遍清除缓存文件
- 用javascript实现无刷新更新数据的详细步骤 asp
- php+ajax实现页面自动刷新时间