Fatal编程技术网
  • jquery/
  • 如何进行jQuery倒计时

如何进行jQuery倒计时

jquery

如何进行jQuery倒计时,jquery,Jquery,我想要一个jQuery倒计时： 页面下载完成后开始计数 计数到0后，它将重定向到url 我该怎么做呢？我想我应该把它分解一下，提供一些既能倒计时又能重定向的功能。毕竟，您可能希望明天倒计时并操纵DOM。因此，我提出了以下jQuery插件，供您使用和研究： // Our countdown plugin takes a callback, a duration, and an optional message $.fn.countdown = function (callback, duratio

我想要一个jQuery倒计时：

  • 页面下载完成后开始计数
  • 计数到0后，它将重定向到url
    • 我该怎么做呢？

    我想我应该把它分解一下，提供一些既能倒计时又能重定向的功能。毕竟，您可能希望明天倒计时并操纵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";
}
    您确定要使用Javascript来完成此操作吗？您可以只使用普通HTML：

    <meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/">
    把它放在标题中，转发甚至可以在没有启用Javascript的浏览器上运行。

    我已经使用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>

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

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

    
正文{字体系列：verdana；字体大小：12px；}
a{文本装饰：无；颜色：蓝色；字体大小：粗体；}
a:悬停{颜色：灰色；字体大小：粗体；}
div#我的计时器{宽度：400px；背景：浅蓝色；边距：0自动；文本对齐：居中；填充：5px 0px 5px 0px；}
    Jquery部分：

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

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

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

    
var settimmer=0；
$（函数（）{
setInterval（函数（）{
var timeCounter=$（“b[id=show time]”）html（）；
var updateTime=eval（计时器）-eval（1）；
$（“b[id=show time]”）html（updateTime）；
if（updateTime==0）{
window.location=（“redirect.php”）；
}
}, 1000);
});
    HTML部分：

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

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

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

    
页面将在10秒内重定向为
    演示链接：

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

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

    if（updateTime==0）

    到

    if（updateTime以下是基于Jonathan Sampson示例的示例
    
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:
    
HTML:
    

    
您的会话即将过期。您将在几秒钟后注销。如果要继续，请保存您的工作并单击此处刷新页面。

    此链接非常有用
支持所有语言
    
只是：）
    

    
$（#mySelector'）。倒计时（{自：新日期（2010年12月1日，25日）}）；

    您可以使用该功能
    

    您可以使用此
    

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

    

    
$（文档）.ready（函数（）{
$（“#计数器”）。倒计时({
至:5,，
是的，
onExpiry:function（）{alert（'bye！！'）；}
});
});

    我有一个简单的解决方案，没有：
    

    
秒=10；
计数器=document.getElementById（'counter'）；
counter.innerText=秒；
i=设置间隔（函数（）{
--证券交易委员会；
如果（秒==1）{
间隔时间（i）；
window.location=document.getElementById（'retry'）.href；
}
counter.innerText=sec；
},1000);

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

    签出此项
    如果加载页面时出现任何图像或问题，并在稍后完成，“等待秒数”倒计时继续或预计将完成加载页面？嗯，“setInerval->setInterval”。它将包含在这种情况下的“clearInterval”“？@andres，我刚刚为间隔添加了一个处理程序，用于
    clearInterval（倒计时）
    @JonathanSampson，很好的脚本。一个问题：我们如何以编程方式重置、停止和启动倒计时？例如，我想在
    （count==0）
    时将
    count
    重置为10，并无限期地停止计时器，稍后以编程方式重新启动计时器。您好，现在有人知道如何取消此计时器吗？@André您想取消，还是暂停/恢复？此链接包含恶意脚本。（我怀疑重定向）@422:问题已经解决。非常感谢您的评论：）这非常有帮助，小提琴节省了很多时间。谢谢在我的例子中，jquery意味着一种无聊的依赖关系。所以，请为这个纯js解决方案竖起大拇指