I created a JavaScript countdown counter that displays minutes and seconds using the following line of code:
document.getElementById("demo").innerHTML = Number(this.minutes) + 'm' + Number(this.seconds) + 's ';
However, on iOS devices, it shows NANm NANs due to this line. I need to find another method to show minutes and seconds.
Below is my TypeScript code:
if ((this.Fajardistance <= '59') && (this.Fajardistance >= '0')) {
let current_datetime = new Date()
let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate()
console.log("formatted_date", formatted_date);
// Set the date we're counting down to
var countDownDate = new Date(`${formatted_date.toString()} ${value.fajar_iqamah}`).getTime();
console.log("countDownDate", countDownDate);
// Update the count down every 1 second
this.intervalTime = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the countdown date
var distance = countDownDate - now;
this.testing = false;
// Calculate minutes and seconds
this.minutes = Math.floor((Number(distance) % (1000 * 60 * 60)) / (1000 * 60));
this.seconds = Math.floor((Number(distance) % (1000 * 60)) / 1000);
// Display minutes and seconds in desired output
console.log("Minutes:", this.minutes);
console.log("Seconds:", this.seconds);
// Commented out incorrect way of displaying minutes and seconds for iOS devices
//document.getElementById("demo").innerHTML = Number(this.minutes) + 'm' + Number(this.seconds) + 's ';
// If the countdown is over, hide the element
if (distance < 0) {
clearInterval(this.intervalTime);
document.getElementById("demo").style.display = "none";
}
}, 1000);
}
Home.html
<!--<span mode="md" id="demo" style="text-align:right;font-size: 16px; display:inline-block;margin-left: 16px; margin-top: 0px; color:red;"></span>-->
I previously used the above commented method to display the countdown but found it was not suitable for iOS devices.