I have the following code when I know when the multiple timer reaches 10 all the images are changed, but what I want to do is only filter as they reach 5 minutes, thanks in advance. enter image description here
javascript code countdown that I want to filter the change of images every 5 minutes
/////////////temporizador
document.addEventListener('readystatechange', event => {
$('.horaSistem').hide();
if (event.target.readyState === "complete") {
var clockdiv = document.getElementsByClassName("clockdiv");
var countDownDate = new Array();
for (var i = 0; i < clockdiv.length; i++) {
countDownDate[i] = new Array();
countDownDate[i]['el'] = clockdiv[i];
countDownDate[i]['time'] = new Date(clockdiv[i].getAttribute('data-date')).getTime();
countDownDate[i]['days'] = 0;
countDownDate[i]['hours'] = 0;
countDownDate[i]['seconds'] = 0;
countDownDate[i]['minutes'] = 0;
}
var countdownfunction = setInterval(function() {
for (var i = 0; i < countDownDate.length; i++) {
var now = new Date().getTime();
var distance = countDownDate[i]['time'] - now;
console.log(distance);
countDownDate[i]['days'] = Math.floor(distance / (1000 * 60 * 60 * 24));
countDownDate[i]['hours'] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
countDownDate[i]['minutes'] = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
countDownDate[i]['seconds'] = Math.floor((distance % (1000 * 60)) / 1000);
if (distance < 0) {
countDownDate[i]['el'].querySelector('.days').innerHTML = 0;
countDownDate[i]['el'].querySelector('.hours').innerHTML = 0;
countDownDate[i]['el'].querySelector('.minutes').innerHTML = 0;
countDownDate[i]['el'].querySelector('.seconds').innerHTML = 0;
}else{
countDownDate[i]['el'].querySelector('.days').innerHTML = countDownDate[i]['days'];
countDownDate[i]['el'].querySelector('.hours').innerHTML = countDownDate[i]['hours'];
countDownDate[i]['el'].querySelector('.minutes').innerHTML = countDownDate[i]['minutes'];
countDownDate[i]['el'].querySelector('.seconds').innerHTML = countDownDate[i]['seconds'];
tablecolor(countDownDate[i]['el'].querySelector('.minutes').innerHTML);
}
}
}, 1000);
}
});
function tablecolor(minute){
//console.log(minute);
var elimg = document.querySelectorAll('[id^="imgran_"]');
for (var j=0; j<elimg.length; j++) {
let img = elimg[j];
let new_img = img.getAttribute('src').substring(0, 52); //img
var img_id = elimg[j].getAttribute('id');
var end_img = img_id.split('_')[1];
if (new_img == "<?=base_url()?>assets/img/amarillo" && minute <= 10------- && minute >0 ) {
document.getElementById("imgran_" + end_img).src = '<?=base_url()?>assets/img/rojoB'+Math.floor (Math.random() * 6 +1 )+'.svg';
//console.log(document.getElementById("imgran_" + end_img));
}
}
}html and mysql with foreach where it pulls the values eh images of the tables and the countdown appears when an order is made
<?php foreach ($zones as $zone):?>
<div class="row">
<h1 class="choose_store"> <?=$zone->name;?> </h1><hr>
</div>
<div class="row tablesrow">
<?php foreach ($tables as $table):?>
<?php if($table->zone_id == $zone->id) {?>
<div class="col-sm-2 col-xs-4 tableList">
<?php if($table->time != ''){?>
<span class="tabletime" style="background-color :red; font-size: 20px;">
<div class="clockdiv" data-date="<?=date("m d,Y") . ' ' . date("H:i", strtotime("+20 minute" , strtotime ( $table->time )))?>" data-countdown="<?=date("m/d/Y") . ' ' . date("H:i", strtotime("+20 minute" , strtotime ( $table->time )))?>">
<span class="days" hidden></span><span class="hours" hidden></span><span class="minutes"></span>:<span class="seconds"></span>
</div>
</span>
<span class="tabletime horaSistem"><?=$table->time;?></span> <!-- hora sistema -->
<span class="tabletime" hidden id="horamas" ><?=date("H:i", strtotime("+20 minute" , strtotime ( $table->time )))?></span> <!-- hora sistema + 20 m -->
<?php } ?>
<a class="images-wrapper" href="pos/selectTable/<?=$table->id;?>">
<img class="gallery-img" id="imgran_<?=$table->id;?>" src="<?=base_url()?>assets/img/<?= $table->status == 1 ? 'amarilloB'.rand(1, 6).'.svg' : 'azul.svg'; ?>" alt="store">
<h2><?=$table->name;?></h2>
</a>
</div>
<?php } ?>
<?php endforeach;?>
</div>
<?php endforeach;?>