D4mations.com

Criando um relógio com JAVASCRIPT



Nesta aula iremos criar um incrível relógio utilizando apenas javascript!

Original source

d4mer

, , , , ,

35 responses to “Criando um relógio com JAVASCRIPT”

  7. meu codico atualizado e bunitão com direito a butão de atualizar

    <!DOCTYPE html>
    <html>
    <head>
    <title>javascript</title>
    <meta charset="utf-8">
    <script type="text/javascript">
    function relogio() {
    var data = new Date();
    var horas = data.getHours();
    var minutos = data.getMinutes();
    var segundos = data.getSeconds();

    if (horas < 10) {
    horas = "0"+horas;
    }
    if (minutos < 10) {
    segundos = "0"+minutos;
    }
    if (segundos < 10) {
    segundos = "0"+segundos;
    }

    document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos;
    }
    window.setInterval("relogio()",1000);
    </script>
    <style type="text/css">
    #relogio {
    font:bold 28pt arial;
    display: block;
    margin: 100px auto;
    padding: 30px;
    background-color: #FFFF00;
    width: 150px;
    border-radius: 6px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

    }
    a {
    text-decoration: none;
    color: #fff;
    font-family: arial;
    border-radius: 3px;
    display: block;
    width: 60px;
    margin: -80px auto;
    box-shadow: 0px 0px 3px rgba(0,0,0, .3);
    padding: 5px 10px 5px 10px;
    background-color: #EEEE00;
    }
    a:hover {
    text-decoration: none;
    color: #fff;
    font-family: arial;
    border-radius: 3px;
    display: block;
    width: 60px;
    margin: -80px auto;
    box-shadow: 0px 0px 3px rgba(0,0,0, .3);
    padding: 5px 10px 5px 10px;
    background-color: #CDCD00;
    }
    </style>
    </head>
    <body onload="relogio();">
    <div id="relogio">
    </div>
    <a href="file:///C:/Users/jocelino/Documents/javascript/relogio_js_css_html.html">atualizar</a>
    </body>
    </html>

Leave a Reply