I’ve a simple JS countdown –
// I set the time_remaining during page load
let time remaining = $("#time-remaining).val();
let countdown = setInterval(function () {
let minutes = Math.floor(time_remaining / 60);
let seconds = time_remaining % 60;
// Code to displaying minutes and seconds in html
// goes here.
if(time_remaining === 0) {
clearInterval(countdown);
}
}, 1000);
Now, in order to compensate for the halted setInterval, I make use of the visibility change event as follows –
$(document).on('visibilitychange', function() {
if(document.visibilityState === 'visible') {
axios.get('/get-time-remaining')
.then(function (response) {
time_remaining = response.data.time_remaining
});
}
});
That is, whenever the user screen gets visible, I fetch the time remaining from server and update my time_remaining variable.
This approach works okay; does introduce a bit of delay but does the job.
However, I’ve observed that visibilitychange triggers ONLY WHEN user’s mobile screen has screen-lock enabled.
If the user unlocks the mobile; visibilitychange event is triggered and I get my time_remaining as expected.
However, without a screen-lock, that even is not triggered; and thus, the countdown does not function properly.
I’ve considered different approaches such as –
Polling the server every few seconds and fetch the correct time remaining; and adjust the countdown on user’s mobile.
Making use of service worker; but I’m not exactly sure how to make it work.
Maybe there’s some other JS event that gets triggered when the user has the browser window ‘focused’ or ‘visible’; on which I can trigger my AJAX call to the server to get correct time remaining.
I created a countdown using js,This code is supposed to show a seconds,minutes, hours countdown between 2 dates on an HTML page.
Everything is working well in desktop
but I have a problem in mobile he doesn’t show the time but a problem 
I don’t have any idea why!! there is any problem in js code or css .. ?
any help please !
// Set the date we're counting down to
var countDownDate = new Date("Jun 26, 2020 9:00:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("countdown").innerHTML = hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
.gauge {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
transition: height .3s ease;
}
.progress {
height: 48px;
position: relative;
line-height: 48px;
vertical-align: middle;
background-color: rgba(0,0,0,.25);
transition: background .6s ease;
}
.progress .progress__labels {
color: #fff;
}
.progress__labels--spaced {
justify-content: space-between;
}
.progress__labels {
display: flex;
align-items: center;
height: 100%;
padding: 0 12px;
position: relative;
z-index: 1;
}
.progress__labels * {
line-height: 1;
vertical-align: middle;
}
.progress__labels--spaced .progress__label--right {
margin-left: auto;
}
.progress__determinate {
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: width .2s linear;
}
.bg--warning {
background-image: #EB0F9B;
}
.bg--warning {
background-color: #EB0F9B!important;
}
.gauge__countdown, .gauge__percentage {
font-size: 1.5rem;
}
.carousel--desktop, .hidden {
display: none!important;
}
*, :after, :before {
box-sizing: border-box;
}
@media (min-width: 992px){
.progress {
height: 72px;
line-height: 72px;
}
.gauge__countdown, .gauge__percentage {
font-size: 3.5rem;
}
.gauge__countdown, .gauge__percentage {
font-size: 3.5rem;
}
}
@media (min-width: 768px){
.m-visible-inline {
display: inline!important;
}
.title2, h2 {
font-size: 1.5rem;
}
.gauge__percentage {
margin: 0 6px;
}
.m-visible-inline {
display: inline!important;
}
.gauge__percentage {
margin: 0 6px;
}
}
<div class="gauge"><div class="progress-container progress-container--medium"><div class="progress progress--normal"><div id="prog" class="progress__determinate bg--warning" style="width: 20%;"></div><div class="progress__labels progress__labels--spaced"><span class="progress__label progress__label--left"><span><span class="title2 hidden m-visible-inline">Plus que</span><span class="gauge__percentage">31%</span><span class="title2 hidden m-visible-inline">Le stock est pillé!</span></span></span><span class="progress__label progress__label--right"><span id="countdown" class="countdown gauge__countdown"> </span></span></div></div></div></div>
