Kā pievienot pulksteni html. Rokas pulkstenis, izmantojot CSS3

Mēs jau apspriedām ciparnīcu pulksteņu izveidi ar izmantojot CSS un JavaScript. Šajā apmācībā mēs izveidosim to pašu pulksteni, izmantojot CSS3, lai redzētu, kā to izdarīt jauns standarts maina pieeju dažādu efektu attīstīšanai. Šīs apmācības demonstrācija darbosies tikai pārlūkprogrammās, kas atbalsta CSS3 īpašumu pagriezt(Demo versija nedarbojas IE6).

Pārveidot: pagriezt- jauns CSS 3 rekvizīts, kas ļauj pagriezt dažādus elementus. Izmantojot transformācijas, varat arī mainīt elementu mērogu, ieviest horizontālus un vertikālus kropļojumus un pārvietot elementus pa tīmekļa lapu. To visu var animēt, izmantojot īpašumu pāreja(Ar dažādi veidi pārejas un ilgums).

Tās pašas darbības lapas elementu animēšanai var veikt, izmantojot kādu JavaScript bibliotēku (piemēram, jQuery). Protams, ar izmantojot jQuery jūs varat animēt izmaiņas daudz vairāk CSS īpašības nekā izmantojot pāreja. Bet jQuery ir iebūvēts CSS rīks, JavaScript bibliotēkas ir ārēji rīki, kas var nebūt pieejami. Jebkurā gadījumā CSS3 paver jaunus daudzsološus virzienus izstrādātāju attīstībai.

Vispirms mums jādara GUI pulksteņiem. Mums būs pamatne un trīs bultiņas. Visas kustīgās daļas programmā Photoshop tiek izgrieztas 600 pikseļu augstumā un 30 pikseļu platumā, un tās ir novietotas vertikāli, un pēc noklusējuma pagriezt pagriež elementu ap centru. Jūs varat izmantot īpašumu transformācijas izcelsme lai iestatītu rotācijas centru uz citu punktu.

Pulksteņa pamatnei varat izmantot jebkuru attēlu, kas jums patīk. Kustīgās daļas ir attēli PNG formātā ar caurspīdīgumu.

Arhivēts ar pirmkods iekļautas demonstrācijas PSD fails, kurā ir visi attēli.

Pulksteņa izkārtojums ir vienkāršs nesakārtots saraksts. Katrs saraksta elements satur kustīgu daļu, un tam ir atbilstošs ID:

#pulkstenis (pozīcija: relatīvā; platums: 600 pikseļi; augstums: 600 pikseļi; piemale: 20 pikseļi automātisks 0 automātisks; fons: url(clockface.jpg); saraksta stils: nav; ) #sec, #min, #hour (pozīcija: absolūtā platums: 30px; augšā: 285px;

CSS ir arī diezgan vienkārša. Tā kā kustīgajām daļām ir vienādi izmēri un sākumpunktus, tad varam tos deklarēt kopā, lai izvairītos no atkārtošanās. Elements ul saņem relatīvo pozicionēšanu, kas ļauj absolūtā pozicionēt tajā esošās bultiņas.

CSS3 tiks lietots, izmantojot mazs kods jQuery.

Jāatzīmē, ka jQuery lieliski darbojas ar jaunajiem CSS3 rekvizītiem. Turklāt, tā kā stili tiek pievienoti dinamiski, CSS fails tiek apstiprināts kā CSS2.1!

Laiku var iegūt arī izmantojot PHP kodu, bet tas būs servera laiks. Un JavaScript atgriež lietotāja vietējo laiku.

Informāciju saņemsim izmantojot Datums () un iestatiet visus mūsu mainīgos. Mēs attiecīgi izmantosim GetSeconds(), GetMinutes () vai GetHours() Priekš Datums () lai iestatītu attiecīgi sekundes, minūtes un stundas:

Var sekundes = jauns Datums().getSeconds();

Iepriekš minētajā rindā tiks iegūts skaitlis no 0 līdz 59 un piešķirts mainīgajam sekundes.

Tad jums jāaprēķina katras bultiņas griešanās leņķis. Sekunžu un minūšu rādītājiem, kuriem ir 60 pozīcijas uz stundu apļa, mums ir jāsadala 360 grādi ar 60, kas mums dod skaitli 6. Tas nozīmē, ka katra sekunde vai minūte atbilst 6 grādu rotācijai. Aprēķinu rezultātu mēs saglabāsim citā mainīgajā. Dažas sekundes kods izskatās šādi:

Var pakāpe = sekundes * 6;

Stundām aprēķini būs atšķirīgi. Tā kā mums ir ciparnīca ar 12 pozīcijām stundu rādītājam, katra stunda atbilst 30 grādu rotācijas leņķim (360/12=30). Bet stundu rādītājam ir jābūt arī starpstāvokļos, tas ir, tai jākustas katru minūti. Tas ir, pulksten 4:30 stundu rādītājam jābūt pusceļā starp pulksten 3 un 4. Lūk, kā mēs to darīsim:

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

Tas ir, mēs pievienojam griešanās leņķim ar stundu skaitu vērtību, dalītu minūšu skaitu ar 2 (kas dos mums vērtību diapazonā no 0,5 līdz 29,5). Tādējādi stundu rādītājs tiks “pagriezts” par leņķi no 0 līdz 30 grādiem (stundu solis).

Piemēram:

2 stundas 40 minūtes -> 2*30 = 60 grādi un 40/2 = 20 grādi. Kopā: 80 grādi.

Var pieņemt, ka pulkstenis rādīs kas zina ko pēc 12, jo rotācijas vērtība būs lielāka par 360 grādiem. Bet viss darbojas labi.

Tagad mēs esam gatavi ievietot CSS noteikumus.

Šādi izskatās CSS3 noteikums pagriezt stila lapā:

#sec ( -webkit-transform: rotate(45deg); -moz-transform: rotate(45de); )

Un šādi kods tiks ievietots, izmantojot jQuery:

$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));

Vienīgā problēma ir iestatīt iegūto leņķa vērtību sintakses mainīgajā "sdegree", nevis 45 grādus. Nepieciešams izveidot virkni citā mainīgajā pagriezt un pilnībā aizstāt otro argumentu. kā šis:

Var srotate = "rotate(" + sdegree + "deg)";

A jQuery kods izskatīsies šādi:

$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));

jQuery kods izskatīsies šādi:

$(document).ready(function() ( setInterval(function() ( var sekundes = new Date().getSeconds(); var sdegree = sekundes * 6; var srotate = "rotate(" + sdegree + "deg)") ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)), 1000 setInterval(function() ( var hours = new Date()); .getHours(); ("-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) );

Mēs izmantojam JavaScript funkcija setInterval lai atjauninātu stilus katru sekundi. Tajā ir jāatjaunina mainīgie, kas saņem laika vērtības. Pretējā gadījumā pulkstenis kļūs par nederīgu lapu.

Šī nodarbība parāda īpašuma praktisko pielietojumu pagriezt nav saistīts ar dizainu.

Izveidosim elektronisku pulksteni ar datumu un laiku, izmantojot jQuery un CSS3 nelielai animācijai.

Marķējums ir vienkāršs un elastīgs. Izveidojiet DIV ar klasi ar nosaukumu pulkstenis , DIV ar klasi Datums, kas parādīs datumu, un nesakārtotu sarakstu ar stundām, minūtēm un sekundēm.

Dizaina stili ar nelielu animāciju:

Konteiners (platums: 960 pikseļi; piemale: 0 automātiski; pārpilde: paslēpts;) .clock (platums: 800 pikseļi; mala: 0 automātiski; polsterējums: 30 pikseļi; apmale: 1px solid #333; krāsa: #fff; ) #Date ( font- ģimene: Arial, Helvetica, teksta izlīdzināšana: centrs: 0 5 pikseļi # 00c6 ul (platums: 800 pikseļi; mala: 0 pikseļi; saraksta stils: nav; teksta izlīdzināšana; :center; ul li ( displejs: iekļauts; fonta izmērs: 10 em; teksta līdzinājums: centrs; fontu saime: Arial, Helvetica, bez serifa; teksta ēna: 0 0 5px # 00c6ff; ) #point ( pozīcija: relatīvs - moz-animation:mymove 1s easy infinite; -shadow:0 0 20px #00c6ff;) 50% (necaurredzamība:0; text-shadow:none; ) 100% (necaurredzamība:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (necaurredzamība: 1,0; teksta ēna: 0 0 20 pikseļi # 00c6ff;) 50% (necaurredzamība: 0; teksta ēna: nav; ) 100% (necaurredzamība: 1,0; teksta ēna: 0 0 20px #00c6ff; ) )

JQuery bibliotēkas pievienošana

Un tad mūsu skripts $(document).ready(function() ( // Izveidojiet divus mainīgos ar mēnešu un nedēļas dienu nosaukumiem masīvā var monthNames = [ "Janvāris", "Februāris", "Marts", " aprīlis", "maijs ", "jūnijs", "jūlijs", "augusts", "septembris", "oktobris", "novembris", "decembris" ]; var dayNames= ["svētdiena", "pirmdiena", "otrdiena" ", "Trešdiena" "Ceturdiena","Piektdiena","Sestdiena"] // Izveidot objektu newDate() var newDate = new Date(); // Izgūt pašreizējo datumu no Date objekta newDate.setDate(newDate. getDate()); // Izvades diena, datums, mēnesis un gads $("#Datums").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) setInterval(function() ( / / Izveidojiet newDate() objektu un izgūstiet pašreizējā laika sekundes var seconds = new Date().getSeconds(); // Pievienojiet sākuma nulli sekunžu vērtībai $("#sec" ").html((sekundes< 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() - izveido jaunu Datuma objektu ar pašreizējā datuma un pašreizējā laika vērtību datora pārlūkprogrammā.
• setDate() - metode iestata mēneša dienu (no 1 līdz 31) pēc vietējā laika
• getDate() - metode atgriež mēneša dienu (no 1 līdz 31) norādītajam datumam pēc vietējā laika
• getSeconds(), getMinutes() un getHours() — šīs metodes ļauj pārlūkprogrammā izgūt pašreizējā laika sekundes, minūtes un stundas.
• (sekundes< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• Funkcija setInterval ir standarta JavaScript funkcija, kas nav daļa no jQuery. Izpilda kodu daudzas reizes, ar regulāriem intervāliem (milisekundēs).

Šis ir viņu galvenais skripts:

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

setInterval(funkcija () (
datums = jauns datums(),
h = datums.getHours(),
m = datums.getMinutes(),
s = datums.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);

Pašā augšā mēs redzam:

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

Vienkārši pievienojiet treknrakstu un dzeltenu nokrāsu un bultiņas.

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

Un notika šādi:

Tātad jūs pats varat redzēt, kā viss ir mainījies, un tagad jūs varat darīt visu pats un skaisti sakārtot to atbilstoši saviem stiliem. Ka citus nevar izdarīt, jo tur ir ieslēgts Flash, ka viņu šeit nav.

Tagad papildus ir arī Flash pulkstenis

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

Tātad jūs varat izvēlēties, kuri jums patīk vislabāk, un instalēt tos, jo dažus var uzstādīt blokā, bet jums patīk pirmie, jo tie ir elastīgi un pielāgojami, ko var izdarīt ikviens.

Šis ir vienkāršs skripts, kas parāda sistēmas laiks JavaScript vienkāršā tekstā. Stundas, minūtes un sekundes, kas atdalītas ar kolu – tas arī viss.

Lai iestatītu savu stilu pulkstenim, pietiek ar stilu definēt blokam ar ID - #time. CSS varat iestatīt savu fontu pulkstenim, tā krāsu un izmēru. Ja jums nav nepieciešams vienkāršs pulkstenis, bet sarežģītāks, skatiet vietnes Flash pulksteņus. No kurienes skripts iegūst laika datus? Parādītais laiks ir tieši tas, kas iestatīts ierīcē.

Ielīmējiet šo kodu vietā vietnē, kur vēlaties redzēt pulksteni. Vietnē uCoz tas varētu būt, piemēram, “Vietnes augšdaļa” vai “Vietnes apakšdaļa”:

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

setInterval(funkcija () (
datums = jauns datums(),
h = datums.getHours(),
m = datums.getMinutes(),
s = datums.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);

Skripts uzreiz parādīs teksta rindiņu ar pulksteni vietā, kur to instalējāt. Piemēram, "00:00:00". Starp citu, sekundes, minūtes un stundas vienmēr ir divciparu skaitlis, tāpēc vērtību maiņa notiek vienmērīgi.