Cum sa faci un ceas cu JavaScript
3 Ianuarie 2011 de Mihail AlinIn acest tutorial va voi arata cum sa faceti un ceas pe care il puteti plasa oriunde pe pagina voastra cu Javascript.
Chiar daca ideea de a face un ceas cu Javascript pare grea , trebuie sa va spun ca este chiar foarte simplu , cu cateva linii de cod reusim acest lucru.
Haideti sa trecem la treaba , mai intai JavaScript-ul :
function Ceas()
{
var data_actuala = new Date();
//tragem orele
var xore = data_actuala.getHours();
//tragem minutele
var xminute = data_actuala.getMinutes();
//tragem secundele
var xsecunde = data_actuala.getSeconds();
//accesam formularul si ii trecem valoarea actuala a : orei , minutului si secundei
document.ceas.ceasmerge.value = xore + ":" + xminute + ":" + xsecunde;
//facem refresh la fiecare secunda la ceas , daca nu facem refresh , ceasul ramane oprit
setTimeout('Ceas()',1000);
}
Codul de mai sus il vom pune intre etichetele HTML <head> </head>
Acum formularul in care trecem valorile ceasului :
<form name="ceas"> <input type="text" size="20" name="ceasmerge" /> </form>
Dupa cum puteti vedea in codul javascript , mai intai accesam eticheta formularului numita "ceas" dupa care input-ul numit "ceasmerge" pentru ai putea trece valorile variabilelor .
Normal ca nu vrem sa vedem marginile acestui input, asa ca vom aplica un pic de CSS :
input{
border:0;
font-size:15px;
font-weight:bold;
}
Codul complet
<html>
<head>
<title>Cum sa faci un ceas cu Javascript TEST </title>
<script type="text/javascript">
function Ceas()
{
var data_actuala = new Date();
var xore = data_actuala.getHours();
var xminute = data_actuala.getMinutes();
var xsecunde = data_actuala.getSeconds();
document.ceas.ceasmerge.value = xore + ":" + xminute + ":" + xsecunde;
setTimeout('Ceas()',1000);
}
</script>
<style type="text/css">
input{
border:0;
font-size:15px;
font-weight:bold;
}
</style>
</head>
<body onload="Ceas();">
<form name="ceas">
<input type="text" size="20" name="ceasmerge" />
</form>
</body>
</html>
Observati cum etichetei body i-am adaugat eventul onload si i-am trecut ca parametru numele functiei care gazduieste codul ceasului. Facand acest lucru spunem navigatorului ca atunci cand pagina se incarca, sa porneasca ceasul.
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta