Question

我有一个JavaScript Countdown，我想让它在倒计时结束时重定向到另一个网站。

我该怎么做？

代码：

(function ( $ ) {

"use strict";

$.fn.countdownTimer = function( options ) {


    // This is the easiest way to have default options.
    var settings = $.extend({
        endTime: new Date()
    }, options );

    var $this = $(this);

    var $seconds = $this.find(".time.seconds");
    var $minutes = $this.find(".time.minutes");
    var $hours = $this.find(".time.hours");
    var $days = $this.find(".time.days");

    var seconds = 0;
    var minutes = 0;
    var days = 0;
    var hours = 0;

    var switchCountdownValue = function ($obj, val) {
        // Add leading zero
        var s = val+"";
        while (s.length < 2) s = "0" + s;

        if(Modernizr.cssanimations) {
            // Fade out previous
            var prev = $obj.find(".value").addClass("fadeOutDown").addClass("animated");

            // Add next value
            var next = $("<div class='value'>" + s + "</div>");
            $obj.prepend(next);
            // Fade in next value
            next.addClass("fadeInDown").addClass("animated");
            // Remove from DOM on animation end
            // Fix for Safari (if window is not active, then webkitAnimationEnd doesn't fire, so delete it on timeout)
            var to = setTimeout(function(){ prev.remove() }, 200);
            prev.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                prev.remove();
                clearTimeout(to);
            });

        } else {
            // Remove previous value
            var prev = $obj.find(".value").remove();
            // Add next value
            var next = $("<div class='value'>" + s + "</div>");
            $obj.prepend(next);
        }
    }

    var timerId = countdown(settings.endTime,
        function(ts) {
            if(seconds != ts.seconds) {
                switchCountdownValue($seconds, ts.seconds);
                seconds = ts.seconds;
            }
            if(minutes != ts.minutes) {
                switchCountdownValue($minutes, ts.minutes);
                minutes = ts.minutes;
            }
            if(hours != ts.hours) {
                switchCountdownValue($hours, ts.hours);
                hours = ts.hours;
            }

            if(days != ts.days) {
                switchCountdownValue($days, ts.days);
                days = ts.days;
            }
        },
        countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS);


    return this;

};}( jQuery ));

HTML：

<script type="text/javascript">
$().ready(function(){
    $(".countdown").countdownTimer({
        endTime: new Date("May 13, 2016 20:00:00")
    });


    $("#notifyMe").notifyMe();


    $("#bg-canvas").bezierCanvas({
        maxStyles: 1,
        maxLines: 50,
        lineSpacing: .07,
        spacingVariation: .07,
        colorBase: {r: 120,g: 100,b: 220},
        colorVariation: {r: 50, g: 50, b: 30},
        moveCenterX: 0,
        moveCenterY: 0,
        delayVariation: 3,
        globalAlpha: 0.4,
        globalSpeed:30,
    });



    $().ready(function(){
        $(".overlap .more").click(function(e){
            e.preventDefault();
            $("body,html").animate({scrollTop: $(window).height()});
        });
    });     


});
</script>

来自互联网的C＆amp; P代码：

http://pastebin.com/CvYNBSED

倒计时工作正常，但我想在倒计时结束时重定向。

编辑：

感谢您的帮助，但我的问题是，如何解决if问题或如何查看倒计时结束？

我知道如何进行重定向，但我不知道如何检查倒计时是否已完成。

Answer 1

How to redirect to another webpage in JavaScript/jQuery?

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

只要你的倒计时有效，就像你说的那样。

编辑。

尝试检查：

var timerId = countdown(settings.endTime,
    function(ts) {
        if(seconds != ts.seconds) {
            switchCountdownValue($seconds, ts.seconds);
            seconds = ts.seconds;
        }
        if(minutes != ts.minutes) {
            switchCountdownValue($minutes, ts.minutes);
            minutes = ts.minutes;
        }
        if(hours != ts.hours) {
            switchCountdownValue($hours, ts.hours);
            hours = ts.hours;
        }

        if(days != ts.days) {
            switchCountdownValue($days, ts.days);
            days = ts.days;
        }

        // maybe this will work.
        // I didn't check your countdown library because it's minified / uglified
        if(days == 0 && hours == 0 && minutes == 0 && seconds == 0){
            //redirect here 
        }
    },
    countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS);

Answer 2

如何扩展你的countdownTimer课程以添加onDone功能，以便在完成倒计时后执行？

...
var settings = $.extend({
  endTime: new Date(),
  onDone: function () { 
    window.location.href('http://www.google.com') 
  }
}, options );
...

然后让您的组件在倒计时结束时执行该方法：

...
prev.one('webkitAnimationEnd ...', function(){
  if (settings.onDone) {
    settings.onDone();
  }
});
...

只是一个想法，但只是回答重定向的问题，那么@ nonsensei就足够了。

结束后Javascript倒计时定时器重定向

2 个答案: