Html-ga soatni qanday qo'shish mumkin. CSS3 yordamida qo'l soati

Biz allaqachon terish soatlarini yaratishni muhokama qildik CSS yordamida va JavaScript. Ushbu qo'llanmada biz qanday qilib CSS3 yordamida bir xil soat yasaymiz yangi standart turli effektlarni ishlab chiqishga yondashuvni o'zgartiradi. Ushbu qo'llanmaning demosi faqat CSS3 xususiyatini qo'llab-quvvatlaydigan brauzerlarda ishlaydi aylantiring(IE6 da demo ISHLAMAYDI).

O'zgartirish: aylantirish- turli elementlarni aylantirish imkonini beruvchi yangi CSS 3 xususiyati. Transformatsiyalardan foydalanib, siz elementlarning masshtabini o'zgartirishingiz, gorizontal va vertikal buzilishlarni kiritishingiz va elementlarni veb-sahifa atrofida ko'chirishingiz mumkin. Bularning barchasi mulk yordamida jonlantirilishi mumkin o'tish(bilan har xil turlari o'tish va davomiyligi).

Sahifa elementlarini jonlantirish bo'yicha xuddi shunday harakatlar ba'zi JavaScript kutubxonalari (masalan, jQuery) yordamida amalga oshirilishi mumkin. Albatta, bilan jQuery yordamida siz ko'proq o'zgarishlarni jonlantirishingiz mumkin CSS xususiyatlari foydalanishdan ko'ra 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.

Avval biz qilishimiz kerak GUI soatlar uchun. Bizda taglik va uchta o'q bo'ladi. Barcha harakatlanuvchi qismlar Photoshop-da 600px balandlik va 30px kengligidagi o'lchamlarga kesiladi va vertikal ravishda joylashtiriladi va sukut bo'yicha xususiyat aylantiring elementni markaz atrofida aylantiradi. Siz mulkdan foydalanishingiz mumkin transformatsiyaning kelib chiqishi aylanish markazini boshqa nuqtaga o'rnatish uchun.

Soat asosi uchun o'zingizga yoqqan har qanday tasvirdan foydalanishingiz mumkin. Harakatlanuvchi qismlar tasvirdir PNG formati shaffoflik bilan.

bilan arxivlangan manba kodi demolar kiritilgan PSD fayl, unda barcha tasvirlar mavjud.

Soatning tartibi oddiy tartibsiz ro'yxatdir. Har bir ro'yxat elementi harakatlanuvchi qismni o'z ichiga oladi va tegishli identifikatorga ega:

#soat (pozitsiya: nisbiy; kenglik: 600px; balandlik: 600px; hoshiya: 20px avtomatik 0 avtomatik; fon: url(clockface.jpg); roʻyxat uslubi: yoʻq; ) #sek, #min, #soat (pozitsiya: mutlaq ; width: 600px; top: 0px: 285px;

CSS ham juda oddiy. Harakatlanuvchi qismlarga ega bo'lgani uchun bir xil o'lchamlar va boshlang'ich nuqtalari, keyin biz ularni takrorlashni oldini olish uchun birgalikda e'lon qilishimiz mumkin. Element ul nisbiy joylashuvni oladi, bu uning ichida joylashgan strelkalar uchun mutlaq joylashishni ta'minlaydi.

CSS3 yordamida qo'llaniladi kichik kod jQuery.

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!

Vaqtni PHP kodi yordamida ham olish mumkin, ammo bu server vaqti bo'ladi. JavaScript esa foydalanuvchining mahalliy vaqtini qaytaradi.

yordamida ma'lumot olamiz Sana() va barcha o'zgaruvchilarimizni o'rnating. Biz 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.

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. Biz hisob-kitoblar natijasini boshqa o'zgaruvchida saqlaymiz. Bir necha soniya davomida kod quyidagicha ko'rinadi:

Var darajasi = soniya * 6;

Bir necha soat davomida hisob-kitoblar boshqacha bo'ladi. Bizda soat qo'li uchun 12 ta pozitsiyaga ega bo'lgan terish mavjud bo'lganligi sababli, har bir soat 30 graduslik aylanish burchagiga to'g'ri keladi (360/12 = 30). Lekin soat strelkasi ham 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 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 darajagacha (soat o'sishi) burchak bilan "aylanadi".

Masalan:

2 soat 40 daqiqa -> 2*30 = 60 daraja va 40/2 = 20 daraja. Hammasi: 80 daraja.

Taxmin qilishimiz mumkinki, soat 12 dan keyin kim nimani bilishini ko'rsatadi, chunki aylanish qiymati 360 darajadan oshadi. Lekin hamma narsa yaxshi ishlaydi.

Endi biz CSS qoidalarini kiritishga tayyormiz.

CSS3 qoidasi shunday ko'rinadi aylantiring uslublar jadvalida:

#sek ( -webkit-transform: aylantirish (45deg); -moz-transform: aylantirish (45deg); )

Va jQuery yordamida kod shu tarzda kiritiladi:

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

Yagona muammo - 45 daraja o'rniga sintaksisdagi "sdegree" o'zgaruvchisida olingan burchak qiymatini o'rnatish. Boshqa o'zgaruvchida qatorni qurish kerak aylantirmoq va ikkinchi argumentni to'liq almashtiring. Shunga o'xshash:

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

A jQuery kodi quyidagicha ko'rinadi:

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

jQuery kodi quyidagicha ko'rinadi:

$(hujjat).ready(function() ( setInterval(funksiya() ( var soniya = yangi Sana().getSeconds(); var sdegree = soniya * 6; var srotate = "aylantirish(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)), setInterval(function() (var soat = new Date()); .getHours() var mins = new Date().getMinutes(); ("-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) );

Biz foydalanamiz JavaScript funktsiyasi setInterval har soniyada uslublarni yangilash. Vaqt qiymatlarini oladigan o'zgaruvchilar unda yangilanishi kerak. Aks holda, soat sahifadagi keraksiz axlatga aylanadi.

Ushbu dars mulkning amaliy qo'llanilishini ko'rsatadi aylantiring dizayn bilan bog'liq emas.

Kichik animatsiya uchun jQuery va CSS3 dan foydalanib sana va vaqt bilan elektron soat yasaymiz.

Belgilash oddiy va moslashuvchan. clock deb nomlangan sinf bilan DIV, sanani ko'rsatadigan Date nomli sinf va soatlar, daqiqalar va soniyalarni o'z ichiga olgan tartibsiz ro'yxat bilan DIV yarating.

Kichik animatsiya bilan dizayn uslublari:

Konteyner (kengligi: 960px; hoshiya: 0 avtomatik; toʻldirish: yashirin;) .soat (kengligi: 800px; hoshiya: 0 avtomatik; toʻldirish: 30px; chegara: 1px qattiq #333; rang:#fff; ) #Sana ( shrift- oila: Arial, Helvetica, sans-serif matn-shadow: 0 0 5px #00c6ff ul (kenglik: 800px; chekka: 0 auto; padding: 0px; list-style: hech; text-align; :center; ul li (displey:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point (pozitsiya: nisbatan; -moz-animation:mymove 1s ease infinite; -shadow:0 0 20px #00c6ff;) 50% (shaffoflik:0; text-shadow:yo'q; ) 100% (shadow:1.0; text-shadow: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; ) )

jQuery kutubxonasini ulash

Va keyin bizning skriptimiz $(document).ready(function() ( // var monthNames = [ "Yanvar", "Fevral", "Mart", " massivida haftaning oylari va kunlarining nomlari bilan ikkita o'zgaruvchi yarating. Aprel", "May", "iyun", "iyul", "avgust", "sentyabr", "oktyabr", "noyabr", "dekabr" ]; var dayNames= ["Yakshanba", "Dushanba", "Seshanba" ", "Chorshanba" ,"Payshanba","Juma","Shanba"] // obyekt yaratish newDate() var newDate = new Date(); // Sana obyektidan joriy sanani oling newDate.setDate(newDate. getDate()); // Chiqish kuni, sana, oy va yil $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) setInterval(function() ( / / newDate() obyektini yarating va joriy vaqtning soniyalarini oling var seconds = new Date().getSeconds(); // $("#sec" soniya qiymatiga bosh nol qo'shing; ").html((sekund< 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() - kompyuter brauzerida joriy sana va vaqt qiymati bilan yangi Sana ob'ektini yaratadi.
• setDate() - usul mahalliy vaqtga ko'ra oy 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 brauzerda joriy vaqtning soniyalari, daqiqalari va soatlarini olish imkonini beradi.
• (soniyalar< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• setInterval funksiyasi jQuery-ning bir qismi emas, standart JavaScript funktsiyasidir. Kodni ko'p marta, muntazam intervallarda (millisekundlarda) bajaradi.

Bu ularning asosiy skripti:

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

setInterval (funktsiya () (
sana = yangi sana(),
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("vaqt").innerHTML = h + ":" + m + ":" + s;
}, 1000);

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 sodir bo'ldi:

Shunday qilib, siz hamma narsa qanday o'zgarganini o'zingiz ko'rishingiz mumkin va endi siz hamma narsani o'zingiz qilishingiz va uslublaringizga mos ravishda chiroyli tartibga solishingiz mumkin. Boshqalarni qilish mumkin emas, chunki Flash u erda, ular bu erda yo'q.

Endi qo'shimcha ravishda Flash-da soat mavjud

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

Shunday qilib, siz qaysi birini yoqtirishingizni tanlashingiz va ularni o'rnatishingiz mumkin, chunki ba'zilari blokda o'rnatilishi mumkin, lekin sizga birinchilarini ko'proq yoqtirasiz, chunki ular moslashuvchan va sozlanishi, har kim buni qila oladi.

Bu ko'rsatadigan oddiy skript tizim vaqti JavaScript-da oddiy matnda. 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 soat kerak bo'lsa, sayt uchun Flash soatlariga qarang. Skript vaqt ma'lumotlarini qayerdan oladi? Ko'rsatilgan vaqt aynan qurilmada o'rnatilgan.

Saytdagi soatni ko'rmoqchi bo'lgan joyga quyidagi kodni joylashtiring. uCoz-da bu, masalan, "Sayt tepasi" yoki "Saytning pastki qismi" bo'lishi mumkin:

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

setInterval (funktsiya () (
sana = yangi sana(),
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("vaqt").innerHTML = h + ":" + m + ":" + s;
}, 1000);

Skript darhol siz o'rnatgan joyda soat bilan matn qatorini ko'rsatadi. Masalan, "00:00:00". Aytgancha, soniyalar, daqiqalar va soatlar har doim ikki xonali, shuning uchun o'zgaruvchan qiymatlar muammosiz sodir bo'ladi.