Jquery-countdown原檔案下載網站
http://code.google.com/p/jquery-countdown/
功能介紹
縮小版倒數計時器
新增修改功能部分
計算設定日期到現在的倒數計時器( Chrome,IE,FF適用)
效果圖
程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery plugin - 縮小版倒數時鐘 範例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
var timer;
$(document).ready(function(){
counttime('2013-03-28 10:00:00');
});
//新增倒數計時器
function counttime(t)
{
var partyd = mynewdate(t);
var time = diffdate("d",partyd)+"日"+diffdate("h",partyd)+"時"+diffdate("m",partyd)+"分"+diffdate("s",partyd)+"秒";
$('.din_time').countdown({
image: 'images/countdown_digits.png',
startTime: time,
digitWidth:27,
digitHeight:39,
format: 'dd日hh時mm分ss秒'
});
}
//計算時間差的Function
function diffdate(interval,objDate){
var dtThis = new Date();
var d = parseInt((objDate - dtThis) / 86400000);
var h = parseInt((objDate - dtThis - d*86400000) / 3600000);
var m = parseInt((objDate - dtThis - d*86400000 - h*3600000) / 60000);
var s = parseInt((objDate - dtThis - d*86400000 - h*3600000 - m*60000) / 1000 );
if (d<0) d=0;
if (h<0) h=0;
if (m<0) m=0;
if (s<0) s=0;
switch (interval) {
case "s":return paddingLeft(s,2);
case "m":return paddingLeft(m,2);
case "h":return paddingLeft(h,2);
case "d":return paddingLeft(d,2);
}
}
//利用輸入日期格式(YYYY-MM-DD hh-mm-ss)變換成一個date格式
function mynewdate(str) {
str = str.split(' ');
day = str[0].split('-');
time = str[1].split(':');
var date = new Date();
date.setUTCFullYear(day[0], day[1] - 1, day[2]-2);
date.setUTCHours(time[0]-8, time[1], time[2]);
return date;
}
//單位數補零成雙位數
function paddingLeft(num,lenght){
if(num >= 10)
return num;
else
return ("0" +num);
}
</script>
</head>
<body>
2013-03-28 10:00:00 距離現在還有:<div class="din_time" style="padding-top: 0px;font-size: 16px;"></div>
</body>
</html>
倒數計時器的圖片
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHToiG-xadCIMSBWZ28Kl52WBAVrfbeBghBBmVQVTusMQZHZTFABF5lMJQGwc8RSKzwZ6PqwJywvtMyamtX2CmZUf8No8rPzSnlqFSSwetvmdr_04lpJGVXPrwzijCwFeXQtm4QFnWItRB/s320/countdown_digits.png
沒有留言:
張貼留言