2016-05-13 2 views
2

У меня есть обратный отсчет JavaScript, и я хочу, чтобы он перенаправлялся на другой сайт, когда заканчивается обратный отсчет.Javascript Countdown Timer redirect after End

Как я могу это сделать?

Код:

(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 & P код из интернета:

http://pastebin.com/CvYNBSED 

Обратный отсчет работает отлично, но я хочу перенаправлять, когда заканчивается обратный отсчет.

Edit:

Спасибо за помощь, но моя проблема в том, как я могу сделать, если вопрос или как я могу проверить, когда обратный отсчет закончил?

Я знаю, как сделать перенаправление, но я не знаю, как проверить, завершен ли обратный отсчет.

+0

Отредактировано решение – nonsensei

ответ

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); 
0

Как насчет расширения вашего 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 должно хватить.