Redirect after countdown ends

Question

Currently, I have this in my HTML code and am not 100% sure on how to redirect to another page I have after the countdown finishes. I am not too familiar with javascript at the moment either, any help is appreciated. I know that when the page loads it takes the current time ( at the .now snippet) and just adds 10 seconds to it rather than a set time the script should end at then display the difference between present and that set time. The issue with this is that when anyone loads this page it would always show a countdown for 10 seconds to it rather than a universal countdown. For example, the time currently is 3:53 and should end at 4:00. Once the time hits 4 push the redirect.

  <!--Countdown Script -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('#countdown17').ClassyCountdown({
          theme: "flat-colors-very-wide",
          end: $.now() + 10
      });
    });
  </script>

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — The Otterlord, Sep 13 '21 at 20:58

score 1 · Accepted Answer · answered Sep 13 '21 at 21:14

You want to get the time from a fixed one. So, utilize Date built-in API instead of jQuery's $.now(), because

This API has been deprecated in jQuery 3.3; please use the native Date.now() method instead.

What time do you want? Determine it beforehand (GMT):

const date1 = new Date('September 13, 2021 04:00:00');

Then, when subtracting the dates you'll get the time remaining.

  <!--Countdown Script -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('#countdown17').ClassyCountdown({
          theme: "flat-colors-very-wide",
          end: date1 - new Date() // gets the difference between determined date and current date
          onEndCallback: () => {
            window.location.href = "http://www.example.com";
          }
      });
    });
  </script>

Remember to handle the case when the time of access was after the pre-defined time.

Thanks! This was exactly what I was looking for! – Frostyyy Sep 14 '21 at 16:28 — Frostyyy, Sep 14 '21 at 16:28

HaukurHaf · Answer 2 · 2021-09-13T21:19:28.743

0

I'm assuming this is the ClassyCountdown() jQuery plugin you are using: https://github.com/arsensokolov/jquery.classycountdown

If that's the case, it has an onEndCallback which is called once the countdown reaches 0.

So your code would become something like this:

  <!--Countdown Script -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('#countdown17').ClassyCountdown({
          theme: "flat-colors-very-wide",
          end: $.now() + 10,
          onEndCallback: function () {
             document.location.href = 'https://www.google.com' // <- The url to redirect to
          }
      });
    });
  </script>

Updated answer to redirect at an absolute time:

$(document).ready(function() {
  setInterval(function() {
    // This is when you want the redirect to happen
    // This is the absolute time, as reported by the users browser
    let hour = 21;
    let minute = 18;
    let second = 20;
    
    let date = new Date();
    
    if (date.getHours() == hour && date.getMinutes() == minute && date.getSeconds() >= second) {            
      document.location.href = 'https://www.whatever.com';
    }    
  }, 1000);      
});

edited Sep 13 '21 at 21:19

answered Sep 13 '21 at 20:58

HaukurHaf

13,522
5
44
59

Would this still take into consideration the actual set time universally rather than when the page is loaded? For example people can constantly refresh the page and the timer would just then restart rather than continue – Frostyyy Sep 13 '21 at 21:00
It's the end time specified in the ClassyCountdown which determines when the redirect happens. When the countdown reaches 0, the redirect will happen. The answer by Coffeezilla above redirects 10 seconds after the page loads, which is a completely different solution and has got nothing to do with the Countdown script you are using. – HaukurHaf Sep 13 '21 at 21:04
... but if you are simply trying to redirect users 10 seconds after they load the page, no matter what the time actually is, then Coffeezilla's answer will work well for you. – HaukurHaf Sep 13 '21 at 21:05
Right so i am still looking for a way to redirect at a specific time rather than when the page loads, because i am using this as a maintenance countdown page for when a page goes live (at that specific time) – Frostyyy Sep 13 '21 at 21:10
See my updated answer. There are more elegant ways to do this, but this works. – HaukurHaf Sep 13 '21 at 21:20

score 0 · Answer 3 · answered Sep 13 '21 at 20:59

add a callback parameter (function) to your countdown

<!--Countdown Script -->
<script type="text/javascript">
$('#countdown17').ClassyCountdown({
    theme: "flat-colors-very-wide",
    end: $.now() + 10,
    onEndCallback: function () {
        window.location.href = "http://www.newlink.com";
    }
});
</script>

score 0 · Answer 4 · answered Sep 13 '21 at 21:00

0

If you're trying to redirect and doesn't matter if is using javascript or not, use the tag from the HTML.

<meta http-equiv="refresh" content="10; URL="https://www.mywebsite.com.br/" />

It will count to 10 and redirect to your URL

answered Sep 13 '21 at 21:00

Coffezilla

376
2
7

Redirect after countdown ends

4 Answers4