Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Insert a chronometer

Hi all,

I'm trying to insert a chronometer at some pages, but without success. I have looked for several examples at the internet... All of them work properly on their pages, but none has worked in Lighthouse 9. No idea for the reason of that since the codes seem correct for me.

Below I'm putting the example I liked the most.

In the question body:

<div id="contenedor">
        <div class="reloj" id="Horas">00</div>
        <div class="reloj" id="Minutos">:00</div>
        <div class="reloj" id="Segundos">:00</div>
        <div class="reloj" id="Centesimas">:00</div>
        <input type="button" class="boton" id="inicio" value="Start &#9658;" onclick="inicio();">
        <input type="button" class="boton" id="parar" value="Stop &#8718;" onclick="parar();" disabled>
        <input type="button" class="boton" id="continuar" value="Resume &#8634;" onclick="inicio();" disabled>
        <input type="button" class="boton" id="reinicio" value="Reset &#8635;" onclick="reinicio();" disabled>
    </div>
    



In the advanced > "Html <head> Tag"




<script = "javascrip">
var centesimas = 0;
var segundos = 0;
var minutos = 0;
var horas = 0;
function inicio () {
    control = setInterval(cronometro,10);
    document.getElementById("inicio").disabled = true;
    document.getElementById("parar").disabled = false;
    document.getElementById("continuar").disabled = true;
    document.getElementById("reinicio").disabled = false;
}
function parar () {
    clearInterval(control);
    document.getElementById("parar").disabled = true;
    document.getElementById("continuar").disabled = false;
}
function reinicio () {
    clearInterval(control);
    centesimas = 0;
    segundos = 0;
    minutos = 0;
    horas = 0;
    Centesimas.innerHTML = ":00";
    Segundos.innerHTML = ":00";
    Minutos.innerHTML = ":00";
    Horas.innerHTML = "00";
    document.getElementById("inicio").disabled = false;
    document.getElementById("parar").disabled = true;
    document.getElementById("continuar").disabled = true;
    document.getElementById("reinicio").disabled = true;
}
function cronometro () {
    if (centesimas < 99) {
        centesimas++;
        if (centesimas < 10) { centesimas = "0"+centesimas }
        Centesimas.innerHTML = ":"+centesimas;
    }
    if (centesimas == 99) {
        centesimas = -1;
    }
    if (centesimas == 0) {
        segundos ++;
        if (segundos < 10) { segundos = "0"+segundos }
        Segundos.innerHTML = ":"+segundos;
    }
    if (segundos == 59) {
        segundos = -1;
    }
    if ( (centesimas == 0)&&(segundos == 0) ) {
        minutos++;
        if (minutos < 10) { minutos = "0"+minutos }
        Minutos.innerHTML = ":"+minutos;
    }
    if (minutos == 59) {
        minutos = -1;
    }
    if ( (centesimas == 0)&&(segundos == 0)&&(minutos == 0) ) {
        horas ++;
        if (horas < 10) { horas = "0"+horas }
        Horas.innerHTML = horas;
    }
}

</script>



<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#contenedor{
    margin: 10px auto;
    width: 540px;
    height: 115px;
}
.reloj{
    float: left;
    font-size: 80px;
    font-family: Courier,sans-serif;
    color: #363431;
}
.boton{
    outline: none;
    border: 1px solid #363431;
    color: white;
    width: 128px;
    height: 30px;
    text-shadow: 0px -1px 1px black;
    font-size: 20px;
    border-radius: 5px;
    font-family: Helvetica;
    cursor: pointer;
    background-image: linear-gradient(#3aad02,#2c6f05);
}
.boton:active{
    background-image: linear-gradient(#2c6f05,#3aad02);
}
.boton:hover{
    box-shadow: 0px 0px 14px #3aad02;
}

</style>



And additionally to that, I would like to record this time into a variable. But my problem at this time is to have this chronometer working...
asked Dec 13, 2017 by André Duarte
Can you share a link where it works fine.

Your answer

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...