0

Tenho o seguinte código:

function startTimer(duration, display) {

var timer = duration, minutes, seconds;
    myInterval = setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;

        $(".txtTempo").html(minutes + ":" + seconds);

        if (--timer < 0) {
            $("#min").html("00:00");
            clearInterval(myInterval);
        }

        else{
            var Tempo = $("#Cronometro").val();

            if(Tempo === "1"){                    
                if($("#min").html() === "00:30"){
                    document.getElementById('min').style.color='red';
                }
            } 
            if(Tempo === "1"){                    
                if($("#min").html() === "00:29"){
                    document.getElementById('min').style.color='black';
                }
            } 

            if(Tempo === "1"){                    
                if($("#min").html() === "00:28"){
                    document.getElementById('min').style.color='red';
                }
            } 

            if(Tempo === "1"){                    
                if($("#min").html() === "00:27"){
                    document.getElementById('min').style.color='black';
                }
            }   

            if(Tempo === "1"){                    
                if($("#min").html() === "00:26"){
                    document.getElementById('min').style.color='red';
                }
            }

            if(Tempo === "1"){                    
                if($("#min").html() === "00:25"){
                    document.getElementById('min').style.color='black';
                }
            } 
            if(Tempo === "1"){                    
                if($("#min").html() === "00:24"){
                    document.getElementById('min').style.color='red';
                }
            }     

            if(Tempo === "1"){                    
                if($("#min").html() === "00:23"){
                    document.getElementById('min').style.color='black';
                }
            }      
            if(Tempo === "1"){                    
                if($("#min").html() === "00:22"){
                    document.getElementById('min').style.color='red';
                }
            }    

            if(Tempo === "1"){                    
                if($("#min").html() === "00:21"){
                    document.getElementById('min').style.color='black';
                }
            }    

            if(Tempo === "1"){                    
                if($("#min").html() === "00:20"){
                    document.getElementById('min').style.color='red';
                }
            }     

            if(Tempo === "1"){                    
                if($("#min").html() === "00:19"){
                    document.getElementById('min').style.color='black';
                }
            }     

            if(Tempo === "1"){                    
                if($("#min").html() === "00:18"){
                    document.getElementById('min').style.color='red';
                }
            }                 

            if(Tempo === "1"){                    
                if($("#min").html() === "00:17"){
                    document.getElementById('min').style.color='black';
                }
            } 

             if(Tempo === "1"){                    
                if($("#min").html() === "00:16"){
                    document.getElementById('min').style.color='red';
                }
            } 


            if(Tempo === "1"){
                if($("#min").html() === "00:15"){
                    $("body").attr("class","background-pulse");
                    document.getElementById('min').style.color='black';
                }
            } 
             if(Tempo === "1"){                    
                if($("#min").html() === "00:14"){
                    document.getElementById('min').style.color='red';
                }
            }                 
             if(Tempo === "1"){                    
                if($("#min").html() === "00:13"){
                    document.getElementById('min').style.color='black';
                }
            } 
             if(Tempo === "1"){                    
                if($("#min").html() === "00:12"){
                    document.getElementById('min').style.color='red';
                }
            }    

             if(Tempo === "1"){                    
                if($("#min").html() === "00:11"){
                    document.getElementById('min').style.color='black';
                }
            }                 

            if(Tempo === "1"){
                if($("#min").html() === "00:10"){
                $('#modal').modal('show');
                 document.getElementById('min').style.color='red';
                }
            }  


             if(Tempo === "1"){                    
                if($("#min").html() === "00:09"){
                    document.getElementById('min').style.color='black';
                }
            }     

             if(Tempo === "1"){                    
                if($("#min").html() === "00:08"){
                    document.getElementById('min').style.color='red';
                }
            }  


             if(Tempo === "1"){                    
                if($("#min").html() === "00:07"){
                    document.getElementById('min').style.color='black';
                }
            }    


             if(Tempo === "1"){                    
                if($("#min").html() === "00:06"){
                    document.getElementById('min').style.color='red';
                }
            }                 

             if(Tempo === "1"){                    
                if($("#min").html() === "00:05"){
                    document.getElementById('min').style.color='black';
                }
            }                 


             if(Tempo === "1"){                    
                if($("#min").html() === "00:04"){
                    document.getElementById('min').style.color='red';
                }
            }                 


             if(Tempo === "1"){                    
                if($("#min").html() === "00:03"){
                    document.getElementById('min').style.color='black';
                }
            }                 


             if(Tempo === "1"){                    
                if($("#min").html() === "00:02"){
                    document.getElementById('min').style.color='red';
                }
            }                 


            if(Tempo === "1"){
                if($("#min").html() === "00:01"){
                    $('#modal').modal('hide');
                }
            }  

            if(Tempo === "1"){
                if($("#min").html() === "00:01"){
                    $('#modal2').modal('show');
                }
            }                          
        }
    }, 1000);
}

function Start() {
var Tempo = $("#Cronometro").val();
var fiveMinutes = 90 * Tempo,
    display = document.querySelector('#min');

$(".txtTempo").show();
startTimer(fiveMinutes, display);
$("#btnPlay").attr("disabled","disabled");
};

function Stop() {
$("#min, .txtTempo").html("00:00");
$(".txtTempo").hide();
clearInterval(myInterval);
$("body").removeAttr("class");
$("#msgHold").hide();
$("#btnPlay").removeAttr("disabled");
document.getElementById('min').style.color='black';
};

document.getElementById('min').style.fontWeight="bold";

Ele é um cronômetro que ao faltar 30 segundos para ser finalizado o tempo dele, ele irá mudar de cor e ao faltar 15 segundos, ira piscar um alerta na tela toda e ao clicar no botão "Stop" todas essas interações causadas são pausadas. Alguém saberia me auxiliar se é possível que além desse alerta na tela, a guia do browser / Título, também ficasse piscando? Para o caso da pessoa ver a janela mesmo minimizada piscando?

2
  • Já pensou em colocar o titulo vazio, depois o titulo certo. A cada 1 segundo por exemplo. Commented 6/08/2018 às 17:17
  • Então cara, é que o objetivo era que a aba ficasse piscando tipo em vermelho pra chamar a atenção, pegada o que acontecia antigamente com o msn saca?
    – RafaT93
    Commented 6/08/2018 às 17:58

1 Resposta 1

1

Usando setInterval resolveria seu problema, lembrando que a maioria dos navegadores não aceitam o título da página vazio:

$(document).ready(function() {
    // cria uma variável para checar quando entra o título e quando entra vazio
    var checaQual = 1;
    // inica o setInterval, para ser executada a cada 1 segundo
    var funcaoTimer = setInterval(function(){
        // alimenta a função
        checaQual++;
        // se for par, entra um título
        if(checaQual%2 == 0){
            document.title = 'blah';
        // se for impar entra um título diferente (os navegadores modernos não aceitam título vazio, então o . é uma boa solução)
        }else{
            document.title = '.';
        }
    }, 1000);
 })
2
  • Então cara, mas tipo, eu havia tentado fazer algo seguindo esse caminho, porém, assim que carrega a página o title ja começa a piscar e também não ocorre de chamar a atenção pegada o msn fazia antes saca? Mas ainda assim agradeço pelo auxilio
    – RafaT93
    Commented 6/08/2018 às 18:00
  • Mas coloque essa função dentro do if que você deseja (no final do tempo). Não? E ele funciona exatamente como vc disse, vai ficar piscando o título da página. Não existe outro tipo de interação possível Commented 6/08/2018 às 18:13

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 .