【转】仿团购网上的倒计时
本文转自：http://www.zhangxinxu.com/wordpress/?p=987&jdfwkey=fzwmd
效果图
jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'testTime.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> </head> <body> This is my JSP page. <br> <span id="year">0</span>年 <span id="month">0</span>月 <span id="day">0</span>日 <span id="hour">0</span>时 <span id="mini">0</span>分 <span id="sec">0</span>秒 </body> <script type="text/javascript" src="timeCountDown.js"></script><script type="text/javascript">var zxx = {$: function(id){return document.getElementById(id);},futureDate: Date.UTC(2050, 6, 30, 12),obj: function(){return {sec: zxx.$("sec"),mini: zxx.$("mini"),hour: zxx.$("hour"),day: zxx.$("day"),month: zxx.$("month"),year: zxx.$("year")}}};fnTimeCountDown(zxx.futureDate, zxx.obj());</script></html>/** 倒计时的实现*/var fnTimeCountDown = function(d, o){var f = {zero: function(n){var n = parseInt(n, 10);if(n > 0){if(n <= 9){n = "0" + n;}return String(n);}else{return "00";}},dv: function(){d = d || Date.UTC(2050, 0, 1); //如果未定义时间，则我们设定倒计时日期是2050年1月1日var future = new Date(d), now = new Date();//现在将来秒差值var dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60, pms = {sec: "00",mini: "00",hour: "00",day: "00",month: "00",year: "0"};if(dur > 0){pms.sec = f.zero(dur % 60);pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";//月份，以实际平均每月秒数计算pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";//年份，按按回归年365天5时48分46秒算pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";}return pms;},ui: function(){if(o.sec){o.sec.innerHTML = f.dv().sec;}if(o.mini){o.mini.innerHTML = f.dv().mini;}if(o.hour){o.hour.innerHTML = f.dv().hour;}if(o.day){o.day.innerHTML = f.dv().day;}if(o.month){o.month.innerHTML = f.dv().month;}if(o.year){o.year.innerHTML = f.dv().year;}setTimeout(f.ui, 1000);}};f.ui();};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>限时抢购倒计时间表</title><style type="text/css">*{margin:0;padding:0;}#content{width:300px;margin:0 auto;padding:10px;background:#eee;border:1px solid #999;}#content p span{color:red;font:bold 20px Arial;}#content p a{font:12px/23px '宋体';color:#888;}.div1{ display:none;}</style></head><body><div id="content"><h1>限时抢购啦！</h1><p>还剩<span id="times"></span></p></div><SCRIPT LANGUAGE="JavaScript">function fresh(){ var endtime=new Date("2010/4/3,23:59:59"); var nowtime = new Date(); var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000); d=parseInt(leftsecond/3600/24); h=parseInt((leftsecond/3600)%24); m=parseInt((leftsecond/60)%60); s=parseInt(leftsecond%60); document.getElementById("times").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒"; if(leftsecond<=0){ document.getElementById("times").innerHTML="抢购已结束"; clearInterval(sh); }}fresh()var sh;sh=setInterval(fresh,1000);</SCRIPT></body></html>