2
Guys I made a stopwatch on JS but it "Treme" 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=" ►" onclick="inicio();">
<input type="button" class="boton" id="parar" value=" ∎" onclick="parar();" disabled>
<input type="button" class="boton" id="continuar" value=" ↺" onclick="inicio();" disabled>
<input type="button" class="boton" id="reinicio" value=" ↻" onclick="reinicio();" disabled>
</div>
<img id="crono" src="img/cronometro.png" alt="cronometro" title="cronometro flat">
</body>
</html>
Solved. Thank you very much helped a lot.
– João Divino
Mark as useful answer, on the arrow next to the top. <
– José Francisco
Thanks for the tip. I’m new to the forum.
– João Divino