ساعت دیجیتال در CSS3 و jQuery. ساعت پیکانی با استفاده از CSS3 Clock html css

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

HTML

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

css

سبک هایی با کمی انیمیشن:

ظرف (عرض: 960 پیکسل؛ حاشیه: 0 خودکار؛ سرریز: پنهان؛) .clock (عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک: 30 پیکسل؛ حاشیه: 1 پیکسل ثابت #333؛ رنگ: #fff؛ ) #تاریخ (قلم- خانواده: Arial، Helvetica، sans-serif؛ اندازه قلم: 36 پیکسل؛ متن-تراز: مرکز؛ متن-سایه: 0 0 5 پیکسل #00c6ff؛ ) ul (عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ پد: 0 پیکسل؛ فهرست- سبک: هیچ‌کدام؛ متن-تراز: مرکز؛ ) ul li (نمایش: درون خطی؛ اندازه قلم: 10em؛ تراز متن: مرکز؛ فونت-خانواده: 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٪ (تاری: 1.0؛ متن-سایه: 0 0 20 پیکسل #00c6ff؛) 50٪ (تماندگی: 0؛ متن-سایه: هیچ؛ ) 100٪ (تأت: 1.0؛ متن-سایه: 0 0 20 پیکسل #00c6ff؛ ) ) @-moz-keyframes mymove ( 0% (مادری: 1.0؛ متن-سایه: 0 0 20 پیکسل #00c6ff;) 50% (تماندگی: 0؛ متن-سایه: هیچ؛ ) 100% (ماتی: 1.0؛ سایه متن :0 0 20px #00c6ff؛ ))

JS

وصل می کنیم جی کوئریکتابخانه

و سپس فیلمنامه ما

• تاریخ جدید()- یک شی جدید ایجاد می کند تاریخبا مقدار تاریخ فعلی و زمان فعلی در مرورگر کامپیوتر.
• setDate()- این روش روز ماه (از 1 تا 31) را به وقت محلی تنظیم می کند
• getDate()- روش روز ماه (از 1 تا 31) را برای تاریخ مشخص شده بر اساس زمان محلی برمی گرداند.
• getSeconds()، getMinutes()و getHours()- این روش ها به شما امکان می دهد ثانیه ها، دقیقه ها و ساعت های زمان فعلی را در مرورگر بازیابی کنید.
• (ثانیه< 10 ? "0" : "") + seconds) - یک صفر اول به مقدار ثانیه (دقیقه و ساعت) اضافه می کند. نمادها ? و : شامل سه تایی ( سه تایی) اپراتور. این یک عملگر ویژه است که مقدار قبل از کولون را در صورت شرایط قبل برمی گرداند سوال (? ) درست ( درست است، واقعی) یا مقدار بعد روده بزرگاگر شرط نادرست باشد ( نادرست).
• تابع setInterval- استاندارد است جاوا اسکریپتعملکرد، نه بخش جی کوئری. کد را بارها و در فواصل منظم (میلی ثانیه) اجرا می کند.

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

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»

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

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

در حال حاضر علاوه بر ساعت در فلش

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

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

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

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

نصب و راه اندازی

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

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

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

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

CSS3 تبدیل: چرخش

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

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

هنرهای گرافیک

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

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

آرشیو منبع آزمایشی شامل یک فایل PSD است که شامل تمام تصاویر است.

نشانه گذاری HTML

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

css

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

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

CSS3 با کمی کد جی کوئری اعمال خواهد شد.

جاوا اسکریپت

1. گرفتن زمان ساعت
2. محاسبه و درج سبک های CSS (زاویه چرخش) برای هر عنصر.
3. سبک های CSS را در فواصل زمانی منظم به روز کنید.

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

زمان گرفتن

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

ما اطلاعات را از طریق دریافت خواهیم کرد تاریخ()و تمام متغیرهایمان را تنظیم کنیم. بر این اساس استفاده خواهیم کرد 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: 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 = 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 + (mins / 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)))

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

نتیجه

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