0

Tenho o seguinte código abaixo que mostra um cronometro regressivo em minha página, a ideia é que ao zerar ele mostre um iframe(video), até mostra porem o vídeo fica piscando como se somente ele ficasse em loop de atualização eterna. Se alguém tiver a solução agradeceria sou iniciante nesta área.

(function($) {

var launch = new Date(2018, 4, 25, 23, 42); 

var message = $('#message');
var days = $('#days');
var hours = $('#hours');
var minutes = $('#minutes');
var seconds = $('#seconds');

setDate();

function setDate(){
    var now = new Date();
    if( launch < now){
        days.html('<h1>0</H1><p>Dia</p>');
        hours.html('<h1>0</h1><p>Hora</p>');
        minutes.html('<h1>0</h1><p>Minuto</p>');
        seconds.html('<h1>0</h1><p>Segundos</p>');
        message.html('<iframe width="560" height="315" src="https://www.youtube.com/embed/IsHOEl5N0cA?rel=0&amp;start=289" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    }
    else{

            var s = -now.getTimezoneOffset()*60 + (launch.getTime() - now.getTime())/1000;
            var d = Math.floor(s/86400);
            days.html('<h1>'+d+'</h1><p>Dia'+(d>1?'s':''),'</p>');
            s -= d*86400;

            var h = Math.floor(s/3600);
            hours.html('<h1>'+h+'</h1><p>Hora'+(h>1?'s':''),'</p>');
            s -= h*3600;

            var m = Math.floor(s/60);
            minutes.html('<h1>'+m+'</h1><p>Minuto'+(m>1?'s':''),'</p>');

            s = Math.floor(s-m*60);
            seconds.html('<h1>'+s+'</h1><p>Segundo'+(s>1?'s':''),'</p>');
            setTimeout(setDate, 1000);

            message.html('PRÓXIMO TREINO INICIA EM... ');

        /**if(d == -1){
            days.html('<h1>0</H1><p>Dia</p>');
            hours.html('<h1>0</h1><p>Hora</p>');
            minutes.html('<h1>0</h1><p>Minuto</p>');
            seconds.html('<h1>0</h1><p>Segundos</p>');
            message.html('<iframe width="560" height="315" src="https://www.youtube.com/embed/IsHOEl5N0cA?rel=0&amp;start=289" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
        }**/
    }
}

})(jQuery);

1
  • conseguiu resolver? 28/10/2018 às 2:33

1 Resposta 1

0

O seu problema é que a função é chamada o tempo todo. Então o vídeo é renderizado a cada segundo, por isso ele 'pisca'.

O que você pode fazer é usar a função setInterval() passando a função setDate() e o valor 1000 ( significa que será executado a cada segundo) atribuindo a uma variável. E dentro do IF você usa o clearInterval() para cancelar a execução da função.

Um pequeno exemplo para te servir como inspiração:

// Define a data limite
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

// Atualiza o cronometro a cada 1s
var x = setInterval(function() {

  // Pega a data e a hora de hoje
  var now = new Date().getTime();

  // Encontr a diferenca entre hoje e a data limite
  var distance = countDownDate - now;

  // Calcula dias, horas, minutos e segundos
  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);

  // Mostra o resultado em id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // Quando o prazo termina, mostra o texto 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
<!-- Mostra o cronometro -->
<div id="demo"></div>

Boa sorte! ;)

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 .