3

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?

 <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>
1
  • 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.
    – Largato
    Commented 19/01/2016 às 12:42

3 Respostas 3

4

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
<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>

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/

3
  • 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 :) Commented 19/01/2016 às 13:31
  • isso jeferson, se vc puder me ajudar mas a resposta do aesir ja ajuda muito obrigado tbm :)
    – Ney
    Commented 19/01/2016 às 13:34
  • Obrigado, a resposta do Guilherme Lopes faz o que você pediu e está bem completa.
    – Aesir
    Commented 19/01/2016 às 13:39
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:

<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);
})

Veja um exemplo aqui: https://jsfiddle.net/j8hhhquw/

5
  • Aqui deu certinho, obrigado :)
    – Ney
    Commented 19/01/2016 à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
    Commented 19/01/2016 à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
    Commented 19/01/2016 à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... Commented 19/01/2016 às 16:11
  • 1
    você pode utilizar a API do GeoNames para pegar a data e hora: geonames.org/export/web-services.html#timezone Commented 19/01/2016 às 16:34
1

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .