Follow the timer file:
It shows the time in the input, but I wanted it to also show in the title bar of the browser, even minimized I want the time to be shown in the window title dynamically (updated from time to time in the case, every second)
I think I have to do something like:
document.title = Stopwatch time;
But how do I get the time shown in the input?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="icone.png" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Cronômetro</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="background: #00662e; color: white; padding: 20px; text-align: center;"> <strong> Cronômetro </strong> </div>
<p><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-3">
<input name="timer" class="form-control timer" placeholder="0 sec" type="text">
</div>
<div class="col-md-9">
<button class="btn btn-success start-timer-btn">Iniciar</button>
<button class="btn btn-success resume-timer-btn hidden">Retornar</button>
<button class="btn pause-timer-btn hidden">Pausar</button>
<button class="btn btn-danger remove-timer-btn hidden">Resetar</button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--><scriptsrc="timer.jquery.min.js"></script>
<script>
(function(){
var hasTimer = false;
// Init timer start
$('.start-timer-btn').on('click', function() {
hasTimer = true;
$('.timer').timer({
editable: true
});
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer resume
$('.resume-timer-btn').on('click', function() {
$('.timer').timer('resume');
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer pause
$('.pause-timer-btn').on('click', function() {
$('.timer').timer('pause');
$(this).addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
});
// Remove timer
$('.remove-timer-btn').on('click', function() {
hasTimer = false;
$('.timer').timer('remove');
$(this).addClass('hidden');
$('.start-timer-btn').removeClass('hidden');
$('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
});
// Additional focus event for this demo
$('.timer').on('focus', function() {
if(hasTimer) {
$('.pause-timer-btn').addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
}
});
// Additional blur event for this demo
$('.timer').on('blur', function() {
if(hasTimer) {
$('.pause-timer-btn').removeClass('hidden');
$('.resume-timer-btn').addClass('hidden');
}
});
})();
</script>
</body>
</html>