Comunidad de diseño web y desarrollo en internet online

Unir dos funciones en un solo botón para Cronometro en JavaScript

Citar            
MensajeEscrito el 26 Sep 2018 04:23 pm
Buen dia a todos!!!...Estoy iniciado en programación de JavaScript y me dejaron hacer un cronómetro con JavaScript, con tres botones: Start, Stop y Reset, lo hice, y todo funciona a la perfección. Pero ahora debo unir las funciones de Start y Stop en un solo botón, pero no tengo idea de cómo hacerlo, alguien podría ayudarme por favor...!!! y también debo hacer como un historial, que vaya guardando el tiempo de cada vez que lo reinicio... Necesito ayuda por favor. Ese es mi código de lo que funciona perfectamente con los tres botones:
_________CODIGO HTML__________
<div class="containerTime d-flex">
<h2 id="horas" class="display-2">00</h2>
<h2 id="minutos" class="display-2">:00</h2>
<h2 id="segundos" class="display-2">:00</h2>
<h2 id="centesimas" class="display-2">:00</h2>
</div><!--containerTime-->
<div class="containerButtons d-flex justify-content-around">
<button id="btnStart" class="btn btn-success">Start</button>
<button id="btnStop" class="btn btn-danger">Stop</button>
<button id="btnReset" class="btn btn-primary">Reset</button>
</div><!--containerButtons-->

_________CODIGO JS__________
var hundredths = 0;
var seconds = 0;
var minutes = 0;
var hours = 0;

var btnStart = document.getElementById('btnStart');
var btnStop = document.getElementById('btnStop');
var btnReset = document.getElementById('btnReset');

var hundredthsHTML = document.getElementById('centesimas');
var secondsHTML = document.getElementById('segundos');
var minutesHTML = document.getElementById('minutos');
var hoursHTML = document.getElementById('horas');
var exe = "";

function cronometro() {
if(hundredths < 99) {
hundredths++;
hundredths = ((hundredths < 10) ? "0" : "") + hundredths;
hundredthsHTML.innerHTML = ":" + hundredths;
}

if (hundredths == 99) { hundredths = -1; }

if (hundredths == 0) {
seconds++;
seconds = ((seconds < 10) ? "0" : "") + seconds;
secondsHTML.innerHTML = ":" + seconds;
}

if (seconds == 59) { seconds = -1; }

if (seconds == 0 && hundredths == 0) {
minutes++;
minutes = ((minutes < 10) ? "0" : "" ) + minutes;
minutesHTML.innerHTML = ":" + minutes;
}

if ( minutes == 59) { minutes = -1; }

if ( minutes == 0 && seconds == 0 && hundredths == 0 ) {
hours++;
hours = ((hours < 10) ? "0" : "") + hours;
hoursHTML.innerHTML = hours;
}
}

function start() {
exe = setInterval(cronometro, 10);
btnStart.disabled = true;
btnStop.disabled = false;
btnReset.disabled = false;
}

function stop() {
clearInterval(exe);
btnStart.disabled = false;
}

function reset() {
clearInterval(exe);
btnStart.disabled = false;
hundredths = 0;
seconds = 0;
minutes = 0;
hours = 0;

hundredthsHTML.innerHTML = ":00";
secondsHTML.innerHTML = ":00";
minutesHTML.innerHTML = ":00";
hoursHTML.innerHTML = "00";
}

document.getElementById('btnStart').addEventListener('click', start);
document.getElementById('btnStop').addEventListener('click', stop);
document.getElementById('btnReset').addEventListener('click', reset);

Por Fernando0612

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Oct 2018 06:49 pm

Por RaulAvila

1 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.