您的位置：首页 > Web前端 > JQuery

jquery版的网页倒计时效果

2016-03-24 23:02 495 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery版的网页倒计时效果</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
var time = 6000;//倒计时总秒数量
(function () {
var intDiff = parseInt(time);//倒计时总秒数量
function timer(intDiff) {
window.setInterval(function () {
var day = 0, hour = 0, minute = 0, second = 0;//时间默认值
if (intDiff > 0) {
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('#day_show').html(day);
$('#hour_show').html(hour);
$('#minute_show').html(minute);
$('#second_show').html(second);
intDiff--;
}, 1000);
}

$(function () {
timer(intDiff);
});
})(time)

})
</script>
</head>
<body>
<h1>网页上的倒计时</h1>
<div class="time-item">
<span id="day_show">0天</span>
<strong id="hour_show">0时</strong>
<strong id="minute_show">0分</strong>
<strong id="second_show">0秒</strong>
</div>
<!--倒计时模块-->
<!--<script src="http://www.jq22.com/js/jq.js"></script>-->

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航