My code seems to work on desktop, but it’s not showing up on mobile. I checked on both an iPhone and Android.
For context, I also need the countdown to cut-off after 5pm ET.
$("#Timeremaining").each(function() {
var $this = $(this),
date = new Date(),
usTime = new Date(date.toLocaleString('en-US', {
timeZone: 'America/New_York'
})),
countDownDate = usTime.setHours(16, 59, 59);
var x = setInterval(function() {
var distance = countDownDate - Date.now(),
hours = ('0' + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2),
minutes = ('0' + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2),
$($this).html(hours + " hr " + minutes + " min");
if (distance < 0) {
clearInterval(x);
$('.beforefive').addClass('hide');
$('.afterfive').removeClass('hide');
}
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<span class="beforefive">
<p id="Timeremaining"></p>
</span>
<span class="afterfive hide">
<p>[other text]</p>
</span>