نحوه اضافه کردن ساعت به html ساعت عقربه ای با استفاده از CSS3

ما قبلاً در مورد ایجاد ساعت های شماره گیری با آن صحبت کرده ایم با استفاده از CSSو جاوا اسکریپت در این آموزش ما همان ساعت را با استفاده از CSS3 می سازیم تا ببینیم چگونه استاندارد جدیدرویکرد ایجاد اثرات مختلف را تغییر می دهد. نسخه ی نمایشی این آموزش فقط در مرورگرهایی کار می کند که از ویژگی CSS3 پشتیبانی می کنند چرخاندن(دمو در IE6 کار نمی کند).

تبدیل: چرخش- یک ویژگی جدید CSS 3 که به شما امکان می دهد عناصر مختلف را بچرخانید. با استفاده از تبدیل، می توانید مقیاس عناصر را تغییر دهید، اعوجاج افقی و عمودی را معرفی کنید، و عناصر را در یک صفحه وب جابجا کنید. همه اینها را می توان با استفاده از ویژگی متحرک کرد انتقال(با انواع مختلفانتقال و مدت).

همین اقدامات برای متحرک سازی عناصر صفحه را می توان با استفاده از برخی از کتابخانه های جاوا اسکریپت (به عنوان مثال، jQuery) انجام داد. البته با با استفاده از jQueryشما می توانید تغییر بسیار بیشتر را متحرک کنید ویژگی های CSSنسبت به استفاده انتقال. اما جی کوئری یک ابزار CSS داخلی است، کتابخانه‌های جاوا اسکریپت ابزارهای خارجی هستند که ممکن است در دسترس نباشند. در هر صورت، CSS3 مسیرهای امیدوارکننده جدیدی را برای توسعه توسعه دهندگان باز می کند.

ابتدا باید انجام دهیم رابط کاربری گرافیکیبرای ساعت یک پایه و سه تیر خواهیم داشت. تمام قطعات متحرک در فتوشاپ به ابعاد 600px ارتفاع و 30px عرض برش داده می شوند و به صورت عمودی قرار می گیرند و به طور پیش فرض ویژگی چرخاندنعنصر را به دور مرکز می چرخاند. می توانید از ملک استفاده کنید مبدا تبدیلبه منظور تنظیم مرکز چرخش در نقطه دیگری.

می توانید از هر تصویری که دوست دارید برای پایه ساعت استفاده کنید. قطعات متحرک تصاویر هستند فرمت PNGبا شفافیت

بایگانی شده با کد منبعدموها گنجانده شده است فایل PSDکه شامل تمامی تصاویر می باشد.

طرح بندی ساعت یک لیست ساده و نامرتب است. هر عنصر لیست شامل یک قسمت متحرک است و یک شناسه مربوطه دارد:

#clock ( موقعیت: نسبی؛ عرض: 600 پیکسل؛ ارتفاع: 600 پیکسل؛ حاشیه: 20 پیکسل خودکار 0 خودکار؛ پس‌زمینه: url(clockface.jpg؛ سبک فهرست: هیچکدام؛ ) #sec, #min, #hour ( موقعیت: مطلق عرض: 30 پیکسل;

CSS نیز بسیار ساده است. از آنجایی که قطعات متحرک دارند همان اندازه هاو نقاط شروع، سپس می توانیم آنها را با هم اعلام کنیم تا از تکرار جلوگیری کنیم. عنصر ulموقعیت نسبی را دریافت می کند، که امکان موقعیت یابی مطلق را برای فلش های واقع در آن فراهم می کند.

CSS3 با استفاده از آن اعمال خواهد شد کد کوچکجی کوئری.

لازم به ذکر است که jQuery با ویژگی های جدید CSS3 عالی کار می کند. علاوه بر این، از آنجایی که سبک ها به صورت پویا اضافه می شوند، فایل CSS به عنوان CSS2.1 تایید می شود!

زمان را می توان با استفاده از کد PHP نیز بدست آورد، اما این زمان سرور خواهد بود. و جاوا اسکریپت زمان محلی کاربر را برمی گرداند.

ما با استفاده از اطلاعات دریافت خواهیم کرد تاریخ ()و تمام متغیرهایمان را تنظیم کنیم. بر این اساس استفاده خواهیم کرد GetSeconds(), GetMinutes()یا GetHours()برای تاریخ ()برای تنظیم ثانیه، دقیقه و ساعت به ترتیب:

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

در خط بالا عددی از محدوده 0 تا 59 به دست می آید و به یک متغیر اختصاص می یابد. ثانیه.

سپس باید زاویه چرخش هر فلش را محاسبه کنید. برای عقربه های ثانیه و دقیقه که 60 موقعیت روی دایره ساعت دارند، باید 360 درجه را بر 60 تقسیم کنیم که عدد 6 را به ما می دهد. یعنی هر ثانیه یا دقیقه مربوط به چرخش 6 درجه است. ما نتیجه محاسبات را در متغیر دیگری ذخیره می کنیم. برای چند ثانیه کد به صورت زیر است:

درجه متغیر = ثانیه * 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 به نظر می رسد چرخاندندر شیوه نامه:

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

و به این ترتیب کد با استفاده از jQuery درج می شود:

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

تنها مشکل این است که مقدار زاویه حاصل را به جای 45 درجه در متغیر "sdegree" در نحو تنظیم کنید. نیاز به ساخت یک رشته در متغیر دیگری چرخشیو آرگومان دوم را کاملا جایگزین کنید. مثل این:

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

الف کد جی کوئریبه این صورت خواهد بود:

$("#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)" ; .getHours(var) = new Date(). ("-moz-transform" : hrotate, "-webkit-transform" : hrotate) ), 1000 setInterval(function() var mins = new Date().getMinutes(); var mdegree = mins * 6); var mrotate = "rotate(" + mdegree + "deg)";

استفاده می کنیم تابع جاوا اسکریپت setIntervalبرای به روز رسانی سبک ها در هر ثانیه. متغیرهایی که مقادیر زمانی را دریافت می کنند باید در آن به روز شوند. در غیر این صورت، ساعت تبدیل به زباله های بیهوده در صفحه می شود.

این درس کاربرد عملی ملک را نشان می دهد چرخاندنمربوط به طراحی نیست

بیایید یک ساعت الکترونیکی با تاریخ و زمان با استفاده از jQuery و CSS3 برای یک انیمیشن کوچک بسازیم.

نشانه گذاری ساده و انعطاف پذیر است. یک DIV با کلاسی به نام ساعت، یک DIV با کلاسی به نام Date که تاریخ را نمایش می دهد و یک لیست نامرتب حاوی ساعت ها، دقیقه ها و ثانیه ها ایجاد کنید.

سبک های طراحی با انیمیشن های کوچک:

ظرف (عرض: 960 پیکسل؛ حاشیه: 0 خودکار؛ سرریز: پنهان؛) .clock (عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک: 30 پیکسل؛ حاشیه: 1 پیکسل ثابت #333؛ رنگ: #fff؛ ) #تاریخ (قلم- خانواده: Arial، Helvetica، sans-serif: text-shadow: 0 5px #00c6ff; :center; ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; -moz-animation:mymove 1s ease infinite -webkit 1s infinite; -shadow:0 0 20px #00c6ff;) 50% (تاری:0؛ text-shadow:none; ) 100% (opacity:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0٪ (تاری: 1.0؛ text-shadow: 0 0 20px #00c6ff;) 50٪ (تاری: 0؛ متن-سایه: هیچ؛ ) 100٪ (تاری: 1.0؛ متن-سایه: 0 0 20px #00c6ff؛ ) )

اتصال کتابخانه jQuery

و سپس اسکریپت ما $(document).ready(function() ( // دو متغیر با نام ماه ها و روزهای هفته در آرایه ایجاد کنید var monthNames = [ "January", "February", "Mars", " آوریل، "مه "، "ژوئن"، "ژوئیه"، "آگوست"، "سپتامبر"، "اکتبر"، "نوامبر"، "دسامبر" ]؛ 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 یک تابع استاندارد جاوا اسکریپت است، نه بخشی از jQuery. کد را بارها و در فواصل منظم (میلی ثانیه) اجرا می کند.

این اسکریپت اصلی آنهاست:

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

setInterval(تابع () (
تاریخ = تاریخ جدید()،
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("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

در بالا می بینیم:

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

فقط یک متن پررنگ و یک رنگ زرد و فلش اضافه کنید.

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

و این چیزی است که اتفاق افتاد:

بنابراین می توانید خودتان ببینید که چگونه همه چیز تغییر کرده است، و اکنون می توانید همه چیز را خودتان انجام دهید و به زیبایی آن را مطابق با سبک خود ترتیب دهید. اینکه دیگران را نمی توان انجام داد، زیرا فلش در آنجا روشن است، که آنها اینجا نیستند.

در حال حاضر علاوه بر این یک ساعت در فلش وجود دارد

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

بنابراین می توانید انتخاب کنید که کدام را بیشتر دوست دارید و آنها را نصب کنید، زیرا برخی را می توان در یک بلوک نصب کرد، اما شما اولین ها را بهتر دوست دارید، زیرا آنها انعطاف پذیر و قابل تنظیم هستند، که هر کسی می تواند انجام دهد.

این یک اسکریپت ساده است که نشان می دهد زمان سیستمدر جاوا اسکریپت در متن ساده. ساعت‌ها، دقیقه‌ها و ثانیه‌ها که با دو نقطه از هم جدا شده‌اند - همین.

برای اینکه استایل خود را برای ساعت تنظیم کنید، کافی است استایل را برای بلوک با ID - #time تعریف کنید. در CSS می توانید فونت خود را برای ساعت، رنگ و اندازه آن تنظیم کنید. اگر به یک ساعت ساده نیاز ندارید، بلکه به یک ساعت پیچیده تر نیاز دارید، به ساعت های Flash برای سایت نگاه کنید. اسکریپت داده های زمانی را از کجا می آورد؟ زمان نشان داده شده دقیقاً همان زمانی است که روی دستگاه تنظیم شده است.

کد زیر را در جایی که می خواهید ساعت را در سایت خود ببینید قرار دهید. در uCoz این می تواند، برای مثال، "بالا" یا "پایین سایت" باشد:

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

setInterval(تابع () (
تاریخ = تاریخ جدید()،
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("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

اسکریپت بلافاصله یک خط متن با یک ساعت در محلی که آن را نصب کرده اید نشان می دهد. به عنوان مثال، "00:00:00". به هر حال، ثانیه ها، دقیقه ها و ساعت ها همیشه دو رقمی هستند، بنابراین تغییر مقادیر به آرامی رخ می دهد.