本实例效果:剩余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>
时间: 2024-12-09 00:37:33