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

来源:互联网 时间:1970-01-01

本文章给大家介绍三款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>



相关阅读:
Top