<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时制作</title> <style> .otime span{display:inline-block;padding: 10px 20px;background-color: #f4f4f4;opacity: 0.5;margin-left: 10px;color:#000;font-weight: bolder;} </style> </head> <body> <div class="text"> <p> 距离中秋还剩余: <span id="time" class="otime"></span> </p> <p> 当前时间： <span id="time1" class="otime"></span> </p> </div> </body> <script type="text/javascript"> //这个函数是为了适应格式 比如：01分01秒; function p (n){ return n < 10 ? '0'+ n : n; } //这个函数是为了适应格式 比如：毫秒; function m (m){ if(m<=10){ return '00'+m; }else if(10<m&&m<100){ return '0'+m }else if(100<m&&m<1000){ return m } } oldTime (); newTime (); //倒计时函数 function newTime (){ //定义当前时间 // var startTime = new Date("2016/9/13 05:30:30"); var startTime = new Date (); //定义结束时间 var endTime = new Date("2016/12/22 00:00:00"); //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算； var countDown = (endTime.getTime() - startTime.getTime())/1000; //获取天数 1天 = 24小时 1小时= 60分 1分 = 60秒 var oDay = parseInt(countDown/(24*60*60)); //获取小时数 //特别留意 %24 这是因为需要剔除掉整的天数; var oHours = parseInt(countDown/(60*60)%24); //获取分钟数 //同理剔除掉分钟数 var oMinutes = parseInt(countDown/60%60); //获取秒数 //因为就是秒数 所以取得余数即可 var oSeconds = parseInt(countDown%60); //下面就是插入到页面事先准备容器即可; var html = "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>"; document.getElementById('time').innerHTML = html; //别忘记当时间为0的，要让其知道结束了; if(countDown < 0){ document.getElementById('time').innerHTML = '中秋节活动已结束'; } setTimeout ('newTime()', 200); } function oldTime (){ var oDate = new Date(); //获取年 var oFullyear = oDate.getFullYear(); //获取月份 var oMonth = oDate.getMonth()+1; //获取日期 var oDta= oDate.getDate(); //获取星期 var oDay = oDate.getDay(); var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; //获取小时 var oHours = oDate.getHours(); //获取分钟 var oMinutes = oDate.getMinutes(); //获取秒数 var oSeconds = oDate.getSeconds(); // 获取毫秒数 var omiao = oDate.getMilliseconds(); //插入到容器中 var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>"+ "<span>"+m(omiao)+"毫秒</span>"; document.getElementById('time1').innerHTML = b; // 定时器调用 setTimeout ('oldTime ()', 200); } // 此方法定义data可以是new Data方法兼容ie8及以下浏览器 function parseISO8601(dateStringInRange) { var isoExp = /^s*(d{4})-(dd)-(dd)s*$/, date = new Date(NaN), month, parts = isoExp.exec(dateStringInRange); if(parts) { month = +parts[2]; date.setFullYear(parts[1], month - 1, parts[3]); if(month != date.getMonth() + 1) { date.setTime(NaN); } } return date; } </script> </html>