jQuery實現倒計時效果-楊秀徐


本實例效果:剩余368天22小時39分57秒結束

代碼簡單易懂,適用各種倒計時;

<!DOCTYPE html>
<head>
<title>jQuery實現倒計時效果-楊秀徐</title>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
/*
@作者:楊秀徐,主頁 http://www.gzmsg.com
@用途:jQuery實現倒計時效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0})
@參數:time: 結束時間,type:顯示方式(0顯示天數,1不顯示天數)
*/
$.fn.countDown = function (opt) {
var opt = $.extend({
time : null,
type : 0
}, opt);

var edtime = new Date(opt.time).getTime(), //月份是實際月份-1
edsecond = (edtime - new Date().getTime()) / 1000;

var eday = $(this).find('.day'),
ehour = $(this).find('.hour'),
eminute = $(this).find('.minute'),
esecond = $(this).find('.second');

var timer = setInterval(function () {
if (edsecond > 1) {
edsecond -= 1;
var day = Math.floor((edsecond / 3600) / 24),
hour = Math.floor((edsecond / 3600) % 24),
minute = Math.floor((edsecond / 60) % 60),
second = Math.floor(edsecond % 60);
if(opt.type===0){
$(eday).text(day); //計算天
$(ehour).text(hour < 10 ? "0" + hour : hour); //計算小時
}else{
hour = day * 24;
$(ehour).text(hour < 10 ? "0" + hour : hour); //計算小時-沒有天數
}
$(eminute).text(minute < 10 ? "0" + minute : minute); //計算分鍾
$(esecond).text(second < 10 ? "0" + second : second); //計算秒殺
} else {
clearInterval(timer);
}
}, 1000);
}
$(function () {
$(".time").countDown({
time: "2015/12/1 10:00:00",
type:0
});
});
</script>
</head>
<body>
<div class="time">剩余<span class="day">0</span>天<span class="hour">00</span>小時<span class="minute">00</span>分<span class="second">00</span>秒結束</div>
</body>
</html>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com