我怎樣才能讓一個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