倒计时,在网页制作中会经常用到,特别是一些节日活动页面运用更是广泛。今天就和大家分享一下jQuery如何实现倒计时。话不多说,言归正传,倒计时开始:
首先,既然是用jQuery实现,那么前提就是要先引入jQuery文件(最好是用最新的版本),请看代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时demo</title> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> </head> <body> <div id="remainSeconds" style="display:none">180000</div> <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"> 倒计时: <span id="day"></span>天 <span id="hour"></span>时 <span id="minite"></span>分 <span id="second"></span>秒 </div> </body> <script type="text/javascript" language="javascript"> var SysSecond; var InterValObj; $(document).ready(function() { SysSecond = parseInt($("#remainSeconds").html()); InterValObj = window.setInterval(SetRemainTime, 1000); }); function SetRemainTime() { if (SysSecond > 0) { SysSecond = SysSecond - 1; var second = Math.floor(SysSecond % 60); var minite = Math.floor((SysSecond / 60) % 60); var hour = Math.floor((SysSecond / 3600) % 24); var day = Math.floor((SysSecond / 3600) / 24); // $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒"); //或者这样写, $("#day").html(day); $("#hour").html(hour); $("#minite").html(minite); $("#second").html(second); } else { window.clearInterval(InterValObj); } } </script> </html>
一个简单的倒计时就完成了,OK!谢谢阅读!