Como informar que uma determinada loja está aberta naquele momento

Quando for entre horário descrito abaixo estará escrito ABERTO, quando não estiver nesse horário estará escrito FECHADO, em javascript, jquery, etc. Como poderia fazer isto?

Loja 1

Aberto Todos os dias das 8:00 as 18:00

Loja 2

Aberto Todos os dias das 10:00 as 20:00

=================

7

 

Só em JS/jQuery tem que tomar cuidado, pois não pode depender do PC do cliente. Se a hora do pc estiver errada, a informação mostrada também estará. O ideal seria alguma coisa com auxílio server side.
– Bacco
19/01 às 12:42

=================

3 Respostas
3

=================

Como comentado isso não é o mais correto a se fazer pois quando se obtém a hora com javascript, se obtém a hora do computador do usuário/cliente, porém respondendo sua pergunta, você poderia fazer assim:

No html:

Loja 1

Aberto Todos os dias das 8:00 as 18:00

Loja 2

Aberto Todos os dias das 10:00 as 20:00

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); }) Veja um exemplo aqui: https://jsfiddle.net/j8hhhquw/      Aqui deu certinho, obrigado 🙂 – Ney 19/01 às 13:37      Mesmo com os comentários falando que essa forma está errada, você tem coragem de fazer assim? Isso é para você ou para um cliente? – durtto 19/01 às 13:42      é para mim mesmo, sou iniciante ainda, e aprendendo sobre, javascript no momento, e sobre esses outros jeitos que falaram eu ainda nao sei fazer rs, se queres me dar uma dica de algum lugar que eu possa estudar sobre isso ficarei grato 🙂 – Ney 19/01 às 13:51      Pra ficar mais correto. você poderia criar uma página php para que retornasse a hora atual do servidor, e com javascript, pegar essa hora com um $.ajax do tipo e depois fazer a verificação... – Guilherme Lopes 19/01 às 16:11 1   você pode utilizar a API do GeoNames para pegar a data e hora: geonames.org/export/web-services.html#timezone – TobyMosque 19/01 às 16:34 Se for algo para estudo, ou curiosidade, usando só javascript e jquery você pode fazer assim: $(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

Loja 1

Loja 2

ExecutarEsconder resultadoExpandir trecho de código

Mas como foi dito, o javascript pega a hora do computador cliente, não sendo confiável, se fosse em uma aplicação comercial, você poderia usar ajax e fazer um get em uma api que retornaria o horário ou a resposta pronta e poderia usar algum framework como knockout para mostrar os resultados mais dinamicamente.

Exemplo no JSFiddle:

https://jsfiddle.net/k2ptz8hw/

1

 

Você poderia simplificar um pouco mais o código, suponhamos que amanhã ele terá 100 lojas, a manutenção do código ficaria ruim, mas ficou boa a sua resposta 🙂
– Jeferson Assis
19/01 às 13:31

  

 

isso jeferson, se vc puder me ajudar mas a resposta do aesir ja ajuda muito obrigado tbm 🙂
– Ney
19/01 às 13:34

  

 

Obrigado, a resposta do Guilherme Lopes faz o que você pediu e está bem completa.
– Aesir
19/01 às 13:39

Como nosso amigo já disse, não é muito aconselhável pegar o horário na maquina do cliente pois o mesmo pode ser modificado facilmente.

Abaixo está o código que você precisa:

$(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"); } }

Loja 1

Loja 2

ExecutarEsconder resultadoExpandir trecho de código