首页 > 代码库 > bobojQuery实现倒计时效果
bobojQuery实现倒计时效果
使用jQuery实现倒计时效果，这个实例是在页面上显示剩余几天几小时几分几秒的效果。
在头部引用最新的jQuery.js文件：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.mamicode.com/jQuery.js" type="text/javascript"></script>
</head>
前台页面：
<body>
<div id="remainSeconds" style="display:none">180000</div>
<div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
</body>
jQuery代码：
<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 + "秒");
} else {
window.clearInterval(InterValObj);
}
}
</script>