Ինչպես ժամացույց ավելացնել html-ին: Ձեռքի ժամացույց՝ օգտագործելով CSS3

Մենք արդեն քննարկել ենք ժամացույցների ստեղծման մասին օգտագործելով CSSև JavaScript-ը: Այս ձեռնարկում մենք կստեղծենք նույն ժամացույցը՝ օգտագործելով CSS3, որպեսզի տեսնենք, թե ինչպես նոր ստանդարտփոխում է տարբեր էֆեկտների զարգացման մոտեցումը: Այս ձեռնարկի ցուցադրումը կաշխատի միայն այն բրաուզերներում, որոնք աջակցում են CSS3 հատկությունը պտտել(Դեմոն ՉԻ ԱՇԽԱՏՈՒՄ IE6-ում):

Փոխակերպում: պտտել- նոր CSS 3 հատկություն, որը թույլ է տալիս պտտել տարբեր տարրեր: Օգտագործելով փոխակերպումները, դուք կարող եք նաև փոխել տարրերի մասշտաբները, ներմուծել հորիզոնական և ուղղահայաց աղավաղումներ և տարրեր տեղափոխել վեբ էջի շուրջ: Այս ամենը կարելի է անիմացիոն դարձնել՝ օգտագործելով սեփականությունը անցում(Հետ տարբեր տեսակներանցումներ և տևողությունը):

Նույն գործողությունները էջի տարրերի անիմացիայի համար կարող են իրականացվել որոշ JavaScript գրադարանի միջոցով (օրինակ՝ jQuery): Իհարկե, հետ օգտագործելով jQueryդուք կարող եք աշխուժացնել փոփոխությունը շատ ավելին CSS հատկություններքան օգտագործելը անցում. Բայց jQuery-ն ներկառուցված CSS գործիք է, JavaScript գրադարանները արտաքին գործիքներ են, որոնք կարող են հասանելի չլինել: Ամեն դեպքում, CSS3-ը նոր խոստումնալից ուղղություններ է բացում ծրագրավորողների զարգացման համար։

Նախ մենք պետք է անենք GUIժամացույցների համար. Մենք կունենանք հիմք և երեք նետ: Բոլոր շարժական մասերը կտրված են Photoshop-ում 600px բարձրության և 30px լայնության չափերով և տեղադրված են ուղղահայաց, իսկ լռելյայն հատկությունը պտտելպտտում է տարրը կենտրոնի շուրջ: Դուք կարող եք օգտագործել գույքը փոխակերպում-ծագումպտտման կենտրոնը այլ կետի վրա դնելու համար:

Դուք կարող եք օգտագործել ցանկացած պատկեր, որը ցանկանում եք ժամացույցի հիմքի համար: Շարժվող մասերը պատկերներ են PNG ձևաչափթափանցիկությամբ։

Արխիվացված է աղբյուր կոդըներառված ցուցադրություններ PSD ֆայլ, որը պարունակում է բոլոր պատկերները։

Ժամացույցի դասավորությունը պարզ չդասավորված ցուցակ է: Ցուցակի յուրաքանչյուր տարր պարունակում է շարժական մաս և ունի համապատասխան ID.

#clock ( դիրքը՝ հարաբերական; լայնությունը՝ 600px; բարձրությունը՝ 600px; լուսանցք՝ 20px ավտոմատ 0 ավտոմատ; ֆոն՝ url(clockface.jpg); ցուցակի ոճը՝ ոչ մեկը; ) #sec, #min, #hour (դիրքը՝ բացարձակ Լայնությունը՝ 30px; վերև՝ 0px;

CSS-ը նույնպես բավականին պարզ է. Քանի որ շարժվող մասերը ունեն նույն չափերըև ելակետերը, ապա մենք կարող ենք դրանք միասին հայտարարել՝ կրկնությունից խուսափելու համար: Տարր ulստանում է հարաբերական դիրքավորում, որը թույլ է տալիս բացարձակ դիրքավորում իր ներսում գտնվող սլաքների համար:

CSS3-ը կկիրառվի՝ օգտագործելով փոքր ծածկագիր jQuery.

Պետք է նշել, որ jQuery-ն հիանալի աշխատում է նոր CSS3 հատկությունների հետ։ Բացի այդ, քանի որ ոճերը ավելացվում են դինամիկ, CSS ֆայլը վավերացվում է որպես CSS2.1:

Ժամանակը կարելի է ձեռք բերել նաև PHP կոդով, բայց սա կլինի սերվերի ժամանակը: Իսկ JavaScript-ը վերադարձնում է օգտատիրոջ տեղական ժամանակը:

Մենք տեղեկատվություն կստանանք օգտագործելով Ամսաթիվ ()և սահմանել մեր բոլոր փոփոխականները: Համապատասխանաբար կօգտագործենք GetSeconds (), GetMinutes ()կամ GetHours ()Համար Ամսաթիվ ()համապատասխանաբար վայրկյաններ, րոպեներ և ժամեր սահմանելու համար.

Var seconds = new Date().getSeconds();

Վերոնշյալ տողում 0-ից 59 միջակայքից կստացվի թիվ և կվերագրվի փոփոխականին վայրկյան.

Այնուհետև դուք պետք է հաշվարկեք յուրաքանչյուր սլաքի պտտման անկյունը: Երկրորդ և րոպեի սլաքների համար, որոնք ունեն 60 դիրք ժամային շրջանագծի վրա, մենք պետք է 360 աստիճանը բաժանենք 60-ի, ինչը մեզ տալիս է 6 թիվը։ Այսինքն՝ յուրաքանչյուր վայրկյան կամ րոպե համապատասխանում է 6 աստիճանի պտույտի։ Հաշվարկների արդյունքը մենք կպահենք մեկ այլ փոփոխականում։ Վայրկյանների ընթացքում կոդը այսպիսի տեսք ունի.

Var աստիճան = վայրկյան * 6;

Ժամերով հաշվարկները տարբեր են լինելու։ Քանի որ մենք ժամացույցի համար ունենք 12 դիրք ունեցող թվատախտակ, յուրաքանչյուր ժամին համապատասխանում է 30 աստիճան պտտման անկյուն (360/12=30): Բայց ժամասլաքը նույնպես պետք է լինի միջանկյալ վիճակներում, այսինքն՝ պետք է շարժվի ամեն րոպե։ Այսինքն, ժամը 4:30-ին ժամացույցը պետք է լինի կեսը ժամը 3-ից 4-ը: Ահա թե ինչպես մենք դա կանենք.

Var hdegree = ժամ * 30 + (րոպե / 2);

Այսինքն՝ պտտման անկյունին ժամերի քանակով ավելացնում ենք րոպեների թիվը 2-ի բաժանելու արժեքը (որը մեզ արժեք կտա 0,5-ից 29,5 միջակայքում)։ Այսպիսով, ժամացույցը «կպտտվի» 0-ից մինչև 30 աստիճան անկյան տակ (ժամային աճ):

Օրինակ՝

2 ժամ 40 րոպե -> 2*30 = 60 աստիճան և 40/2 = 20 աստիճան: Ընդհանուր՝ 80 աստիճան:

Կարելի է ենթադրել, որ ժամացույցը ցույց կտա, թե ով ինչ գիտի 12-ից հետո, քանի որ ռոտացիայի արժեքը կլինի 360 աստիճանից ավելի։ Բայց ամեն ինչ հիանալի է ստացվում:

Այժմ մենք պատրաստ ենք տեղադրել CSS կանոնները:

Ահա թե ինչ տեսք ունի CSS3 կանոնը պտտելոճի թերթիկում.

#վրկ (-webkit-transform. rotate(45deg); -moz-transform. rotate(45deg);)

Եվ այսպես, կոդը կտեղադրվի jQuery-ի միջոցով.

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

Միակ խնդիրն այն է, որ ստացված անկյան արժեքը շարահյուսության մեջ «sdegree» փոփոխականում 45 աստիճանի փոխարեն սահմանելն է։ Պետք է տող կառուցել մեկ այլ փոփոխականում պտտվելև ամբողջությամբ փոխարինել երկրորդ փաստարկը: Այսպես.

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

Ա jQuery կոդըկունենա հետևյալ տեսքը.

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

jQuery կոդը կունենա հետևյալ տեսքը.

$(document).ready(function() ( setInterval(function() ( var seconds = new Date().getSeconds(); var sdegree = վայրկյան * 6; var srotate = "rotate(" + sdegree + "deg)" ; .getHours(var mins = new Date().getMinutes(var hdegree) = 30 + (mins / 2) "rotate(" + hdegree + "deg)"); ("-moz-transform": hrotate, "-webkit-transform": hrotate) ), 1000 setInterval(function() (var mins = new Date().getMinutes(); var mdegree = mins * 6); var mrotate = "rotate(" + mdegree + "deg)" ("#min").

Մենք օգտագործում ենք JavaScript ֆունկցիան setIntervalոճերը ամեն վայրկյան թարմացնելու համար: Ժամանակի արժեքներ ստացող փոփոխականները պետք է թարմացվեն դրանում: Հակառակ դեպքում, ժամացույցը կդառնա էջի անպետք աղբ:

Այս դասը ցույց է տալիս գույքի գործնական կիրառումը պտտելդիզայնի հետ կապ չունի.

Եկեք ստեղծենք էլեկտրոնային ժամացույց ամսաթվով և ժամով՝ օգտագործելով jQuery և CSS3 փոքրիկ անիմացիայի համար:

Նշումը պարզ է և ճկուն: Ստեղծեք DIV՝ ժամացույց կոչվող դասով, DIV՝ Ամսաթիվ կոչվող դասով, որը կցուցադրի ամսաթիվը և ժամերը, րոպեները և վայրկյանները պարունակող չդասավորված ցուցակ:

Դիզայնի ոճերը փոքր անիմացիայով.

Կոնտեյներ (լայնություն՝ 960px; լուսանցք՝ 0 ավտոմատ, հորդառատ՝ թաքնված;) .ժամացույց (լայնություն՝ 800px; լուսանցք՝ 0 ավտոմատ; լիցք՝ 30px; եզրագիծ՝ 1px կոշտ #333; գույն՝ #fff; ) #Ամսաթիվ ( տառատեսակ- ընտանիք՝ Arial, Helvetica, sans-serif; Կենտրոն; -moz-animation:mymove 1s ease infinite; -shadow:0 0 20px #00c6ff;) 50% (անթափանցություն:0; text-shadow:none; ) 100% (անթափանցություն:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (անթափանցություն՝ 1.0; տեքստ-ստվեր:0 0 20px #00c6ff;) 50% (անթափանցություն՝0; տեքստ-ստվեր՝ ոչ մեկը; ) 100% (անթափանցություն՝1.0; տեքստ-ստվեր:0 0 20px #00c6ff; ) )

jQuery գրադարանի միացում

Եվ հետո մեր $(document).ready(function() script-ը ( // Ստեղծեք երկու փոփոխական՝ շաբաթվա ամիսների և օրերի անուններով զանգվածում var monthNames = [ "January", "February", "March", " ապրիլ», «մայիս», «հունիս», «հուլիս», «օգոստոս», «սեպտեմբեր», «հոկտեմբեր», «նոյեմբեր», «դեկտեմբեր» ]; var dayNames= [«կիրակի», «երկուշաբթի», «երեքշաբթի». ", "Չորեքշաբթի", "Հինգշաբթի", "Ուրբաթ","Շաբաթ"] // Ստեղծել օբյեկտ newDate() var newDate = new Date(); // Առբերել ընթացիկ ամսաթիվը Date օբյեկտից newDate.setDate(newDate. getDate() օր, ամսաթիվ, ամիս և տարի $("#Date"). function() ( / / Ստեղծեք newDate() օբյեկտ և առբերեք ընթացիկ ժամանակի վայրկյանները var seconds = new Date().getSeconds(); // Ավելացնել առաջատար զրո վայրկյանների արժեքին $("#sec"): html ((վայրկյան< 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() - ստեղծում է նոր Date օբյեկտ՝ ընթացիկ ամսաթվի և ընթացիկ ժամի արժեքով համակարգչային բրաուզերում:
• setDate() - մեթոդը սահմանում է ամսվա օրը (1-ից մինչև 31-ը), ըստ տեղական ժամանակի
• getDate() - մեթոդը վերադարձնում է ամսվա օրը (1-ից 31-ը) նշված ամսաթվի համար՝ ըստ տեղական ժամանակի
• getSeconds(), getMinutes() և getHours() - Այս մեթոդները թույլ են տալիս ստանալ բրաուզերում ընթացիկ ժամանակի վայրկյանները, րոպեները և ժամերը:
• (վայրկյան< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• SetInterval ֆունկցիան ստանդարտ JavaScript ֆունկցիա է, այլ ոչ jQuery-ի մաս: Կազմում է կոդը բազմիցս՝ կանոնավոր ընդմիջումներով (միլիվայրկյաններով):

Սա նրանց հիմնական սցենարն է.

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

setInterval(function () (
ամսաթիվ = նոր Ամսաթիվ (),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (մ< 10) ? "0" + m: m,
s = (ս< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

Վերևում մենք տեսնում ենք.

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

Պարզապես ավելացրեք թավ տեքստ և դեղին երանգ և սլաքներ:

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

Եվ ահա թե ինչ եղավ.

Այսպիսով, դուք կարող եք ինքներդ տեսնել, թե ինչպես է ամեն ինչ փոխվել, և այժմ կարող եք ամեն ինչ անել ինքներդ և գեղեցիկ դասավորել այն ձեր ոճին համապատասխան: Որ մյուսները հնարավոր չէ անել, քանի որ Flash-ը այնտեղ է, որ նրանք այստեղ չեն:

Այժմ բացի Flash-ում կա ժամացույց

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

Այսպիսով, դուք կարող եք ընտրել, թե որոնք եք ամենաշատը հավանում և տեղադրել դրանք, քանի որ որոշները կարող են տեղադրվել բլոկում, բայց ձեզ ավելի լավ են դուր գալիս առաջինները, քանի որ դրանք ճկուն են և հարմարեցված, ինչը յուրաքանչյուրը կարող է անել:

Սա պարզ սցենար է, որը ցույց է տալիս համակարգի ժամանակը JavaScript-ում պարզ տեքստով. Ժամեր, րոպեներ և վայրկյաններ, որոնք բաժանված են երկու կետով, այսքանը:

Ժամացույցի համար ձեր սեփական ոճը սահմանելու համար բավական է բլոկի ոճը սահմանել ID-ով` #time: CSS-ում դուք կարող եք սահմանել ձեր սեփական տառատեսակը ժամացույցի համար, դրա գույնը և չափը: Եթե ​​Ձեզ անհրաժեշտ է ոչ թե պարզ, այլ ավելի բարդ ժամացույց, ապա նայեք կայքի Flash ժամացույցներին: Որտեղի՞ց է սցենարը ստանում ժամանակի տվյալները: Ցուցադրված ժամանակը հենց այն է, ինչ սահմանված է սարքի վրա:

Տեղադրեք հետևյալ կոդը, որտեղ ցանկանում եք տեսնել ժամացույցը ձեր կայքում: uCoz-ում սա կարող է լինել, օրինակ, «Վերևում» կամ «Կայքի ներքևում»:

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

setInterval(function () (
ամսաթիվ = նոր Ամսաթիվ (),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (մ< 10) ? "0" + m: m,
s = (ս< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

Սցենարն անմիջապես կցուցադրի տեքստի տող՝ ժամացույցով այն տեղում, որտեղ այն տեղադրել եք: Օրինակ՝ «00:00:00»: Վայրկյանները, րոպեները և ժամերը, ի դեպ, միշտ երկնիշ են, ուստի արժեքների փոփոխությունը տեղի է ունենում սահուն: