«

»

Lis 03

Wydrukuj to Wpis

Zegar analogowy – JavaScript

Zegar-analogowy-JavaScript

W tym atrykule znajdziesz gotowy sktypt zegara analogowego dla swojej strony internetowej, który został zrobiony w JavaScriptie. Skrypt jest bardzo prosty i nie trzeba znać dobrze JavaScript. Na dole jest pokazany przykład zegara.


Plik zegar.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html> 
   <html lang="pl"> 
      <head> 
         <meta charset=utf-8>
		 <link href="style.css" rel="stylesheet" type="text/css">
		 <script type='text/javascript' src='czas.js'></script>
         <title>Zegar</title>
      </head>
      <body>
		<div>
			<div id="minuta"><img src="minuta.png" ></div>
			<div id="godzina"><img src="godzina.png" ></div>
			<div id="sekunda"><img src="sekunda.png" ></div>
			<div id="tarcza">
				<img src='tarcza.png'>
			</div>
		</div>
      </body>
   </html>

Plik czas.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function Czas(){
    var data = new Date();
    var sekunda = data.getSeconds();
    var minuta = data.getMinutes();
    var godzina = data.getHours();
 
    var s = sekunda*6;
    var m = minuta*6;
    var Hm = minuta*0.5;
    if (godzina > 12) {
        h = (godzina - 12 )* 30;
      }
    else {
        h = godzina * 30;
      }
 
    var divS = document.getElementById("sekunda");
      divS.style.webkitTransform = "rotate("+ s +"deg)";
      divS.style.MozTransform = "rotate("+ s +"deg)";
      divS.style.OTransform = "rotate("+ s +"deg)";
      divS.style.msTransform = "rotate("+ s +"deg)";
    var divM = document.getElementById("minuta");
      divM.style.webkitTransform = "rotate("+ m +"deg)";
      divM.style.MozTransform = "rotate("+ m +"deg)";
      divM.style.OTransform = "rotate("+ m +"deg)";
      divM.style.msTransform = "rotate("+ m +"deg)";
    var divH = document.getElementById("godzina");
      divH.style.webkitTransform = "rotate("+ (h+Hm) +"deg)";
      divH.style.MozTransform = "rotate("+ (h+Hm) +"deg)";
      divH.style.OTransform = "rotate("+ (h+Hm) +"deg)";
      divH.style.msTransform = "rotate("+ (h+Hm) +"deg)";
 
    setTimeout(Czas, 1000);
  }  
window.onload = Czas;

Plik style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#tarcza {
  position: absolute;
}
#godzina {
  position: absolute;
  z-index: 2;
}
#sekunda {
  position: absolute;
  z-index: 3;
}
#minuta {
  position: absolute;
  z-index: 1;
}

A to rezultat

Załączniki do pobrania

  • rar zegar
    HTML, JavaScript, CSS Document
    Rozmiar pliku: 35 KB Pobrania: 848

Permalink do tego artykułu: http://tmall.com.pl/zegar-analogowy-javascript/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć tych znaczników i atrybutów HTMLa: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>