Home آموزش طراحی سایت ساخت ساعت آنالوگ به کمک Jquery

ساخت ساعت آنالوگ به کمک Jquery

4
1
29

سلام به خوانندگان عزیز ویکی وردپرس

امروزم با یه ترفند خیلی ساده میخوایم با هم یه ساعت آنالوگ بسازیم 🙂

ساخت ساعت آنالوگ با جی کوئری

قدم اول ساخت ساعت:

خب قبل از شروع دموی این ساعت رو اول با هم ببینیم:

(یادتون باشه که با کلیک روی دکمه های HTML و CSS و JS که بالای پنجره دمو وجود دارن میتونید کد مربوط به هر قسمت رو مشاهده کنید.)

See the Pen JbgQjE by abbas (@AbbasH90) on CodePen.

واسه طراحی این ساعت اول ساختار html رو میسازیم. ساختار html ما باید شامل یه باکس (واسه عکس ساعت) باشه و سه تا عقربه. ما این ساختارو با ul و li زدیم که کدش به این صورته:

قدم دوم ساخت ساعت:

عکس خام ساعت رو که توی فتوشاپ ساختیم به عنوان background میدیم به ul و عکس های عقربه هارو هم به همین صورت به li های متناظر میدیم. با absolute کردن پوزیشن عقربه ها میتونیم خیلی راحت اونارو به مرکز ساعت منتقل کنیم و با z-index اونارو روی هم مرتب کنیم. عقربه ساعت اول میاد بعد عقربه دقیقه روی اون باید باشه و عقربه ثانیه هم روی عقربه دقیقه قرار میگیره.

خب حالا تا اینجای کار یه ساعت داریم که عقربه هاشم روشه ولی عقربه ها هیچ حرکتی ندارند و همگی عدد 12 رو نشون میدن. میخوایم با استفاده از تابع setInterval جاوا اسکریپت و خاصیت transform: rotate سی.اس.اس این عقربه هارو تکون بدیم.

برای گرفتن زمان فعلی هم از تابع Date جاوا اسکریپت استفاده میکنیم.

خب روش کلی کار به این صورته که برای هر عقربه یه تابع setInterval برای فاصله زمانی 1 ثانیه مینویسیم که li متناظرش رو هر بار 6 درجه (تو 60 ثانیه میشه 360 درجه) در جهت عقربه های ساعت بچرخونه.

مثلا برای عقربه ثانیه کد ما این شکلی میشه:

خب اگه این تکه کد رو برای عقربه های دقیقه و ساعت هم تعمیم بدیم میتونیم عقربه هامون رو هر ثانیه یک بار بچرخونیم. به همین راحتی ساعت آنالوگ ما ساخته شد 🙂

واسه دیدن کد هر سه قسمت html و css و js توی codepen میتونید این صفحه رو مشاهده کنید.

خب امیدوارم از این اسکریپت هم خوشتون اومده باشه و استفاده کنید. سوالاتونو تو قسمت نظرات بپرسید حتما پاسخ میدم.

موفق باشید دوستان 🙂

4 نظر

  1. جوجه باغ ملکوت

    دسامبر 30, 2016 در 2:02 ب.ظ

    خیلی زیاد جالب بود
    ممنون آقای مهندس
    امیدوارم ادامه داشته باشه این آموزشای مفید

    نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      دسامبر 30, 2016 در 7:51 ب.ظ

      سلام
      خواهش میکنم
      ان شالله اگه عمری باقی باشه آموزش ها ادامه دار خواهند بود
      ممنون بابت نظر 🙂

      نقل قول

  2. مستر کد

    دسامبر 30, 2016 در 2:39 ب.ظ

    عالی مثل همیشه😄❤

    نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      دسامبر 30, 2016 در 7:51 ب.ظ

      سلام دوست عزیز
      لطف داری 🙂

      نقل قول

ارسال نظر

ایمیل شما منتشر نمیشودفیلد های ستاره دار اجباری هستند *