Browser Guide / Title Blink when Reaching Given Time

Question

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 after 30 seconds to complete its time, it will change color and after 15 seconds, it will blink an alert on the entire screen and when clicking the "Stop" button all these interactions caused are paused. Would anyone know to help me if it is possible that besides this alert on the screen, the browser tab / Title, also kept blinking? In case the person sees the window even minimized flashing?

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