Chronometer in JS

Question

Chronometer in JS

Navigation

#1 by (0 votes)

1

Personal I did a timer on JS but it "Tremors" when I run it, is there any way to fix it?

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

*{
    margin: 0;
    padding: 0;
}
body {
    background-color: #ffae00;
}
.reloj{
    font-size: 170%;
    font-family: 'Orbitron', sans-serif;
    color: #363431;
    display: inline-block;
    float: left;
    margin-top: 50%;
}
.boton{
    margin: 2%;
    display: inline-block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    width: auto;
    height: auto;
    position: relative;
    cursor: pointer;
    opacity: 1;
    top: 0;
    padding: 0 22px;
    overflow: visible;
    border: 4px solid rgb(255,255,255);
    -webkit-border-radius: 0;
    border-radius: 0;
    font: normal normal bold 50px/50px Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    text-align: center;
    text-transform: uppercase;
    -o-text-overflow: clip;
    text-overflow: clip;
    background: #FFAE00;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}
.boton:hover{
    margin: 2%;
    display: inline-block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    width: auto;
    height: auto;
    position: relative;
    cursor: pointer;
    opacity: 1;
    top: 0;
    padding: 0 22px;
    overflow: visible;
    border: 4px solid rgb(255,255,255);
    -webkit-border-radius: 0;
    border-radius: 0;
    font: normal normal bold 50px/50px Arial, Helvetica, sans-serif;
    color: #FFAE00;
    text-align: center;
    text-transform: uppercase;
    -o-text-overflow: clip;
    text-overflow: clip;
    background: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}
#crono {
    margin-top: 0%;
    width: 160%;
    margin-right: -30%;
    float: right;
    display: inline-block;
}

#numeros{
    margin-top:10%;
}

#contador{
    position: absolute;
    margin-top: 32%;
    left: 19%;
}
#botoes{
    position: absolute;
    margin-top: 120%;
    left: 10%;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>cronometro</title>
        <link rel="stylesheet" href="css/cronometro.css">
        <script type="text/javascript" src="js/cronometro.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron" rel="stylesheet">     </head>
    <body>
        <div id="contador">
            <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>
        </div>
        <div id="botoes">
            <input type="button" class="boton" id="inicio" value=" &#9658;" onclick="inicio();">
            <input type="button" class="boton" id="parar" value=" &#8718;" onclick="parar();" disabled>
            <input type="button" class="boton" id="continuar" value=" &#8634;" onclick="inicio();" disabled>
            <input type="button" class="boton" id="reinicio" value=" &#8635;" onclick="reinicio();" disabled>
        </div>
       <img id="crono" src="img/cronometro.png" alt="cronometro" title="cronometro flat">


    </body>
</html>

javascript html css

asked by anonymous 28.02.2018 / 18:58

1 answer

Passing a GET parameter through the view in Django How to end process 'chrome.exe' at the end of script execution

score 0 · Accepted Answer

Change the position of the counter to relative.

#contador{
    position: relative;
    margin-top: 32%;
    left: 19%;
}

The absolute position is calculated all the time. Reference: The element with Position Absolute is used from the upper left point of other elements. These elements are his relatives of the element with absolute position. More specifically the parent.