js实现网页倒计时、网站已运行时间功能的代码3例

  1、jQuery.countdown插件

  显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)

  一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义。

  目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/

  例如:

  

复制代码 代码如下:

  <div id="getting-started"></div>

  <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

  <script src="http://hilios.github.io/jQuery.countdown/javascripts/jquery.countdown.min.js"></script>

  <script type="text/javascript">

  $('#getting-started').countdown('2016/01/01 00:00', function(event) {

  $(this).html(event.strftime('%w 周 %d 天 %H:%M:%S'));

  });

  </script>

  输出结果:50 周 01 天 07 小时 18 分 41 秒

  注意:如果需要一共还有多少天数用%D,参数说明:

  

复制代码 代码如下:

  Y: "years"

  m: "months"

  w: "weeks"

  d: "days"

  D: "totalDays"

  H: "hours"

  M: "minutes"

  S: "seconds"

  2、显示格式:距离结束时间还有:00天05小时25分30秒(秒为跑秒)

  

复制代码 代码如下:

  <div id="time" class="time"></div>

  <script language=javascript>

  function show_date_time(){

  window.setTimeout("show_date_time()", 1000);

  target=new Date(2014,0,15,17,0,0);  //注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。

  today=new Date();

  timeold=(target.getTime()-today.getTime());

  sectimeold=timeold/1000

  secondsold=Math.floor(sectimeold);

  msPerDay=24*60*60*1000

  e_daysold=timeold/msPerDay

  daysold=Math.floor(e_daysold);

  e_hrsold=(e_daysold-daysold)*24;

  hrsold=Math.floor(e_hrsold);

  e_minsold=(e_hrsold-hrsold)*60;

  minsold=Math.floor((e_hrsold-hrsold)*60);

  seconds=Math.floor((e_minsold-minsold)*60);

  if (daysold<0) {

  document.getElementById("time").innerHTML="逾期,倒计时已经失效";

  }

  else{

  if (daysold<10) {daysold="0"+daysold}

  if (hrsold<10) {hrsold="0"+hrsold}

  if (minsold<10) {minsold="0"+minsold}

  if (seconds<10) {seconds="0"+seconds}

  if (daysold>0) {

  document.getElementById("time").innerHTML="距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";

  }

  else

  document.getElementById("time").innerHTML="<font color=red>距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>";  //结束时间小于1天,字体呈红色提醒

  }

  }

  show_date_time();

  </script>

  3、 显示格式:已运行0 年 1 天 0 小时 4 分钟 35 秒(秒为跑秒)

  

复制代码 代码如下:

  <span id="sitetime"></span>

  <script language=javascript>

  function siteTime(){

  window.setTimeout("siteTime()", 1000);

  var seconds = 1000

  var minutes = seconds * 60

  var hours = minutes * 60

  var days = hours * 24

  var years = days * 365

  var today = new Date()

  var todayYear = today.getFullYear()

  var todayMonth = today.getMonth()

  var todayDate = today.getDate()

  var todayHour = today.getHours()

  var todayMinute = today.getMinutes()

  var todaySecond = today.getSeconds()

  /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)

  year - 作为date对象的年份,为4位年份值

  month - 0-11之间的整数,做为date对象的月份

  day - 1-31之间的整数,做为date对象的天数

  hours - 0(午夜24点)-23之间的整数,做为date对象的小时数

  minutes - 0-59之间的整数,做为date对象的分钟数

  seconds - 0-59之间的整数,做为date对象的秒数

  microseconds - 0-999之间的整数,做为date对象的毫秒数 */

  var t1 = Date.UTC(2014,0,14,11,19,00)

  var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)

  var diff = t2-t1

  var diffYears = Math.floor(diff/years)

  var diffDays = Math.floor((diff/days)-diffYears*365)

  var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)

  var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)

  var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)

  document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"

  }

  siteTime()

  </script>