Browser guide / title flash upon reaching set time
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 timer that with 30 seconds left to finish its time, it will change color and with 15 seconds left, will flash an alert on the entire screen and clicking the "Stop" button all these interactions caused are paused. Would someone know to help me if it is possible that in addition to this alert on the screen, the browser tab / title, was also flashing? In case the person sees the window even minimized blinking?
0
1 answers
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);
})
1
Author: caiocafardo, 2018-08-06 17:35:07