Toto je jejich hlavní skript:
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
Úplně nahoře vidíme:
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
Jen Přidej miniatura a žlutý odstín a šipky.
200?"200px":""+(this.scrollHeight+5)+"px");"> « 00:00:00»
A tady je to, co se stalo:
Sami se tedy můžete přesvědčit, jak se vše změnilo, a nyní si vše můžete udělat sami a krásně si to nastavit tak, aby vyhovovalo vašim stylům. Co ostatní nedokážou, protože je tu Flash, že tu nejsou.
Nyní navíc hodiny na Flash
200?"200px":""+(this.scrollHeight+5)+"px");">
Můžete si tedy vybrat, které se vám nejvíce líbí, a vložit je, protože některé lze nainstalovat do bloku, ale ty první se vám líbí více, protože jsou flexibilní a přizpůsobitelné, což může udělat každý.
O vytvoření analogových hodin jsme již diskutovali s pomocí CSS a JavaScript. V tomto tutoriálu vytvoříme stejné hodiny pomocí CSS3, abychom viděli, jak na to nový standard mění přístup k rozvoji různých efektů. Demo pro tento tutoriál bude fungovat pouze v prohlížečích, které podporují vlastnost CSS3 točit se(v IE6 demo NEFUNGUJE).
CSS3 Transform:rotate
Transformace: otočit- nová vlastnost CSS 3, která umožňuje rotaci různé prvky. Pomocí transformací můžete také měnit měřítko prvků, zavádět deformace horizontálně i vertikálně a přesouvat prvky po webové stránce. To vše lze animovat pomocí vlastnosti přechod(S odlišné typy přechody a trvání).
Stejné akce pro animaci prvků stránky lze provést pomocí některých JavaScriptové knihovny(např. jQuery). Samozřejmě s jQuery můžete oživit změnu mnohem více Vlastnosti CSS než s přechod. Ale jQuery je inline CSS nástroj, JavaScriptové knihovny jsou externí nástroje, které mohou, ale nemusí být dostupné. CSS3 každopádně otevírá nové slibné směry vývoje vývojářů.
Grafika
Nejprve musíte udělat GUI hodiny. Budeme mít základnu a tři šipky. Všechny pohyblivé části jsou ve Photoshopu nakrájeny na 600 pixelů na výšku a 30 pixelů na šířku a jsou umístěny svisle a výchozí vlastnost je točit se otočí prvek kolem středu. Nemovitost můžete využívat transformovat-původ pro nastavení středu otáčení na jiný bod.
K základu hodin lze použít jakýkoli obrázek. Pohyblivé části jsou obrázky formát PNG s průhledností.
Chcete-li archivovat pomocí zdrojový kód včetně ukázek PSD soubor, který obsahuje všechny obrázky.
HTML značení
Označení hodin je jednoduchý neuspořádaný seznam. Každý prvek seznamu obsahuje pohyblivou část a má odpovídající id:
css
#clock ( pozice: relativní; šířka: 600px; výška: 600px; okraj: 20px auto 0 auto; background: url(clockface.jpg); list-style: none; ) #sec, #min, #hour ( position: absolute ; šířka: 30px; výška: 600px; nahoře: 0px; vlevo: 285px; ) #sec ( pozadí: url(sechand.png); z-index: 3; ) #min ( pozadí: url(minhand.png); z -index: 2; ) #hour ( background: url(hourhand.png); z-index: 1; )
CSS je také docela jednoduché. Vzhledem k tomu, že pohyblivé části mají stejné rozměry a výchozí body, můžeme je deklarovat společně, abychom se vyhnuli opakování. Živel ul získá relativní polohu, která vám umožní používat absolutní umístění pro šipky v něm umístěné.
CSS3 bude použito s malým kódem jQuery.
JavaScript
- Získání času
- Spočítejte a vložte css styly(úhel natočení) pro každý prvek.
- Aktualizujte styly CSS v pravidelných intervalech.
Je třeba poznamenat, že jQuery funguje skvěle s novými vlastnostmi CSS3. Protože se styly přidávají dynamicky, je soubor CSS ověřen jako CSS2.1!
Získání času
Můžete získat čas od pomocí PHP kód, ale bude to trvat server. A JavaScript vrátí místní čas uživatele.
Informace obdržíme prostřednictvím Datum() a nastavte všechny naše proměnné. Podle toho použijeme GetSeconds(), GetMinutes() nebo GetHours() pro Datum() pro nastavení sekund, minut a hodin:
var sekund = new Date().getSeconds();
Ve výše uvedeném řádku bude získáno číslo z rozsahu od 0 do 59, které bude přiřazeno proměnné sekundy.
Určete úhel
Poté musíte vypočítat úhel otočení pro každou šipku. Pro sekundovou a minutovou ručku, které mají 60 pozic na hodinovém kruhu, musíme vydělit 360 stupňů 60, což nám dá číslo 6. To znamená, že každá sekunda nebo minuta odpovídá otočení o 6 stupňů. Výsledek výpočtů uložíme do jiné proměnné. Na několik sekund vypadá kód takto:
Varsdegree = sekund * 6;
Po celé hodiny se výpočty budou lišit. Vzhledem k tomu, že máme ciferník s 12 pozicemi pro hodinovou ručku, odpovídá každá hodina úhlu natočení 30 stupňů (360/12=30). Ale hodinová ručička musí být také v mezistavech, to znamená, že se musí každou minutu pohybovat. To znamená, že ve 4:30 by hodinová ručička měla být v polovině mezi 3. a 4. hodinou. Uděláme to takto:
Varhdegree = hodiny * 30 + (min / 2);
To znamená, že k úhlu natočení o počet hodin přičteme také hodnotu dělení počtu minut 2 (což nám dá hodnotu v rozsahu od 0,5 do 29,5). Hodinová ručička tedy bude „otočena“ o úhel od 0 do 30 stupňů (hodinový přírůstek).
Například:
2 hodiny 40 minut -> 2*30 = 60 stupňů a 40/2 = 20 stupňů. Celkem: 80 stupňů.
Dá se předpokládat, že hodiny budou ukazovat po 12, protože hodnota rotace bude více než 360 stupňů. Ale vše funguje skvěle.
Nyní jsme všichni připraveni vložit pravidla CSS.
Nastavení stylu
Takto vypadá pravidlo CSS3 točit se ve stylovém listu:
#sec ( -webkit-transform: rotation(45deg); -moz-transform:otočte(45deg); )
A takto bude kód vložen pomocí jQuery:
$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));
Jediný problém je nastavit výslednou hodnotu úhlu v proměnné "sdegree" na syntaxi místo 45 stupňů. Potřebujete vytvořit řetězec v jiné proměnné střídat a zcela nahradit druhý argument. Takhle:
Var srotate = "rotate(" + sdegree + "deg)";
A kód jQuery bude vypadat takto:
$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));
Dát to všechno dohromady
Kód jQuery bude vypadat takto:
$(document).ready(function() ( setInterval(function() ( var sekund = new Date().getSeconds(); var sdegree = sekund * 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 = hodiny * 30 + (min / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = min * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) );), 1000);));
Používáme Funkce JavaScript nastavitInterval aktualizovat styly každou sekundu. Proměnné, které přijímají časové hodnoty, musí být v něm aktualizovány. V opačném případě se hodiny stanou na stránce zbytečným odpadkem.
Závěr
Tato lekce ukazuje praktické využití vlastnosti točit se nesouvisející s designem.
Udělejme Digitální hodinky s použitím data a času jQuery a CSS3 pro malou animaci.
HTML
Označení je jednoduché a flexibilní. tvoříme DIV s třídou hodiny, DIV s třídou datum, která zobrazí datum a neuspořádaný seznam obsahující hodiny, minuty a sekundy.
css
Styly s malou animací:
Kontejner (šířka: 960px; okraj: 0 auto; přetečení: skryté;) .clock (šířka:800px; okraj:0 auto; padding:30px; border:1px solid #333; color:#fff; ) #Date ( font- rodina: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul ( width:800px; margin:0 auto; padding:0px; list- 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 ( position:relative; -moz-animation:mymove 1s easy infinite; -webkit-animation:mymove 1s easy infinite; padding-left:10px; padding-right:10px; ) @-webkit-keyframes mymove ( 0 % (opacity:1.0; text-shadow:0 0 20px #00c6ff;) 50% (opacity:0; text-shadow:none; ) 100% (opacity:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0 % (opacity:1.0; text-shadow:0 0 20px #00c6ff;) 50 % (opacity:0; text-shadow:none; ) 100 % (opacity:1.0; text-shadow :0 0 20px #00c6ff; ) )
JS
Spojujeme se jQuery knihovna
A pak náš scénář
- nové datum()- vytvoří nový objekt datum s významem dnešní datum a aktuální čas v prohlížeči počítače.
- setDate()- metoda nastavuje den v měsíci (od 1 do 31), místní čas
- getDate()- metoda vrací den v měsíci (od 1 do 31) pro zadané datum podle místního času
- getSeconds(), getMinutes() a getHours()- tyto metody umožňují načíst sekundy, minuty a hodiny aktuálního času v prohlížeči.
- (sekundy< 10 ? "0" : "") + seconds) - přidá úvodní nulu k hodnotě sekund (minut a hodin). Symboly ? a : zahrnovat ternární ( trojice) operátor. Jedná se o speciální operátor, který vrací hodnotu před dvojtečkou, pokud je podmínka dříve otázka (? ) že jo ( skutečný), nebo hodnotu po dvojtečky pokud je podmínka nepravdivá ( Nepravdivé).
- Funkce nastavitInterval- je standardní javascript funkce, ne součást jQuery. Spustí kód mnohokrát, v pravidelných intervalech (milisekundy).
Jedná se o jednoduchý skript, který zobrazuje systémový čas v JavaScriptu v prostém textu. Hodiny, minuty a sekundy oddělené dvojtečkou – a je to.
Pro nastavení vlastního stylu hodin stačí definovat styl bloku s ID – #time . V CSS si můžete nastavit písmo hodin, jejich barvu a velikost. Pokud nepotřebujete jednoduché hodiny, ale složitější hodiny, podívejte se na Flash hodiny pro daný web. Odkud skript získává časové údaje? Zobrazený čas je přesně ten, který je nastaven na zařízení.
Instalace
Vložte následující kód na místo na webu, kde chcete vidět hodiny. Na uCoz to může být například „Nahoře“ nebo „Dolní část webu“:
200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00
Skript okamžitě zobrazí na místě, kde jste jej nainstalovali, řádek textu s hodinami. Například, "00:00:00". Sekundy, minuty a hodiny jsou mimochodem vždy dvouciferné, takže změna hodnot je hladká.