Browser / Title Guide blinks when reaching specified time

Navigation
0

I have the following code: 

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

It is a stopwatch that with 30 seconds left to finish its time, it will change color and with 15 seconds to go, an alert will flash on the whole screen and when you click on the "Stop" button all these interactions caused are paused. Would someone help me if it is possible that besides the onscreen alert, the browser tab / Title also blinks? For the case of the person see the same minimized window flashing?

    
asked by anonymous 06.08.2018 / 18:51

1 answer

1

Using setInterval would solve your problem, remembering that most browsers do not accept the empty page title: 

$(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);
 })
    
06.08.2018 / 19:35
Add data per month using mongoose How to remove javascript cloned elements