<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cronômetro com Javascript</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<!-- HTML5 Shim and Respond.js 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>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 text-center">
<h1>Cronômetro com Javascript</h1>
</div>
<div class="col-md-12 text-center center-block">
<div id="tempo" type="button" class="btn btn-warning tamanho text">00:00!</div>
</div>
<div class="marginTop col-md-12 text-center center-block">
<button id="btn" onclick="cronometro(1)" type="button" class="col-md-2 col-md-offset-5 btn btn-success">Iniciar</button>
</div>
<div class="marginTop col-md-12 text-center center-block">
<button id="btnPause" onclick="parar()" type="button" class="hide col-md-2 col-md-offset-5 btn btn-danger">Pause</button>
</div>
<div class="marginTop col-md-12 text-center center-block">
<button id="btnStop" onclick="stop()" type="button" class="hide col-md-2 col-md-offset-5 btn btn-primary">Stop</button>
</div>
<div class="marginTop col-md-12 text-center center-block">
<div class="col-md-4 col-md-offset-4">
<div class="input-group">
<span class="input-group-addon">Min</span>
<input id="minutos" type="number" min="0" max="59" class="form-control" placeholder="Minutos">
</div>
<div class="input-group">
<span class="input-group-addon">Seg</span>
<input id="segundos" type="number" min="0" max="59" class="form-control" placeholder="Segundos">
<input id="pause" type="hidden" value="0" class="form-control">
</div>
</div>
</div>
</div>
</body>
</html>
var minuto = new Number();
var segundo = new Number();
var time = new Number();
var pause = 0;
var x = 0;
function parar(){
pause = parseInt($('#pause').val());
if(pause === 0){
x = 0;
}
if(x===0){
$('#pause').val('1');
$('#btnPause').html('Play');
$('#btn').removeClass('disabled');
x = 1;
}else{
$('#pause').val('0');
$('#btnPause').html('Pause');
x = 0;
cronometro(2);
}
}
function cronometro(aux){
if(aux == 1){
minuto = parseInt(($('#minutos').val() === '' ? 0 : $('#minutos').val()));
segundo = parseInt(($('#segundos').val() === '' ? 0 : $('#segundos').val()));
if(segundo != 0 || minuto != 0){
segundo = segundo +1;
$('#pause').val('0');
$('#btn').addClass('disabled');
$('#btnPause').html('Pause');
$('#btnPause').removeClass('hide');
$('#btnStop').removeClass('hide');
}
if(segundo >60 || minuto > 60 || segundo< 0 || minuto < 0){
alert("Erro! Confira o registro informado!");
stop();
}
}
if(aux == 2){
$('#btn').addClass('disabled');
}
if(minuto > 0 && segundo === 0){
segundo = 60;
minuto--;
}
if((segundo-1)>=0){
segundo=segundo-1;
if(segundo == 0 && minuto == 0){
time="00:00";
$('#btn').removeClass('disabled');
}else if(segundo <10 && minuto === 0){
time="0"+segundo;
}else if (minuto >= 1){
time=(minuto < 10 ? '0'+minuto : minuto)+":"+(segundo < 10 ? '0'+segundo : segundo);
}else{
time = segundo;
}
pause = parseInt($('#pause').val());
if(pause === 0){
tempo.innerText=time;
setTimeout('cronometro();',1000);
}
}
}
function stop(){
location.reload();
}
.tamanho{ height: 150px; width: 200px;}
.text{ font-size: 5em; text-align: center; padding: 20px;}
.marginTop{
margin-top: 10px;
}