Publicado el Deja un comentario

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();

Please follow and like us:
Publicado el Deja un comentario

04. CSS Modelo de Cajas

Como preparar el diseño web, introduccion al modelo de cajas.

El archivo html es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/modeloCajas.css”>
<title>
Modelo Cajas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<div id=”principal”>
<p>PRINCIPAL  ldkjflajdslkfjladksjflksdjflkjasdkljlkf</p>
</div>
<div id=”secundario”><p>SECUNDARIO jdlajfldksjflksjdaflkjdslkjflksdjdflkjdsakljfkl</p></div>
<p>Parrafo jkljkdjfskjfk             primero jdlkf<br>jalkdjslakjflkajdkljflkasdjflkjadlkjflkasj<br>dflkjasdlkjflkajdlkfjldsakjfljlfjladsjlkfjladjlfjl</p>
<p>Parrafo segundo kjdkfjkldj                    jhdlkajdkjfsaaa<br>aaaaaaalkdfjdlajflajdlsjfldjslkfjlasdkjflkjsdljflsdjlfjlsdajfljsdlkfjlksdajflkjsdlj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El archivo css es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:gray;
}
p{
    font-family:Helvetica,sans-serif;
    font-size:medium;
    font-style:italic;
    text-transform:lowercase;
    letter-spacing:3px;
    word-spacing:10px;
   
}
div {
    padding:10px;
    border: 5px solid red;
    height:90px;
    width:90px;
    min-height:100px;
    max-width:200px;
}
#secundario {
    background-color:green;
    border-style: outset;
    border-width: 10px;
    border-color: rgb(0,153,23);
    float:right;
   
}
h1{
    font-size:1.25em;
    font-weight:bold;
    color:blue;
    text-shadow:4px 3px 5px red;
}
h2{
    font-size:1em;
    color:white;
    text-decoration:underline;
}

No dejeis de practicar, hasta pronto.

Please follow and like us: