<!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>倒计时js
原文地址：https://www.cnblogs.com/NB-JDzhou/p/8794736.html