DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript的聖誕倒計時數字鐘
JavaScript的聖誕倒計時數字鐘
編輯:關於JavaScript     
查看效果:http:///keleyi/phtml/jstexiao/18.htm

以下是代碼:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript的聖誕倒計時數字鐘-</title>
<style type="text/css" media="all">
#keleyi {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
color: #164BA0;
background-color: #D1D1D1;
border: 1px solid #83AAD3;
width: 400px;
text-align: center;
}

#keleyi span {
font-size: 80%;
}
</style>

</head>

<body>

<div id="keleyi">Christmas Countdown</div>
<br /><a href="http://" title="Back to article - JavaScript Christmas Countdown Digital Clock">原文</a>

<script type="text/javascript">

function iCounter() {
var keleyi=(new Date().getMonth()>=11 && new Date().getDate()>25)? (new Date().getFullYear())+1 : new Date().getFullYear();
var cDateTime=new Date();
var tDateTime=new Date("December 25, "+keleyi+" 0:0:00");
//var tDateTime=new Date("June 11, "+keleyi+" 0:0:00");
var timeDiff=(tDateTime-cDateTime)/1000; //difference btw target date and current date, in seconds
var oneMin=60; //1 minute in seconds
var oneHour=60*60; //1 hour in seconds
var oneDay=60*60*24; //1 day in seconds
var totalDay=Math.floor(timeDiff/oneDay);
var totalHour=Math.floor((timeDiff-totalDay*oneDay)/oneHour);
var totalMin=Math.floor((timeDiff-totalDay*oneDay-totalHour*oneHour)/oneMin);
var totalSec=Math.floor((timeDiff-totalDay*oneDay-totalHour*oneHour-totalMin*oneMin));
//Disply Christmas Countdown to Web Browser
document.getElementById("kel" + "eyi").innerHTML = '距離聖誕節還有<br />' + totalDay + ' <span>天,</span> ' + totalHour + ' <span>時,</span> '
+ totalMin + ' <span>分,</span> ' + totalSec + ' <span>秒,</span>';
setTimeout("iCounter()",1000);
}

iCounter();

</script>
<br />


<div>
<p>來源:<a href="http:///a/bjad/b1lipq9t.htm">原文</a> <a href="http:///a/bjad/3s0khhpt.htm">同類效果</a> <a href="http://">首頁</a> <a href="http:///keleyi/phtml/">特效庫</a> <a href="http:///a/bjac/iqiiedy2.htm">聖誕快樂</a></p>
</div>
<!-- END: Powered by -->

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