When it is between the times described below it will be written OPEN , when it is not at that time it will be written CLOSED , in javascript, jquery, etc. How could I do this?
<div class="Lojas">
<p class="Loja">Loja 1</p>
<p class="Horario">Aberto Todos os dias das 8:00 as 18:00</p>
</div>
<div class="Lojas">
<p class="Loja">Loja 2</p>
<p class="Horario">Aberto Todos os dias das 10:00 as 20:00</p>
</div>
As commented this is not the most correct to do because when you get the time with javascript, if you get the computer time of the user / client, however answering your question, you could do so:
No html:
<div class="Lojas">
<p class="Loja">Loja 1</p>
<p class="Horario" data-open="8" data-close="18">Aberto Todos os dias das 8:00 as 18:00</p>
</div>
<div class="Lojas">
<p class="Loja">Loja 2</p>
<p class="Horario" data-open="10" data-close="20">Aberto Todos os dias das 10:00 as 20:00</p>
</div>
jQuery:
var agora = new Date();
var horario = agora.getHours();
$(".Horario").each(function(){
var open = $(this).data("open");
var close = $(this).data("close");
var span = document.createElement("span");
if(horario >= open && horario <= close){
span.innerHTML = "ABERTO";
}else{
span.innerHTML = "FECHADO";
}
$(this).parent().append(span);
})
See an example here: link
If it's something to study, or curiosity, using just javascript and jquery you can do this:
$(document).ready(function() {
atualizaAtendimento();
setInterval(atualizaAtendimento, 60000); // 60 * 1000 milisegundos
});
function atualizaAtendimento() {
var now = new Date();
var hora = now.getHours();
if (hora >= 10 && hora < 20) {
$("#loja2").text("Aberto");
} else {
$("#loja2").text("Fechado");
}
if (hora >= 8 && hora < 18) {
$("#loja1").text("Aberto");
} else {
$("#loja1").text("Fechado");
}
};
//Aberto Todos os dias das 10:00 as 20:00
//Aberto Todos os dias das 8:00 as 18:00<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="Lojas">
<p class="Loja">Loja 1</p>
<p id="loja1" class="Horario"></p>
</div>
<div class="Lojas">
<p class="Loja">Loja 2</p>
<p id="loja2" class="Horario"></p>
</div>But as I said, javascript takes the time of the client computer, not being reliable, if it was in a commercial application, you could use ajax and do a get in an api that would return the time or the answer ready and could use some knockout framework to show results more dynamically.
Example in JSFiddle:
As our friend already said, it is not very advisable to take the time on the client machine because it can be modified easily.
Below is the code you need:
$(document).ready(function() {
atualizaAtendimento();
setInterval(atualizaAtendimento, 60000);
});
function atualizaAtendimento() {
var Agora = new Date().getHours();
statusLoja1(Agora);
statusLoja2(Agora);
}
function statusLoja1(Agora) {
var hrAbre = 8;
var hrFecha = 18;
// Menor e não menor ou igual, pois se for 18:30 vai considerar aberto
if (Agora >= hrAbre && Agora < hrFecha) {
$('.statusLoja1').html("Aberto").css("color", "green");
} else {
$('.statusLoja1').html("Fechado").css("color", "red");
}
}
function statusLoja2(Agora) {
var hrAbre = 10;
var hrFecha = 20;
if (Agora >= hrAbre && Agora < hrFecha) {
$('.statusLoja2').html("Aberto").css("color", "green");
} else {
$('.statusLoja2').html("Fechado").css("color", "red");
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="Lojas">
<p class="Loja">Loja 1</p>
<p class="statusLoja1"></p>
</div>
<div class="Lojas">
<p class="Loja">Loja 2</p>
<p class="statusLoja2"></p>
</div>