Jquery倒数计时实现代码setTimeout/Countdown

JQuery

1个成员

Jquery倒数计时实现代码setTimeout/Countdown

发表于 2017-02-15 • 4227 次查看

本文章给大家介绍三款jquery倒计时实现程序，包括使用Countdown倒计时插件与setTimeout来实现，下面我把三段代码贴出来，希望对大有所帮助。

先我们来介绍利用jQuery Countdown 插件

首先在页面的 head 中引入 jQuery 框架和 jQuery Countdown 插件

代码如下	复制代码
<script src="jquery.min.js"></script> <script src="jquery.countdown.min.js"></script>

然后再添加用于呈现 countdown 倒计时的代码，如

代码如下	复制代码
<div id="counter"></div>

最后初始化就大功告成了

代码如下	复制代码
$('#counter').countdown({ stepTime: 60, format: "dd:hh:mm:ss", startTime: new Date(2012,10,5,1,1,1),//也支持"01:12:32:55"的形式 digitImages: 6, digitWidth: 53, digitHeight: 77, autoStart: true, image: 'digits.png', timerEnd: function () { alert('xxxx'); },//设置回调方法 });

如果不使用插件我们可使用setTimeout函数来实例

代码如下

复制代码

<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        var timeout;
        var count = 10; // 倒数十下
        $(function() {
            timeout = setTimeout(BtnCount, 1000); // 1s执行一次BtnCount
        });
        BtnCount = function() {
               // 启动按钮
               if (count == 0) {
                $('#btnSubmit').attr("disabled", "");
                $('#btnSubmit').val("确定");
                clearTimeout(timeout);           // 可取消由 setTimeout() 方法设置的 timeout
            }
            else {
                count--;
                $('#btnSubmit').val("确(" + count.toString() + ")定");
                setTimeout(BtnCount, 1000);
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnSubmit" runat="server" Text="确定" Enabled="false"
            onclick="btnSubmit_Click"/>
    </div>
    </form>
</body>

再来一个

代码如下

复制代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Jquery实现倒计时效果</title>
<script type="text/javascript" src="/jquery.min.js"></script>

<script type="text/javascript">
var SysSecond;
var InterValObj;

$(document).ready(function() {
SysSecond = parseInt($("#remainSeconds").html()); //这里获取倒计时的起始时间
InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行
});

//将时间减去1秒，计算天、时、分、秒
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 {//剩余时间小于或等于0的时候，就停止间隔函数
   window.clearInterval(InterValObj);
   //这里可以添加倒计时时间为0后需要执行的事件
}
}
</script>

</head>

<body>

<div id="remainSeconds" style="display:none">360000</div>
<div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>

</body>
</html>

只看楼主回复倒序查看回复

发表回复

你还没有登录，请先登录或注册！

(大小不能超过2MB，文件类型支持png ,jpg ,gif ,doc ,xls ,txt ,rar ,zip .)