Countdown with Time Zone

by Lucaskazama

HTML

Página à ser redirecionada

<div class="timeRequested"></div>

<div class="js-countdown"></div>
<div class="result"></div>

<a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" target="_blank">Time Zones List</a>

<div>
Brazil Time: <span id="brazil" ></span> <br>
Mexico Time: <span id="other"></span>
</div>
<p id="redirect">
Result
</p>

JavaScript

/* Time Zone Date */

/* This one need to be on the functions library */
function convertTZ(date, tzString) {
    return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));   
}
/* End Time Zone Date */

/* Countdown */

/* This one need to be on the functions library */
function countDown(launchDate){
    setInterval(function() {

    let now = new Date().getTime();
    let distance = launchDate - now;

    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    $('.js-countdown').html(days + "d " + hours + "h "+ minutes + "m " + seconds + "s ");

    if (distance < 0) {
      clearInterval(launchDate);
      $('.js-countdown').html("0d 0h 0m 0s");    
    }
  }, 1000);
}  

/* End Countdown */

const eventDate = convertTZ("2022/02/28 14:59:59 -0300", "America/Sao_Paulo");
const eventDate2 = convertTZ("2022/02/28 14:59:59 -0300", "America/Mexico_City");
$('#brazil').html(eventDate);
$('#other').html(eventDate2);

/* Now we can change the time zones */
/* -0300 is the Brazil time zone */

countDown(eventDate);


/* Environment Redirect */

if(window.location.host.indexOf('webflow.io') !== -1){ // Development
	// Password Script Here - We can use cookies to auto sign in
} else{ //Production
    if(eventDate <= new Date()){
			$("#redirect").text("Redirected");
    } else{
    	$("#redirect").text("Not Redirected");
    }
	// Production Integrations Here (GTM, HOTJAR, Google Optmize)
  // Custom Redirects here
}

/* End Environment Redirect */