DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現倒計時及時間對象
js實現倒計時及時間對象
編輯:關於JavaScript     

JS實現倒計時效果代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>h
<style>
#box {
 width: 100%;
 height: 400px;
 background: black;
 color: #fff;
 font-size:40px;
 line-height:400px;
 text-align:center;
}
</style>
<script>
window.onload = function(){
 var oBox = document.getElementById('box');
 var oDate = new Date();//獲取當前時間;
 oDate.setFullYear(2016,11,31);//自動進位;
 oDate.setHours(0,0,0,0);

 function countDown(){
  //未來時間戳減去現在時間的時間戳;
  var ms = oDate.getTime() - new Date().getTime();

  //毫秒轉換成秒
  var oSec = parseInt(ms/1000);

  //秒轉換成天
  var oDay = parseInt(oSec/86400);

  //不到一天剩下的秒數;
  oSec%=86400;

  //轉換成小時
  var oHour = parseInt(oSec/3600);

  //不到一小時剩下的秒數;
  oSec%=3600;

  //轉換成分鐘
  var oMin = parseInt(oSec/60);

  //不到一分鐘剩下的秒數;
  oSec%=60;

  oBox.innerHTML = '距離2016年12月31日還有:'+oDay+'天'+oHour+'時'+oMin+'分'+oSec+'秒';
 } 
 countDown();
 setInterval(countDown,1000);
}
</script>
</head>

<body>
<div id="box">距離2016年12月31日還有:xx天xx時xx分xx秒</div>
</body>
</html>

實現效果入下:

時間戳:1970年1月日至今的毫秒數:oDate.getTime(); //不要問我為什麼是1970年1月至今哦!自個兒百度啦!
時間對象:

   獲取時間:

  var oDate = new Date();
  oYear = oDate.getFullYear();
  oMon = oDate.getMonth();
  oDay = oDate.getDate();
  oHou = oDate.getHours();
  oMin = oDate.getMinutes();
  oSec = oDate.getSeconds();
  oWeek = oDate.getDay();

   設置時間:

  oDate.setFullYear(年,月,日);
  oDate.setMonth(月);
  oDate.setDate(日);
  oDate.setHours(時,分,秒,毫秒);
  時間會自動進位;

大概整理的就這些,還有很多不足的地方,希望大家多提寶貴意見!互相學習!互相取經!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved