Jak přidat hodiny do html. Ruční hodiny pomocí CSS3

O tvorbě číselníkový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 vývoji různých efektů. Demo pro tento tutoriál bude fungovat pouze v prohlížečích, které podporují vlastnost CSS3 střídat(demo NEFUNGUJE v IE6).

Transformace: otočit- nová vlastnost CSS 3, která umožňuje otáčet různé prvky. Pomocí transformací můžete také změnit měřítko prvků, zavést horizontální a vertikální deformace a přesouvat prvky po webové stránce. To vše lze animovat pomocí vlastnosti přechod(S různé typy přechody a trvání).

Stejné akce pro animaci prvků stránky lze provést pomocí některé knihovny JavaScript (například jQuery). Samozřejmě s pomocí jQuery můžete oživit změnu mnohem více Vlastnosti CSS než používat přechod. Ale jQuery je vestavěný nástroj CSS, knihovny JavaScript jsou externí nástroje, které nemusí být k dispozici. CSS3 každopádně otevírá nové slibné směry vývoje vývojářů.

Nejprve musíme udělat GUI pro hodinky. Budeme mít základnu a tři šipky. Všechny pohyblivé části jsou ve Photoshopu oříznuty na rozměry 600px na výšku a 30px na šířku a jsou umístěny svisle a ve výchozím nastavení je vlastnost střídat otočí prvek kolem středu. Nemovitost můžete využívat transformovat-původ abyste nastavili střed otáčení na jiný bod.

Na základnu hodin můžete použít libovolný obrázek. Pohyblivé části jsou obrázky formát PNG s průhledností.

Archivováno s zdrojový kód včetně ukázek PSD soubor, který obsahuje všechny obrázky.

Rozvržení hodin je jednoduchý neuspořádaný seznam. Každý prvek seznamu obsahuje pohyblivou část a má odpovídající id:

#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; nahoře: 285px; z -index: 2;

CSS je také docela jednoduché. Vzhledem k tomu, že pohyblivé části mají stejné velikosti a výchozí body, pak je můžeme deklarovat společně, abychom se vyhnuli opakování. Živel ul přijímá relativní polohu, která umožňuje absolutní umístění šipek, které se v ní nacházejí.

CSS3 bude aplikováno pomocí malý kód jQuery.

Je třeba poznamenat, že jQuery funguje skvěle s novými vlastnostmi CSS3. Navíc, protože styly jsou přidávány dynamicky, je soubor CSS ověřen jako CSS2.1!

Čas lze také získat pomocí kódu PHP, ale bude to serverový čas. A JavaScript vrátí místní čas uživatele.

Informace obdržíme pomocí 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.

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ává čí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é. Kód na několik sekund vypadá takto:

Stupeň var = sekundy * 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). Hodinová ručička ale 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:

Var hdegree = hodiny * 30 + (min / 2);

To znamená, že k úhlu natočení o počet hodin přičteme hodnotu dělení počtu minut 2 (což nám dá hodnotu v rozmezí od 0,5 do 29,5). Hodinová ručka bude tedy „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ňů.

Můžeme předpokládat, že hodiny ukážou kdo ví co po 12, protože hodnota rotace bude více než 360 stupňů. Ale vše funguje skvěle.

Nyní jsme připraveni vložit pravidla CSS.

Takto vypadá pravidlo CSS3 střídat 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" v 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));

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); ("-moz-transform" : hrotate, "-webkit-transform" : hrotate) ), 1000 setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = mins * 6); ; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) );

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.

Tato lekce ukazuje praktické použití vlastnosti střídat nesouvisí s designem.

Udělejme elektronické hodiny s datem a časem pomocí jQuery a CSS3 pro malou animaci.

Označení je jednoduché a flexibilní. Vytvořte DIV s třídou nazvanou clock , DIV s třídou nazvanou Date, která zobrazí datum, a neuspořádaný seznam obsahující hodiny, minuty a sekundy.

Styly designu 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; text-shadow:0 0 5px #00c6ff; :center; ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( pozice: relativní -moz-animace:mymove 1s nekonečno; -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; ) )

Připojení knihovny jQuery

A pak náš skript $(document).ready(function() ( // Vytvořte dvě proměnné s názvy měsíců a dnů v týdnu v poli var monthNames = [ "leden", "únor", "březen", " duben", "květen", "červen", "červenec", "srpen", "září", "říjen", "listopad", "prosinec" ]; var dayNames= ["neděle", "pondělí", "úterý" ", "Wednesday" ,"Thursday","Friday","Saturday"] // Vytvoří objekt newDate() var newDate = new Date(); // Načte aktuální datum z objektu Date newDate.setDate(newDate. getDate() den, datum, měsíc a rok $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); function() ( / / Vytvořte objekt newDate() a načtěte sekundy aktuálního času var sekund = new Date().getSeconds(); // Přidejte úvodní nulu k hodnotě sekund $("#sec"). html((sekundy< 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() - vytvoří nový objekt Date s hodnotou aktuálního data a aktuálního času v prohlížeči počítače.
• setDate() - metoda nastavuje den v měsíci (od 1 do 31) podle místního času
• 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í v prohlížeči načíst sekundy, minuty a hodiny aktuálního času.
• (sekundy< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• Funkce setInterval je standardní funkce JavaScriptu, není součástí jQuery. Spustí kód mnohokrát, v pravidelných intervalech (milisekundy).

Toto je jejich hlavní skript:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

setInterval(funkce () (
datum = nové datum(),
h = date.getHours(),
m = date.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);

Úplně nahoře vidíme:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

Stačí přidat tučný text a žlutý odstín a šipky.

200?"200px":""+(this.scrollHeight+5)+"px");">"00:00:00"

A stalo se toto:

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 zařídit tak, aby vyhovovalo vašim stylům. Že ostatní nelze udělat, protože je tam zapnutý Flash, že tady nejsou.

Nyní jsou navíc na Flashi hodiny

200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">

Můžete si tedy vybrat, které se vám nejvíce líbí, a nainstalovat 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ý.

Toto je jednoduchý skript, který ukazuje systémový čas v JavaScriptu v prostém textu. Hodiny, minuty a sekundy oddělené dvojtečkou – to je vše.

Pro nastavení vlastního stylu hodin stačí definovat styl pro blok s ID - #time. V CSS si můžete nastavit vlastní font hodin, jejich barvu a velikost. Pokud nepotřebujete jednoduché hodiny, ale složitější, 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í.

Vložte následující kód na místo, kde chcete na svém webu 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

setInterval(funkce () (
datum = nové datum(),
h = date.getHours(),
m = date.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);

Skript okamžitě zobrazí řádek textu s hodinami v místě, kam jste jej nainstalovali. Například „00:00:00“. Mimochodem, sekundy, minuty a hodiny jsou vždy dvoumístné, takže změny hodnot probíhají hladce.