3
When between times described below will be written OPEN, when you are not at that time 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>
4
If it is something for study, or curiosity, using only javascript and jquery you can do so:
$(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>
<div class="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 it was said, javascript takes the time of the client computer, being unreliable, if it were in a commercial application, you could use ajax and do a get on an api that would return the time or the ready response and could use some framework like knockout to show the results more dynamically.
Example in Jsfiddle:
You could simplify the code a little more, suppose tomorrow it will have 100 stores, the maintenance of the code would be bad, but got good your answer :)
this Jeferson, if you can help me but the answer from Aesir already helps a lot thanks tbm :)
Thank you, the reply of Guilherme Lopes does what you asked and is well completed.
3
As commented this is not the most correct to do because when you get the time with javascript, you get the time of the user/client computer, but answering your question, you could do so:
In 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: https://jsfiddle.net/j8hhhquw/
Here it came right, thank you :)
Even with the comments that this way is wrong, do you have the courage to do so? This is for you or a customer?
is for myself, I’m still beginner, and learning about, javascript at the moment, and about these other ways I’ve spoken I still don’t know how to do rs, if you want to give me a tip from somewhere I can study about it I’ll be grateful :)
To be more accurate. you could create a php page to return the current server time, and with javascript, pick that time with a $.ajax type and then check...
you can use the Geonames API to get the date and time: http://www.geonames.org/export/web-services.html#Timezone
1
As our friend has already said, it is not very advisable to take the time in the customer’s 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>
<div class="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>Browser other questions tagged javascript jquery
You are not signed in. Login or sign up in order to post.
Only in JS/jQuery have to be careful, as it cannot depend on the client’s PC. If the pc’s time is wrong, the information shown will also be. The ideal would be something with server side aid.
– Bacco