Biz allaqachon analog soatni yaratishni tahlil qildik CSS yordamida va JavaScript. Ushbu o'quv qo'llanmada biz CSS3 yordamida bir xil soat yasaymiz yangi standart turli effektlarni ishlab chiqishga yondashuvni o'zgartiradi. Ushbu qo'llanmaning demo versiyasi faqat CSS3 xususiyatini qo'llab-quvvatlaydigan brauzerlarda ishlaydi aylantiring(IE6 da demo ISHLAMAYDI).
CSS3 Transform: aylantirish
O'zgartirish: aylantirish- turli elementlarni aylantirish imkonini beruvchi yangi CSS 3 xususiyati. Transformatsiyalar yordamida siz elementlarning masshtabini o'zgartirishingiz, gorizontal va vertikal ravishda buzilishlarni kiritishingiz va elementlarni veb-sahifa atrofida ko'chirishingiz mumkin. Bularning barchasi mulk yordamida jonlantirilishi mumkin o'tish(bilan turli xil turlari o'tish va davomiyligi).
Sahifa elementlarini jonlantirish uchun xuddi shunday qadamlar ba'zi JavaScript kutubxonalari (masalan, jQuery) yordamida amalga oshirilishi mumkin. Albatta, jQuery yordamida o'zgarishlarni juda ko'p jonlantirish mumkin Ko'proq Foydalanishdan ko'ra CSS xususiyatlari o'tish... Ammo jQuery o'rnatilgan CSS vositasidir, JavaScript kutubxonalari mavjud bo'lmasligi mumkin bo'lgan tashqi vositalardir. Qanday bo'lmasin, CSS3 dasturchilarni rivojlantirish uchun yangi istiqbolli yo'nalishlarni ochadi.
Grafika
Birinchidan, siz soat uchun grafik interfeys yaratishingiz kerak. Bizda taglik va uchta o'q bo'ladi. Barcha harakatlanuvchi qismlar Photoshop-da 600px balandlikda va 30px kengligida kesilgan va vertikal ravishda joylashtirilgan va sukut bo'yicha xususiyat aylantiring elementni markaz atrofida aylantiradi. Siz mulkdan foydalanishingiz mumkin transformatsiyaning kelib chiqishi aylanish markazini boshqa nuqtaga o'rnatish uchun.
Soatning asosi uchun har qanday tasvirdan foydalanish mumkin. Harakatlanuvchi qismlar tasvirdir PNG formati shaffoflik bilan.
bilan arxivlangan manba kodi namoyishi kiritilgan PSD fayl unda barcha tasvirlar mavjud.
HTML belgilash
Soat belgilari - oddiy tartibsiz ro'yxat... Ro'yxatning har bir elementi harakatlanuvchi qismni o'z ichiga oladi va tegishli identifikatorga ega:
CSS
#soat (lavozim: nisbiy; kenglik: 600px; balandlik: 600px; hoshiya: 20px avtomatik 0 avtomatik; fon: url (clockface.jpg); roʻyxat uslubi: yoʻq;) #sek, #min, #hour (pozitsiya: mutlaq) ; kengligi: 30px; balandlik: 600px; tepa: 0px; chap: 285px;) #sek (fon: url (sechand.png); z-indeks: 3;) #min (fon: url (minhand.png); z -indeks: 2;) #hour (fon: url (hourhand.png); z-index: 1;)
CSS ham juda oddiy. Harakatlanuvchi qismlarning o'lchami va kelib chiqishi bir xil bo'lganligi sababli, biz ularni takrorlashni oldini olish uchun birgalikda e'lon qilishimiz mumkin. Element ul nisbiy joylashuvni oladi, bu uning ichidagi o'qlarni mutlaq joylashtirish imkonini beradi.
CSS3 kichik jQuery kodi bilan qo'llaniladi.
JavaScript
- Biz soat uchun vaqt topamiz
- Hisoblang va kiriting CSS uslublari(aylanish burchagi) har bir element uchun.
- CSS uslublarini muntazam ravishda yangilang.
Shuni ta'kidlash kerakki, jQuery yangi CSS3 xususiyatlari bilan ajoyib ishlaydi. Bundan tashqari, uslublar dinamik ravishda qo'shilganligi sababli, CSS fayli CSS2.1 sifatida tasdiqlangan!
Vaqt olamiz
Vaqtni PHP kodi yordamida ham olish mumkin, ammo bu server vaqti bo'ladi. Va JavaScript qaytadi mahalliy vaqt foydalanuvchi.
yordamida ma'lumot olamiz Sana () va barcha o'zgaruvchilarimizni o'rnating. Shunga muvofiq foydalanamiz GetSeconds (), GetMinutes () yoki GetHours () uchun Sana () mos ravishda soniya, daqiqa va soatni belgilash uchun:
Var soniya = yangi sana ().GetSeconds ();
Yuqoridagi satrda 0 dan 59 gacha bo'lgan raqam olinadi va o'zgaruvchiga tayinlanadi soniya.
Burchakni aniqlang
Keyin har bir o'q uchun burilish burchagini hisoblashingiz kerak. Soat aylanasida 60 ta pozitsiyaga ega bo'lgan ikkinchi va daqiqali qo'llar uchun biz 360 gradusni 60 ga bo'lishimiz kerak, bu bizga 6 raqamini beradi. Ya'ni, har bir soniya yoki daqiqa 6 graduslik aylanishga to'g'ri keladi. Hisoblash natijasini boshqa o'zgaruvchida saqlaymiz. Bir necha soniya davomida kod quyidagicha ko'rinadi:
Variantlar darajasi = soniya * 6;
Soat uchun hisob-kitoblar boshqacha bo'ladi. Bizda soat qo'li uchun 12 ta pozitsiyaga ega bo'lgan terish borligi sababli, har bir soat 30 graduslik burilish burchagiga to'g'ri keladi (360/12 = 30). Ammo soat strelkasi oraliq holatda bo'lishi kerak, ya'ni har daqiqada harakatlanishi kerak. Ya'ni, soat 4:30 da soat strelkasi 3 dan 4 gacha bo'lgan yarmi bo'lishi kerak. Buni qanday qilamiz:
Var hdegree = soat * 30 + (daqiqa / 2);
Ya'ni, biz aylanish burchagiga soatlar soniga, shuningdek, daqiqalar sonini 2 ga bo'lish qiymatini qo'shamiz (bu bizga 0,5 dan 29,5 gacha bo'lgan qiymatni beradi). Shunday qilib, soat qo'li 0 dan 30 gradusgacha (soatlik o'sish) burchak bilan "aylanadi".
Masalan:
2 soat 40 daqiqa -> 2 * 30 = 60 daraja va 40/2 = 20 daraja. Jami: 80 daraja.
Taxmin qilish mumkinki, soat soat 12 dan keyin ko'rsatadi, chunki aylanish qiymati 360 darajadan oshadi. Lekin hamma narsa yaxshi ishlaydi.
Endi biz CSS qoidalarini kiritishga tayyormiz.
Uslubni sozlash
CSS3 qoidasi shunday ko'rinadi aylantiring uslublar jadvalida:
#sek (-webkit-transform: aylantirish (45deg); -moz-transform: aylantirish (45deg);)
Va jQuery yordamida kod shu tarzda kiritiladi:
$ ("# sek").css (("- moz-transform": "aylantirish (45deg)", "-webkit-transform": "aylantirish (45deg)");
Bitta muammo - "sdegree" o'zgaruvchisida olingan burchak qiymatini 45 daraja o'rniga sintaksisga o'rnatish. Boshqa o'zgaruvchida satr yaratish kerak aylantirmoq va ikkinchi argumentni butunlay almashtiring. Mana bunday:
Var srotate = "aylantirish (" + sdegree + "deg)";
Va jQuery kodi quyidagicha ko'rinadi:
$ ("# sek").css (("- moz-transform": srotate, "-webkit-transform": srotate));
Hammasini bir joyga qo'yish
jQuery kodi quyidagicha ko'rinadi:
$ (hujjat) .ready (funksiya () (setInterval (funktsiya () (var soniya = yangi Sana (). getSeconds (); var sdegree = soniya * 6; var srotate = "aylantirish (" + sdegree + "deg)" ; $ ("# sek"). css (("- moz-transform": srotate, "-webkit-transform": srotate));), 1000); setInterval (funktsiya () (var soat = yangi Sana () .getHours (); var mins = yangi sana (). getMinutes (); var hdegree = soat * 30 + (daq / 2); var hrotate = "aylantirish (" + hdegree + "deg)"; $ ("# soat ") .css ((" - moz-transform ": hrotate," -webkit-transform ": hrotate));), 1000); setInterval (funksiya () (var mins = yangi sana (). getMinutes (); var mdegree = mins * 6; var mrotate = "aylantirish (" + mdegree + "deg)"; $ ("# min"). css (("- moz-transform": mrotate, "-webkit-transform": mrotate) );), 1000);));
Biz JavaScript funksiyasidan foydalanamiz setInterval har soniyada uslublarni yangilash. Vaqt qiymatlarini oladigan o'zgaruvchilar unda yangilanishi kerak. Aks holda, soat sahifada keraksiz axlatga aylanadi.
Xulosa
Ushbu dars mulkning amaliy qo'llanilishini ko'rsatadi aylantiring dizayn bilan bog'liq emas.
Bu tizim vaqtini ko'rsatadigan oddiy skript JavaScript oddiy matn. Ikki nuqta bilan ajratilgan soatlar, daqiqalar va soniyalar - hammasi shu.
Soat uchun o'z uslubingizni o'rnatish uchun ID - #time bilan blok uchun uslubni belgilash kifoya. CSS-da siz soat, uning rangi va o'lchami uchun o'zingizning shriftingizni o'rnatishingiz mumkin. Agar sizga oddiy emas, balki murakkabroq soatlar kerak bo'lsa, sayt uchun Flash soatini tekshiring. Skript vaqt ma'lumotlarini qayerdan oladi? Ko'rsatilgan vaqt aynan qurilmada o'rnatilgan vaqt.
O'rnatish
Saytdagi soatni ko'rmoqchi bo'lgan joyga quyidagi kodni qo'ying. uCoz-da bu, masalan, "Yuqori" yoki "Saytning pastki qismi" bo'lishi mumkin:
200? "200px": "" + (this.scrollHeight + 5) + "px"); ">
00:00:00
Skript darhol uni o'rnatgan joyda soat bilan matn qatorini ko'rsatadi. Masalan, "00:00:00"... Aytgancha, soniyalar, daqiqalar va soatlar har doim ikki xonali, shuning uchun qiymatlarning o'zgarishi silliqdir.
Keling, sana va vaqtdan foydalangan holda elektron soat yasaymiz jQuery va CSS3 kichik animatsiya uchun.
Html
Belgilash oddiy va moslashuvchan. Biz yaratamiz DIV sinf bilan soat, DIV sinf bilan Sana Bu sana va tartibsiz ro'yxatni ko'rsatadi, unda soatlar, daqiqalar va soniyalar mavjud.
CSS
Bir oz animatsiyaga ega uslublar:
Konteyner (kengligi: 960px; hoshiya: 0 avtomatik; toʻldirish: yashirin;) .soat (kengligi: 800px; hoshiya: 0 avtomatik; toʻldirish: 30px; hoshiya: 1px qattiq # 333; rang: #fff;) #Sana (shrift- oila: Arial, Helvetica, sans-serif; shrift oʻlchami: 36px; matnni tekislash: markaz; matn soyasi: 0 0 5px # 00c6ff;) ul (kengligi: 800px; chekka: 0 avtomatik; toʻldirish: 0px; roʻyxat- uslub: yo‘q; matnni tekislash: markaz;) ul li (displey: inline; shrift o‘lchami: 10em; matnni tekislash: markaz; shrift oilasi: Arial, Helvetica, sans-serif; matn soyasi: 0 0 5px # 00c6ff;) #nuqta (pozitsiya: nisbiy; -moz-animatsiya: mymove 1s osonlik cheksiz; -webkit-animatsiya: mymove 1s osonlik cheksiz; padding-left: 10px; padding-o'ng: 10px;) @ -webkit-keyframes mymove ( 0% (shaffoflik: 1.0; matn soyasi: 0 0 20px # 00c6ff;) 50% (shaffoflik: 0; matn soyasi: yoʻq;) 100% (shaffoflik: 1.0; matn soyasi: 0 0 20px # 00c6ff;) ) @ -moz-keyframes mymove (0% (shaffoflik: 1.0; matn soyasi: 0 0 20px # 00c6ff;) 50% (shaffoflik: 0; matn soyasi: yoʻq;) 100% (shaffoflik: 1.0; matn soyasi : 0 0 20px # 00c6ff;))
Js
Ulanamiz jQuery kutubxona
Va keyin bizning skriptimiz
- yangi sana ()- yangi ob'ektni yaratadi Sana kompyuter brauzerida joriy sana va joriy vaqtning qiymati bilan.
- belgilangan sana ()- usul mahalliy vaqtga ko'ra oyning kunini (1 dan 31 gacha) belgilaydi
- getDate ()- usul mahalliy vaqt bo'yicha belgilangan sana uchun oyning kunini (1 dan 31 gacha) qaytaradi
- getSeconds (), getMinutes () va getHours ()- bu usullar joriy vaqtning soniyalari, daqiqalari va soatlarini brauzerga olish imkonini beradi.
- (soniyalar< 10 ? "0" : "") + seconds) - soniyalar (daqiqalar va soatlar) qiymatiga bosh nol qo'shadi. Belgilar ? va : uchlik ( uchlik) operatori. Bu maxsus operator bo'lib, agar oldingi shart bo'lsa, ikki nuqtadan oldingi qiymatni qaytaradi savol (? ) to'g'ri ( rost) yoki undan keyingi qiymat yo'g'on ichak agar shart noto'g'ri bo'lsa ( yolg'on).
- Funktsiya setInterval standart hisoblanadi javascript qism emas, balki funksiya jQuery... Kodni ko'p marta, muntazam oraliqlarda (millisekundlarda) bajaradi.
Bu ularning asosiy skripti:
200? "200px": "" + (this.scrollHeight + 5) + "px"); "> 00:00:00
Eng yuqori qismida biz ko'ramiz:
200? "200px": "" + (this.scrollHeight + 5) + "px"); "> 00:00:00
Faqat qalin matn va sariq rang va o'qlarni qo'shing.
200? "200px": "" + (this.scrollHeight + 5) + "px"); "> « 00:00:00»
Va bu erda nima sodir bo'ldi:
Shunday qilib, siz hamma narsa qanday o'zgarganini o'zingiz ko'rasiz va endi siz hamma narsani o'zingiz qilishingiz va uni uslublaringizga mos ravishda chiroyli tarzda sozlashingiz mumkin. Boshqalarni qilish mumkin emas, chunki Flash bor, ular bu erda yo'q.
Endi Flash-dagi soatga qo'shimcha ravishda
200? "200px": "" + (this.scrollHeight + 5) + "px"); ">
Shunday qilib, siz qaysi birini eng yaxshi ko'rishingizni tanlashingiz va qo'yishingiz mumkin, chunki ba'zilari blokga o'rnatilishi mumkin, lekin birinchisi sizga ko'proq yoqadi, chunki ular moslashuvchan va sozlanishi, hamma buni qila oladi.