home > tutoriale > javascript-ajax > cum-sa-faci-un-ceas-cu-javascript.php
Tutorial Cum sa faci un ceas cu Javascript

Cum sa faci un ceas cu JavaScript

3 Ianuarie 2011 de Mihail Alin

In acest tutorial va voi arata cum sa faceti un ceas pe care il puteti plasa oriunde pe pagina voastra cu Javascript.

Autor: Cum sa faci un ceas cu javascript
Autor :   Mihail Alin

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
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria JavaScript & Ajax

  Meniu Slide-Out cu Jquery, Html si CSS   -   Tutorial Jquery pentru incepatori   -   Cum sa centrezi o fereastra/popup   -   Cum sa faci un ceas cu JavaScript   -   Ferestre in Javascript/popups   -

Tutoriale aleatorii

  Cum sa creezi litere capitale/majuscule cu CSS   -   Cum sa faci un simplu web-site pe 3 coloane   -   Un simplu meniu in CSS si HTML   -   Table in HTML   -   Trimiterea datelor din formular la adresa de e-mail   -   Cum sa faci un ceas cu JavaScript   -   Exemplu anunt in PhotoShop   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

2 comenturi pana acum... (posteaza si tu)

Alin multumesc mult de tot, frumos tutorial.Imi trebuia codul cu setTimeOut pt ceas. Ms

Postat de Vlad pe data de: Friday, 03.1.13 @ 23:24pm

Buna Marina ,

La inceput poate parea destul de complicat , dar te asigur ca Javascript este destul de simplu si sunt sigur ca te vei descurca :P

Postat de Mihail Alin pe data de: Sunday, 02.10.13 @ 03:39am

Comentarii:

Nume:

Email:

Comentariu:
 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...
 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s
 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.