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