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>
上一篇:jquery版的网页倒计时效果


下一篇:Javascript 实现倒计时效果