Ez a fő szkriptjük:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
setInterval(függvény () (
dátum = new Date(),
h = dátum.getHours(),
m = dátum.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);
A legtetején ezt látjuk:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
Csak add hozzá miniatűrés sárga árnyalat és nyilak.
200?"200px":""+(this.scrollHeight+5)+"px");">"00:00:00"
És ez történt:
Így saját szemével láthatja, hogyan változott minden, és most mindent saját maga csinálhat, és gyönyörűen elrendezheti stílusának megfelelően. Hogy másokat nem lehet megtenni, mivel a Flash be van kapcsolva, hogy ők nincsenek itt.
Most ezen kívül van egy óra a Flash-en
200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">
Így kiválaszthatod, hogy melyik tetszik a legjobban, és telepítheted őket, mert van, amelyik blokkba is telepíthető, de az elsők jobban tetszenek, hiszen rugalmasak és testreszabhatóak, amit bárki megtehet.
A számlapos órák létrehozásáról már tárgyaltunk CSS használatávalés JavaScript. Ebben az oktatóanyagban ugyanazt az órát készítjük el CSS3 használatával, hogy megtudjuk, hogyan új szabvány megváltoztatja a különböző effektusok kialakításának megközelítését. Az oktatóanyag bemutatója csak a CSS3 tulajdonságot támogató böngészőkben működik forog(a demó NEM MŰKÖDIK IE6-ban).
Átalakítás: forgatás- új CSS 3 tulajdonság, amely lehetővé teszi a forgatást különféle elemek. Az átalakítások segítségével módosíthatja az elemek léptékét, vízszintes és függőleges torzításokat vezethet be, és elemeket mozgathat a weboldalon. Mindez animálható a tulajdonság segítségével átmenet(Val vel különböző típusokátmenetek és időtartam).
Az oldalelemek animálásához ugyanazokat a műveleteket lehet végrehajtani néhány használatával JavaScript-könyvtárak(pl. jQuery). Természetesen azzal jQuery használatával sokkal több változását animálhatod CSS tulajdonságok mint a használata átmenet. De a jQuery be van építve CSS használatával, A JavaScript-könyvtárak külső eszközök, amelyek esetleg nem állnak rendelkezésre. A CSS3 mindenesetre új, ígéretes irányokat nyit meg a fejlesztők fejlesztése előtt.
GrafikaElőször tennünk kell GUIórákhoz. Lesz egy alapunk és három nyílunk. A Photoshop minden mozgó alkatrészét 600 képpont magasságú és 30 képpont szélességű méretre vágja, és függőlegesen helyezi el, és alapértelmezés szerint a tulajdonság forog az elemet a közepe körül forgatja. Használhatja az ingatlant átalakulás-eredetű hogy a forgás középpontját egy másik pontra állítsa.
Az óra alapjául bármilyen kívánt képet használhat. A mozgó részek képek PNG formátumátláthatósággal.
Archiválva ezzel: forráskód demókat tartalmaznak PSD fájl, amely az összes képet tartalmazza.
Az óra elrendezése egy egyszerű, rendezetlen lista. Minden listaelem tartalmaz egy mozgó részt, és rendelkezik egy megfelelő azonosítóval:
CSS#óra (pozíció: relatív; szélesség: 600px; magasság: 600px; margó: 20px auto 0 auto; háttér: url(clockface.jpg); listastílus: nincs; ) #sec, #perc, #hour (pozíció: abszolút ; szélesség: 30px; magasság: 600px; felül: 0px; bal: 285px; ) #sec ( háttér: url(sechand.png); z-index: 3; ) #min ( háttér: url(minhand.png); z -index: 2; ) #óra ( háttér: url(hourhand.png); z-index: 1; )
A CSS is meglehetősen egyszerű. Mivel a mozgó részek méretei és kiindulási pontjai azonosak, az ismétlődés elkerülése végett együtt deklarálhatjuk őket. Elem ul relatív pozicionálást kap, lehetővé téve a használatát abszolút pozicionálás a benne található nyilakért.
A CSS3 egy kis jQuery kód segítségével kerül alkalmazásra.
JavaScriptMeg kell jegyezni, hogy a jQuery remekül működik az új CSS3 tulajdonságokkal. Ezenkívül, mivel a stílusok dinamikusan kerülnek hozzáadásra, a CSS-fájl CSS2.1-ként érvényesül!
Idő megszerzéseIdőt is lehet szerezni PHP használatával kódot, de szerveridő lesz. A JavaScript pedig visszaadja a felhasználó helyi idejét.
segítségével kapunk információkat Dátum()és állítsuk be az összes változónkat. Ennek megfelelően fogjuk használni GetSeconds(), GetMinutes() vagy GetHours() Mert Dátum() másodpercek, percek és órák beállításához:
Var seconds = new Date().getSeconds();
A fenti sorban egy 0 és 59 közötti számot kapunk és hozzárendelünk egy változóhoz. másodpercig.
A szög meghatározásaEzután ki kell számítania az egyes nyilak forgási szögét. A másodperc- és percmutatóknál, amelyeknek 60 pozíciója van az órakörön, el kell osztanunk a 360 fokot 60-nal, ami a 6-ot adja. Ez azt jelenti, hogy minden másodperc vagy perc 6 fokos elfordulásnak felel meg. A számítások eredményét egy másik változóban tároljuk. A kód másodpercekig így néz ki:
Var fok = másodperc * 6;
Órák esetében a számítások eltérőek lesznek. Mivel 12 állású óramutatónk van, minden óra 30 fokos elforgatási szögnek felel meg (360/12=30). De az óramutatónak is köztes állapotban kell lennie, vagyis percenként kell mozognia. Vagyis 4:30-kor az óramutató félúton legyen 3 és 4 óra között. A következőképpen tesszük:
Var hdegree = óra * 30 + (perc / 2);
Vagyis a forgásszöghez hozzáadjuk az órák számával a percek számának 2-vel való osztásának értékét (ami 0,5 és 29,5 közötti tartományba eső értéket ad). Így az óramutató 0 és 30 fok közötti szögben „elfordul” (óra növekmény).
Például:
2 óra 40 perc -> 2*30 = 60 fok és 40/2 = 20 fok. Összesen: 80 fok.
Feltételezhetjük, hogy 12 után ki tudja mit mutat az óra, hiszen az elforgatási érték több mint 360 fok lesz. De minden remekül működik.
Most készen állunk a CSS-szabályok beillesztésére.
A stílus beállításaÍgy néz ki egy CSS3 szabály forog a stíluslapon:
#sec ( -webkit-transform: forgatás (45 fok); -moz-transform: forgatás (45 fok); )
És a kód beillesztése így történik a jQuery használatával:
$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));
Az egyetlen probléma az, hogy a kapott szögértéket a szintaxis "sdegree" változójában állítsa be 45 fok helyett. Karakterláncot kell létrehozni egy másik változóban forogniés teljesen helyettesíti a második érvet. Mint ez:
Var srotate = "rotate(" + sdegree + "deg)";
És a jQuery kód így fog kinézni:
$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));
Az egészet összerakvaA jQuery kód így fog kinézni:
$(document).ready(function() ( setInterval(function() ( var seconds = new Date().getSeconds(); var sdegree = másodperc * 6; var srotate = "rotate(" + sdegree + "deg)") ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var hours = new Date() .getHours(); var mins = new Date().getMinutes(); var hdegree = óra * 30 + (perc / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#óra ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = perc * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#perc").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); ), 1000); ));
Használjuk JavaScript függvény setInterval hogy másodpercenként frissítse a stílusokat. Az időértékeket fogadó változókat frissíteni kell benne. Ellenkező esetben az óra haszontalan szemétté válik az oldalon.
KövetkeztetésEz a lecke bemutatja gyakorlati használat tulajdonságait forog nem kapcsolódik a tervezéshez.
Csináljuk Digitális óra dátummal és idővel a jQuery és a CSS3 használatával egy kis animációhoz.
HTMLA jelölés egyszerű és rugalmas. Hozzon létre egy DIV-t egy óra nevű osztállyal, egy DIV-t a Date nevű osztállyal, amely megjeleníti a dátumot, és egy rendezetlen listát, amely az órákat, perceket és másodperceket tartalmazza.
CSS
Tervezési stílusok kis animációval:
Tároló (szélesség: 960 képpont; margó: 0 automatikus; túlcsordulás: rejtett;) .clock (szélesség: 800 képpont; margó: 0 automatikus; kitöltés: 30 képpont; szegély: 1 képpont tömör #333; szín: #fff; ) #Dátum ( font- család: Arial, Helvetica, sans-serif; font-size: 36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul (szélesség:800px; margó:0 auto; kitöltés:0px; lista- style:none; text-align:center; ) ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( pozíció:relatív; -moz-animation:mymove 1s végtelen; -webkit-animation:mymove 1s könnyű végtelen; padding-left:10px; padding-right:10px; ) @-webkit-keyframes mymove ( 0% (átlátszatlanság: 1,0; text-shadow: 0 0 20px #00c6ff;) 50% (átlátszatlanság: 0; text-shadow:none; ) 100% (átlátszatlanság: 1,0; szövegárnyék: 0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (átlátszatlanság:1.0; text-shadow:0 0 20px #00c6ff;) 50% (átlátszatlanság:0; text-shadow:none; ) 100% (átlátszatlanság:1.0; text-shadow :0 0 20px #00c6ff; ) )
JSA jQuery könyvtár csatlakoztatása
Ezután a $(document).ready(function() ( // Hozzon létre két változót a hónapok és a hét napjainak nevével a tömbben var monthNames = [ "január", "február", "március", " április", "május", "június", "július", "augusztus", "szeptember", "október", "november", "december" ]; var dayNames= ["vasárnap", "hétfő", "kedd" ", "Wednesday" "Thursday","Friday","Saturday"] // Objektum létrehozása newDate() var newDate = new Date(); // Az aktuális dátum lekérése a Date objektumból newDate.setDate(newDate. getDate()); // Kimeneti nap, dátum, hónap és év $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) se ").html((másodperc< 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });
- new Date() - létrehoz egy új dátum objektumot egy értékkel mostani dátumés a pontos időt a számítógép böngészőjében.
- setDate() - a metódus beállítja a hónap napját (1-től 31-ig), helyi idő szerint
- getDate() - a metódus a hónap napját adja vissza (1-től 31-ig) a megadott dátumhoz a helyi idő szerint
- getSeconds(), getMinutes() és getHours() – Ezek a metódusok lehetővé teszik az aktuális idő másodperceinek, perceinek és óráinak lekérését a böngészőben.
- (másodperc< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
- A setInterval függvény egy szabványos JavaScript függvény, nem a jQuery része. Sokszor végrehajtja a kódot, rendszeres időközönként (ezredmásodpercenként).
Ez egy egyszerű szkript, amely egyszerű szövegben jeleníti meg a rendszeridőt JavaScriptben. Órák, percek és másodpercek kettősponttal elválasztva – ennyi.
Az óra saját stílusának beállításához elegendő az ID - #time blokkhoz a stílust megadni. A CSS-ben saját betűtípust állíthatunk be az órához, annak színét és méretét. Ha nem egyszerű órára van szüksége, hanem bonyolultabbra, akkor nézze meg az oldal Flash órákat. Honnan veszi a szkript az időadatokat? A megjelenített idő pontosan megegyezik a készüléken beállított idővel.
TelepítésIllessze be a következő kódot arra a helyre, ahol látni szeretné az órát a webhelyén. Az uCoz-on ez lehet például „Top” vagy „Bottom of the site”:
200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00
setInterval(függvény () (
dátum = new Date(),
h = dátum.getHours(),
m = dátum.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);
A szkript azonnal megjelenít egy szövegsort egy órával azon a helyen, ahol telepítette. Például "00:00:00". A másodpercek, percek és órák egyébként mindig kétjegyűek, így az értékek változása zökkenőmentesen történik.