Question

我想要一个jQuery倒计时：

页面下载完成后开始计算
计数到0后重定向到网址

我该怎么做？

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

我使用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 Part：

<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 3

您确定要为此使用Javascript吗？您可能只使用纯HTML：

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

将它放在标题中，转发甚至可以在没有启用Javascript的浏览器上运行。

Answer 4

这是我的例子，基于Jonathan Sampson的例子。这是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 5

您可以使用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 6

我没有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>

在上面的示例中，重定向网址是从文档中超链接的href属性中提取的，您可以将其替换为您想要的任何值。

结帐DEMO

Answer 7

在上面发布的Himel Khan的代码示例中，我更改了

if(updateTime == 0)

到

if(updateTime <= 0)

以防有人在重定向后点击后退按钮。否则它将开始为负数而从不重新定向。

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

我认为有一种更好的方法来完成此修复，因此也许其他人可以添加更好的解决方案

感谢您提供代码。

Answer 8

这个链接很有用 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 9

你可以用这个

<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!!'); }
      });
   });

如何进行jQuery倒计时

9 个答案: