Това е основният им скрипт:
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
На самия връх виждаме:
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");">
Така че можете да изберете кои ви харесват най-много и да ги поставите, защото някои могат да бъдат инсталирани в блока, но първите ви харесват повече, тъй като те са гъвкави и персонализирани, което всеки може да направи.
Вече обсъдихме създаването на аналогов часовник с използвайки CSSи JavaScript. В този урок ще направим същия часовник с помощта на CSS3, за да видим как нов стандартпроменя подхода към развитието на различни ефекти. Демонстрацията за този урок ще работи само в браузъри, които поддържат свойството CSS3 завъртане(в IE6 демонстрацията НЕ РАБОТИ).
CSS3 трансформация: завъртане
Трансформиране: завъртане- ново свойство на CSS 3, което позволява ротация различни елементи. С помощта на трансформации можете също да променяте мащаба на елементите, да въвеждате изкривявания хоризонтално и вертикално и да местите елементи из уеб страницата. Всичко това може да бъде анимирано с помощта на имота преход(С различни видовепреходи и продължителност).
Същите действия за анимиране на елементи на страница могат да бъдат извършени с някои JavaScript библиотеки(напр. jQuery). Разбира се с jQueryможете да анимирате промяната на много повече CSS свойстваотколкото с преход. Но jQuery е вграден CSS инструмент, JavaScript библиотеките са външни инструменти, които могат или не могат да бъдат налични. Във всеки случай CSS3 отваря нови обещаващи насоки за развитие на разработчиците.
Графични изкуства
Първо трябва да направите GUIза часове. Ще имаме основа и три стрели. Всички движещи се части са нарязани във Photoshop, за да бъдат 600px високи и 30px широки и разположени вертикално, а свойството по подразбиране е завъртанезавърта елемента около центъра. Можете да използвате имота трансформация-произходза да зададете центъра на въртене в друга точка.
Всяко изображение може да се използва за основа на часовника. Движещите се части са изображения PNG форматс прозрачност.
За архивиране с програмен кодвключени демонстрации PSD файл, който съдържа всички изображения.
HTML маркиране
Маркирането на часовника е прост неподреден списък. Всеки елемент от списъка съдържа движеща се част и има съответен идентификатор:
css
#часовник (позиция: относителна; ширина: 600px; височина: 600px; margin: 20px auto 0 auto; background: url(clockface.jpg); list-style: none; ) #sec, #min, #hour (позиция: абсолютна ; ширина: 30px; височина: 600px; горе: 0px; ляво: 285px; ) #sec (фон: url(sechand.png); z-индекс: 3;) #min (фон: url(minhand.png); z -индекс: 2; ) #hour ( фон: url(hourhand.png); z-индекс: 1; )
CSS също е доста прост. Тъй като движещите се части имат еднакви размери и начални точки, можем да ги декларираме заедно, за да избегнем повторение. елемент улполучава относително позициониране, което ви позволява да използвате абсолютно позициониранеза намиращите се в него стрелки.
CSS3 ще бъде приложен с малко jQuery код.
JavaScript
- Получаване на часовника
- Изчислете и вмъкнете css стилове(ъгъл на въртене) за всеки елемент.
- Актуализирайте CSS стиловете на редовни интервали.
Трябва да се отбележи, че jQuery работи чудесно с новите свойства на CSS3. Освен това, тъй като стиловете се добавят динамично, CSS файлът е валидиран като CSS2.1!
Получаване на време
Можете да получите време от използвайки PHPкод, но ще бъде сървърно време. И JavaScript връща местното време на потребителя.
Ще получаваме информация чрез Дата()и задаваме всички наши променливи. Ще използваме съответно GetSeconds(), GetMinutes()или GetHours()за Дата()за да зададете съответно секундите, минутите и часовете:
var seconds = new Date().getSeconds();
В горния ред ще бъде получено число от диапазона от 0 до 59 и ще бъде присвоено на променлива секунди.
Определете ъгъла
След това трябва да изчислите ъгъла на въртене за всяка стрелка. За секундната и минутната стрелка, които имат 60 позиции в часовия кръг, трябва да разделим 360 градуса на 60, което ще ни даде числото 6. Тоест, всяка секунда или минута съответства на 6-градусов завой. Ще съхраним резултата от изчисленията в друга променлива. За секунди кодът изглежда така:
Varsdegree = секунди * 6;
С часове изчисленията ще бъдат различни. Тъй като имаме циферблат с 12 позиции за часовата стрелка, всеки час отговаря на ъгъл на завъртане от 30 градуса (360/12=30). Но часовата стрелка също трябва да е в междинни състояния, тоест трябва да се движи всяка минута. Тоест в 4:30 часовата стрелка трябва да е по средата между 3 и 4 часа. Ето как ще го направим:
Varhdegree = часове * 30 + (минути / 2);
Тоест добавяме към ъгъла на въртене по броя на часовете и стойността на разделянето на броя минути на 2 (което ще ни даде стойност в диапазона от 0,5 до 29,5). Така часовата стрелка ще се "завърти" под ъгъл от 0 до 30 градуса (часово увеличение).
Например:
2 часа 40 минути -> 2*30 = 60 градуса и 40/2 = 20 градуса. Общо: 80 градуса.
Може да се предположи, че часовникът ще покаже след 12, тъй като стойността на въртене ще бъде повече от 360 градуса. Но всичко работи чудесно.
Вече сме готови да вмъкнем CSS правилата.
Настройка на стила
Ето как изглежда едно CSS3 правило завъртанев стилов лист:
#sec (-webkit-transform: завъртане (45deg); -moz-transform: завъртане (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 = seconds * 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 = часове * 30 + (минути / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour) ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = минути * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); ), 1000); ));
Ние използваме JavaScript функция setIntervalза актуализиране на стилове всяка секунда. Променливите, които получават времеви стойности, трябва да бъдат актуализирани в него. В противен случай часовникът ще се превърне в безполезен боклук на страницата.
Заключение
Този урок демонстрира практическа употребаИмоти завъртаненесвързани с дизайна.
Нека да направим Цифров часовникс използване на дата и час jQueryи CSS3за малко анимация.
HTML
Маркирането е просто и гъвкаво. Ние създаваме DIVс класа часовник, DIVс класа Дата, който ще покаже датата и неподреден списък, съдържащ часове, минути и секунди.
css
Стилове с малко анимация:
Контейнер (ширина: 960px; margin: 0 auto; overflow: hidden;) .clock (width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; ) #Date ( font- семейство: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul ( width:800px; margin:0 auto; padding:0px; list- style:none; text-align:center; ) ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; ) @-webkit-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; ) ) @-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; ) )
JS
Ние се свързваме jQueryбиблиотека
И тогава нашият сценарий
- нова дата()- създава нов обект Датасъс смисъл текуща датаи текущия час в браузъра на компютъра.
- setDate()- методът задава ден от месеца (от 1 до 31), местно време
- getDate()- методът връща деня от месеца (от 1 до 31) за посочената дата според местното време
- getSeconds(), getMinutes()и getHours()- тези методи ви позволяват да извлечете секундите, минутите и часовете от текущото време в браузъра.
- (секунди< 10 ? "0" : "") + seconds) - добавя водеща нула към стойността на секундите (минути и часове). Символи ? и : включва троичен ( троичен) оператор. Това е специален оператор, който връща стойността преди двоеточието, ако условието е преди въпрос (? ) надясно ( вярно), или стойност след двоеточиеако условието е невярно ( невярно).
- функция setInterval- е стандартен javascriptфункция, а не част jQuery. Изпълнява кода много пъти, на равни интервали (милисекунди).
Това е прост скрипт, който показва системното време в JavaScript в обикновен текст. Часове, минути и секунди, разделени с двоеточие – и това е всичко.
За да зададете свой собствен стил за часовника, е достатъчно да определите стила за блока с ID – #време. В CSS можете да зададете вашия шрифт за часовника, неговия цвят и размер. Ако не се нуждаете от обикновен часовник, а от по-сложни, тогава погледнете Flash часовника за сайта. Откъде скриптът получава данните за времето? Показваният час е точно този, зададен на устройството.
Инсталация
Поставете следния код на мястото в сайта, където искате да видите часовника. В uCoz това може да бъде например „Нагоре“ или „Надолу на сайта“:
200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00
Скриптът веднага ще покаже на мястото, където сте го инсталирали, ред текст с часовник. Например, "00:00:00". Между другото, секундите, минутите и часовете винаги са двуцифрени, така че промяната на стойностите е плавна.