我怎样才能让一个jQuery倒计时

Question

我想一个jQuery倒计时：

1. 它开始页面下载完成
2. 后计数为0后，计算其重定向到URL

我怎样才能去做？

Answer 1

我想我会打破这一点，并提供一些既倒计时，重定向。毕竟，您可能希望明天倒计时并操作DOM。因此，我想出了下面的jQuery插件，您可以使用，并研究：

// Our countdown plugin takes a callback, a duration, and an optional message 
$.fn.countdown = function (callback, duration, message) { 
    // If no message is provided, we use an empty string 
    message = message || ""; 
    // Get reference to container, and set initial content 
    var container = $(this[0]).html(duration + message); 
    // Get reference to the interval doing the countdown 
    var countdown = setInterval(function() { 
     // If seconds remain 
     if (--duration) { 
      // Update our container's message 
      container.html(duration + message); 
     // Otherwise 
     } else { 
      // Clear the countdown interval 
      clearInterval(countdown); 
      // And fire the callback passing our container as `this` 
      callback.call(container); 
     } 
    // Run interval every 1000ms (1 second) 
    }, 1000); 

}; 

// Use p.countdown as container, pass redirect, duration, and optional message 
$(".countdown").countdown(redirect, 5, "s remaining"); 

// Function to be called after 5 seconds 
function redirect() { 
    this.html("Done counting, redirecting."); 
    window.location = "http://msdn.microsoft.com"; 
} 

Answer 2

你确定，你要使用JavaScript来呢？你可能只是去与普通的HTML：

<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/"> 

把这个标题和前进，甚至会在浏览器上工作，没有启用JavaScript。

Answer 3

我已经使用JQUERY，CSS和HTML创建了倒计时脚本。这是我的完整源代码。演示链接也可用。

CSS部分：

<style type="text/css"> 
    body{ font-family: verdana; font-size:12px; } 
    a{text-decoration: none;color:blue;font-weight: bold;} 
    a:hover{color: gray;font-weight: bold;} 
    div#my-timer{width: 400px;background: lightblue; margin: 0 auto;text-align: center;padding:5px 0px 5px 0px;} 
</style> 

jQuery的部分：

<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 
     var settimmer = 0; 
     $(function(){ 
       window.setInterval(function() { 
        var timeCounter = $("b[id=show-time]").html(); 
        var updateTime = eval(timeCounter)- eval(1); 
        $("b[id=show-time]").html(updateTime); 

        if(updateTime == 0){ 
         window.location = ("redirect.php"); 
        } 
       }, 1000); 

     }); 
    </script> 

HTML部分：

<div id="my-timer"> 
     Page Will Redirect with in <b id="show-time">10</b> seconds   
</div> 

演示链接：http://demos.coolajax.net/php/redirect

我希望这段代码对你有帮助。

Answer 4

在上面贴HIMEL汗的代码示例，我万一有人改变

if(updateTime == 0)

到

if(updateTime <= 0)

命中被重定向后的后退按钮。否则，它将开始变为负数，并且不会重新定向。

请务必注意，您不应该在目标页面上使用此更改链接代码，否则它将循环刷新。如果您进行此更改，请仅在倒计时页面上包含脚本。

我想有一个更好的方式来完成这项修复，所以也许别人可以添加一个更好的解决方案

谢谢你的代码。

Answer 5

这是我的例子，基于乔纳森桑普森的例子。这是jsfiddle链接。http://jsfiddle.net/njELV/1/

的jQuery：

var countdown = { 
    startInterval : function() { 
     var count = 1800; // 30 minute timeout 
     var currentId = setInterval(function(){ 
      $('#currentSeconds').html(count); 
      if(count == 30) { // when there's thirty seconds... 
       $('#expireDiv').slideDown().click(function() { 
         clearInterval(countdown.intervalId); 
         $('#expireDiv').slideUp();      
         window.location.reload(); 
         //or whatever you'd like to do when someone clicks on the div (refresh your session etc). 
       }); 
      } 
      if (count == 0) { 
       window.location.href = '/logout.php'; 
      } 
      --count; 
     }, 1000); 
     countdown.intervalId = currentId; 
    } 
}; 
countdown.startInterval(); 

/* 
Then each time an ajax call is made to fetch a page 
*/ 
if(typeof countdown.oldIntervalId != 'undefined') { 
     countdown.oldIntervalId = countdown.intervalId; 
     clearInterval(countdown.oldIntervalId); 
     countdown.startInterval(); 
     $('#expireDiv').slideUp(); 
    } else { 
     countdown.oldIntervalId = 0; 
    } 

CSS：

#expireDiv { 
    width: 100%; 
    text-align: center; 
    background-color: #63AFD0; 
    padding: 10px; 
    margin: 0; 
    border: 1px solid #024A68; 
    color: #024A68; 
    font-weight: bold; 
    font-size: 125%; 
    box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    -moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    -webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    display:none; 
    cursor: pointer; 
} 

HTML：

<div id="expireDiv"> 
    Your session is about to expire. You will be logged out in <span id="currentSeconds"></span> seconds. If you want to continue, please save your work and click <u>here</u> to refresh the page. 
</div> 

Answer 6

此链接有用 jQuery Countdown支持所有语言

只是:)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.countdown.js"></script> 
<script type="text/javascript"> 
     $('#mySelector').countdown({since: new Date(2010, 12-1, 25)}); 
</script> 

Answer 7

可以使用jQuery animate功能

// Enter num from and to 
$({countNum: 8000}).animate({countNum: 0}, { 
    duration: 8000, 
    easing:'linear', 
    step: function() { 
    // What todo on every count 
    console.log(Math.floor(this.countNum)); 
    }, 
    complete: function() { 
    console.log('finished'); 
    } 
}); 

http://jsbin.com/upazas/1/edit

Answer 8

您可以使用此

<div id="counter"></div> 

<script type="text/javascript" src="http://yourjavascript.com/88131111995/jquery.countdown.js"></script> 

    $(document).ready(function() { 
    $('#counter').countdown({ 
     until: 5, 
     compact: true, 
     onExpiry: function() { alert('bye!!'); } 
     }); 
    }); 

Answer 9

我有这个简单的解决方案，而jquery：

<script> 
    sec = 10; 
    counter = document.getElementById('counter'); 
    counter.innerText = sec; 
    i = setInterval(function(){ 
     --sec; 

     if (sec === 1){ 
      clearInterval(i); 
      window.location = document.getElementById('retry').href; 
     } 
     counter.innerText=sec; 
     },1000); 
    </script> 

在上面的例子，重定向URL被从文档，该文档可能你想要的任何值来替换在一个超链接的href属性萃取。

结帐这个DEMO