倒计时（jQuery）

倒计时，在网页制作中会经常用到，特别是一些节日活动页面运用更是广泛。今天就和大家分享一下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！谢谢阅读！

巴特西

倒计时（jQuery）

最新文章

热门文章