Mostrando entradas con la etiqueta editor. Mostrar todas las entradas
Mostrando entradas con la etiqueta editor. Mostrar todas las entradas

sábado, 29 de agosto de 2020

01 Editores de codigo

 En el siguiente video vemos algunos de los editores que podemos usar para crear nuestras paginas web.




sábado, 3 de marzo de 2018

05 JavaScript. Contador de tiempo

Creamos un contador de tiempo para nuestra web, para ello usamos HTML, CSS y JavaScript.



El codigo es:

HTML
<!DOCTYPE html>
<html>
<head>
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<title>
Contador
</title></head>
<body>
<section>
<div id="contenido">
<article>
<div id="tiempo">
<h5 id="titulo">
<span>Horas</span>
<span>Minutos</span>
<span>Segundos</span>
</h5>
<h2 id="contador">
<span id="horas">00</span>
<span id="minutos">00</span>
<span id="segundos">00</span>
</h2>
</div>
</article>
</div></section>
<script src="js/tiempo.js"></script>
</body></html>
CSS
 body{
    margin:0 auto;
    max-width:98%;
    font-family: Helvetica, Arial;
    font-size:14px;

}
#titulo{
    font-size:1.3em;
    text-align:center;
    margin-top:5em;
    padding:1.3em;
    color:#434343;
}
#contador{
    font-size:2.2em;
    text-align:center;
    color:#434343;
}
JavaScript
 var horas,minutos,segundos;
horas=0;
minutos=0;
segundos=0;
hor=document.getElementById("horas");
min=document.getElementById("minutos");
seg=document.getElementById("segundos");
function tiempo(){
    var contador=0;
    window.setInterval(function(){
        if(contador<10){
            seg.innerHTML="0"+contador;
        }else{
            seg.innerHTML= contador;
        }
        if(contador>59){
            segundos=0;
            contador=0;
            minutos=minutos+1;
        }
        if(minutos>59){
            minutos=0;
            horas=horas+1;
        }
        if(horas>23){
            horas=0;
           
        }
        if(minutos<10){
            min.innerHTML="0"+minutos;
        }else{
            min.innerHTML=minutos;
        }
        if(horas<10){
            hor.innerHTML="0"+horas;
        }else{
            hor.innerHTML=horas;
        }
        contador++;
    },1000);
}
tiempo();