COMO CRIAR CRONÔMETRO FEITO COM HTML CSS E JAVASCRIPT

José satchova António janeiro 05, 2023






 

COMO CRIAR CRONÔMETRO FEITO COM HTML,CSS E JAVASCRIPT

CÓDIGO FONT:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cronometro</title>


<style>




*{
    margin: 0;
    padding: 0;
}
#pri{
    width: 98vw;
    height: auto;
    background-image: linear-gradient(250deg,yellow,red);
    margin: 1vh 1vw;
}

#sub{
    width: 60vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 255, 0.322);
    padding: 10vh 0;
}

div.subs{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vh 8vw;
    border-radius: 2vh;
 

}


div#min{
    margin-top: 2vh;
    background-color: rgba(75, 75, 77, 0.507)
}

div#seg{
    margin-top: 0.1vh;
    background-color: rgba(0, 0, 255, 0.158)
}

span#min{
    font: bold 14pt arial;
    color: #ffffff;
}

span#minb{
    color: #ffc400;
}






input{
   border: none;
   text-align: center;
   width: 15vh;
   height: 40px;
   background-color: #ffffff;
   outline: none;
   color: #02035a;
   border-radius: 1vh;
   font: 600 14pt arial;
}
input::placeholder{
    font: normal 10pt arial;
}

span#segb{
    color: #ffffff;
}




div#btn{
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 2vh;
}
button{
    margin-left: 1vw;
    padding: 0.8vh 1vw;
    font: 400 10pt arial;
    border-radius: 0.6vh;
    cursor: pointer;
    border: none;
}
button#in{
    background-color: #02035a;
    color: #ffffff;
}

button#ps{
    background-color: #920101;
    color: #ffffff;
}

button#rn{
    background-color: #15ff00;
    color: #02035a;
}


button:hover{
    transform: rotateZ(10deg);
}

div#alerta{
    width: 30vw;
    height: auto;
    background-color: black;
    color: #ffffff;
    padding: 8vh 2vw;
    font: normal 8pt helvetica;
    letter-spacing: 1px;
    border-radius: 5vh;
    z-index: 100;
    position: absolute;
    margin:6vh 34vw ;
    display:none ;
   
}

em#altem{
    color: red;
    font: bold 12pt arial;
}

a{
    text-decoration: none;
    font: bold 16pt arial;
    color: #ffc400;
}

</style>



</head>
<body>
   

<center>








    <div id="alerta">
        <em id="altem">ALERTA</em>
        <br>
        <br>
    <p>IMPOSSÍVEL INICIAR O CRONÔMETRO!
        <br>INSIRA O VALOR DE MINUTO OU SEGUNDO PARA INICIALIZAR O CRONÔMETRO
        <br><br><em>Clica em ok</em>
        <br><br><br><br>  <a href="cronometro.html">OK</a>
    </p>

    </div>













<div id="pri">
<div id="sub">



<div id="min"class="subs">
    <input type="number" name="" id="min" placeholder="inserir valor"value="0">
    <span id="minb"class="a">Minutos</span>
   

</div>


<div id="seg" class="subs">


<input type="number" name="" id="seg" placeholder="inserir valor" value="0">
    <span id="segb">Segundos</span>
   
</div>



<div id="btn">

    <button id="rn">Reiniciar</button>
    <button id="ps">Pausar</button>
    <button id="in">Iniciar</button>

</div>
</div>

<div id="musica"></div>

<div id="prov"></div>

</div>







</center>


<script>
  let st=document.getElementById('pri')
  let alt=document.getElementById('alerta')
  let btna=document.querySelector('button#rn')
  let btnb=document.querySelector('button#ps')
  let btnc=document.querySelector('button#in')
  let alertem=document.getElementById('altem')


let mn=document.querySelector('input#min')
let sg=document.querySelector('input#seg')
 let contador=0

mn.focus()
let movalert=0

btnc.onclick=()=>{
 

if(Number(mn.value)>0 || Number(sg.value)>0){




    let relogio=setInterval(()=>{

contador=Number(sg.value)
sg.value=contador-1


if(Number(mn.value)>0 && contador==0){
mn.value= Number(mn.value)-1
contador=59
sg.value=contador
}

else{


    if(Number(mn.value)==0 && contador==0){
clearInterval(relogio)
sg.value=contador



sg.value=contador
let audioss=document.getElementById('musica')
let sons=document.createElement('audio')
sons.setAttribute('autoplay','')
audioss.appendChild(sons)
let origem=document.createElement('source')
origem.setAttribute('src','apito.mp3')/*** AQUI VAI O AUDIO QUE VAI TOCAR DEPOIS DO TEMPO DO CRONÔMETRO SE ESGOTAR ********/
sons.appendChild(origem)



}


}

},1000)

btna.onclick=()=>{
    clearInterval(relogio)
    contador=0
    sg.value=contador
  mn.value=0

}



btnb.onclick=()=>{
    clearInterval(relogio)

}





}
else{
   
    st.style.opacity=0.4
    alt.style.display='block'
     movalert=1


}


   st.onclick=()=>{
let pv=document.getElementById('prov')
       if(movalert==1){

let tempo=0

let paralizador=setInterval(()=>{

tempo+=0.1




if(tempo>0.2){
alt.style.backgroundColor='red'
alertem.style.color='black'

}



if(tempo>0.4){
 
  alt.style.backgroundColor='black'
  alertem.style.color='red'
  }


  if(tempo>0.6){
alt.style.backgroundColor='red'
alertem.style.color='black'
}



if(tempo>0.8){
 
  clearInterval(paralizador)

  alt.style.backgroundColor='black'
  alertem.style.color='red'
  tempo=0

  }


},100)



       }
   }



}


</script>

</body>
</html>

José satchova António

Postado por José satchova António

Postar um comentário

4 Comentários

Ad Code