2

Recentemente pedi orientação aqui no SO solicitando ajuda pra fazer um cronometro via JavaScript.

Ao acessar em outros browser (Edge e Safari(versão Windows e Mac)) vi que o mesmo fica aparecendo desta forma:

inserir a descrição da imagem aqui

E acessando nos demais Browser, carrega normalmente:

inserir a descrição da imagem aqui

Minha duvida é existe algum tratamento especial para o Broser "entender" JavaScript ?

function Cronometro(dtFinal, ciclo) {
   var d, m, a;
   var dtF = dtFinal.replace("/", " ").replace("/", " ");
   dtF = dtF.split(" ");
   d = dtF[0];
   m = dtF[1];
   a = dtF[2];
   var countDownDate = new Date(m+" "+d+","+a).getTime();

   // Update the count down every 1 second
   var x = setInterval(function () {

       // Get todays date and time
       var now = new Date().getTime();

       // Find the distance between now an the count down date
       var distance = countDownDate - now;

       // Time calculations for days, hours, minutes and seconds
       var days = Math.floor(distance / (1000 * 60 * 60 * 24));
       var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
       var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
       var seconds = Math.floor((distance % (1000 * 60)) / 1000);

       // Output the result in an element with id="demo"

       document.getElementById("demo").innerHTML = "Faltam " + days + " Dias " + hours + " Horas "
           + minutes + " Minutos para o fechamento da Semana " + ciclo;

       //If the count down is over, write some text 
       if (distance < 0) {
           clearInterval(x);
           document.getElementById("demo").innerHTML = "";
       }
   }, 1000);

}
        
Cronometro("30/06/2018", "14/2018");
<div id="demo"></div>

2 Respostas 2

7

Os browsers têm variações em relação aos formatos de data que conseguem interpretar. O código que você linkou usa o seguinte:

var countDownDate = new Date(m+" "+d+","+a).getTime();

Esse formato não é muito usual é não segue os padrões estabelecidos (uma variação do ISO 8601 estendido). Pode-se dizer que funcionou em alguns browsers por sorte. Para corrigir, sugiro usar outra forma do construtor Date, passando ano, mês e dia separadamente, nesta ordem, em vez de string.

var countDownDate = new Date(a, m-1, d).getTime();

Nota
A documentação da MDN afirma que Date.parse aceita o formato de datas da RFC2822 (que é sobre formato de mensagens de email), ou seja, datas como Aug 12, 2018. De fato os engines de javascript costumam mesmo aceitar esse formato, porém vale alertar que ele não é citado na especificação da linguagem (ECMA-262). O mais seguro seria evitar.

0
1

Realmente esses navegadores que você citou não reconhece o formato numérico do mês na data, tipo "06 15, 2018". Teria que ser "Jun 15, 2018".

Esta documentação indica que o formato em string é válido:

inserir a descrição da imagem aqui

Neste caso você pode converter o número referente ao mês pela abreviação do nome do mês (ex.: Junho = Jun).

Pode usar uma array para pegar o respectivo nome, alterando o valor de m:

m = meses[parseInt(dtF[1])-1];
// parseInt para retirar o "0" do número do mês (06 => 6)
// o -1 para pegar o elemento no índice correto da array

Veja funcionando:

Print Edge

inserir a descrição da imagem aqui

Print Safari

inserir a descrição da imagem aqui

var meses = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function Cronometro(dtFinal, ciclo) {
   var d, m, a;
   var dtF = dtFinal.replace("/", " ").replace("/", " ");
   dtF = dtF.split(" ");
   d = dtF[0];
   m = meses[parseInt(dtF[1])-1];
   a = dtF[2];

   var countDownDate = new Date(m+" "+d+","+a).getTime();

   // Update the count down every 1 second
   var x = setInterval(function () {

       // Get todays date and time
       var now = new Date().getTime();

       // Find the distance between now an the count down date
       var distance = countDownDate - now;

       // Time calculations for days, hours, minutes and seconds
       var days = Math.floor(distance / (1000 * 60 * 60 * 24));
       var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
       var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
       var seconds = Math.floor((distance % (1000 * 60)) / 1000);
       

       // Output the result in an element with id="demo"

       document.getElementById("demo").innerHTML = "Faltam " + days + " Dias " + hours + " Horas "
           + minutes + " Minutos para o fechamento da Semana " + ciclo;

       //If the count down is over, write some text 
       if (distance < 0) {
           clearInterval(x);
           document.getElementById("demo").innerHTML = "";
       }
   }, 1000);

}
        
Cronometro("15/06/2018", "14/2018");
<div id="demo"></div>

3
  • 1
    Na verdade a documentação coloca isso como exemplo de parsing non–standard date strings. E non-standard é definido como o que não adere aos padrões que eu citei na minha resposta.
    – bfavaretto
    14/06/2018 às 1:33
  • Parece que a MDN se embanana um pouco com isso mesmo. Enfim, browsers aceitam esse formato mas segundo a especificação mesmo eles não são padrões. Veja a atualização na minha resposta. De qualquer maneira eu não entendo no seu código por que transformar 15/06/2018 pra esse formato em vez de quebrar essa string e jogar as partes no construtor como eu sugeri. Não seria mais simples?
    – bfavaretto
    14/06/2018 às 2:09
  • Sim, sua resposta é bem mais simples, com certeza.
    – Sam
    14/06/2018 às 2:11

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 .