<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-md-4 col-md-offset-4"> <div class="well"> <div class=" display text-center"> <span id="hor">00</span>:<span id="min">00</span>:<span id="seg">00</span> </div> </div> <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group"> <a id="btn_play" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-play" aria-hidden="true"></span> </a> <a id="btn_pause" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pause" aria-hidden="true"></span> </a> <a id="btn_stop" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> </a> <a id="btn_lap" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-time" aria-hidden="true"></span> </a> </div> <br> <div class="well well_laps"> Vueltas: <div class="pull-right"> <a href="javascript:" id="btn_clear"><span class="glyphicon glyphicon-trash"></span> Clear</a> </div> <hr> <div id="log" class="log"> <ul class="list-group"></ul> </div> </div> </div> </div>

body{ box-sizing: border-box; height: 100%; width: 100%; text-shadow: 0 1px 0px rgb(255, 255, 255); margin: 0px; padding: 10px; font-family:sans-serif; } .display{ font-size: 60px; padding: 0 !important; } .display>span{ font-weight: bold; } .btn-default{ background-color: rgb(237, 237, 237) !important; } .btn{ border-radius: 0 !important; padding-top: 15px !important; padding-bottom: 15px !important; font-size: 13px !important; } .well{ border-radius: 0 !important; font-size: 13px !important; padding: 0 !important; } .well_laps{ padding: 10px !important; }

$(document).ready(function(){ var vueltas = 0; var cron; var sv_min = 0; var sv_hor = 0; var sv_seg = 0; var seg = document.getElementById('seg'); var min = document.getElementById('min'); var hor = document.getElementById('hor'); var iniciado = false; //init status of cron $("#btn_play").click(function(){ if(!iniciado){ iniciado = true; start_cron(); } }); function start_cron(){ cron = setInterval(function(){ sv_seg++; if(sv_seg < 60){ if(sv_seg < 10){ seg.innerHTML = "0"+sv_seg; }else{ seg.innerHTML = sv_seg; } }else{ sv_seg = 0; seg.innerHTML = "00"; sv_min++; if(sv_min < 60){ if(sv_min < 10){ min.innerHTML = "0"+sv_min; }else{ min.innerHTML = sv_min; } }else{ sv_min = 0; min.innerHTML = "00"; sv_hor++; if(sv_hor < 10){ hor.innerHTML = "0"+sv_hor; }else{ hor.innerHTML = sv_hor; } } } }, 1000); } $("#btn_pause").click(function(){ clearInterval(cron); iniciado = false; }); $("#btn_stop").click(function(){ sv_min = 0; sv_hor = 0; sv_seg = 0; seg.innerHTML = "00"; min.innerHTML = "00"; hor.innerHTML = "00"; clearInterval(cron); iniciado = false; }); $("#btn_lap").click(function(){ vueltas++; consola('<li class="list-group-item"><small>'+vueltas+'</small>     '+hor.innerHTML+":"+min.innerHTML+":"+seg.innerHTML+'</li>'); }); function consola(msg){ $("#log").prepend(msg); } $("#btn_clear").click(function(){ $("#log").html(""); vueltas = 0; }); });