إنشاء ساعة ذات عقارب باستخدام CSS و JavaScript: دليل تصميم وبرمجة

26/01/2024آخر تحديث: 26/01/2024

34 2 دقائق

في عالم تطوير الويب الحديث، يشكل إنشاء ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript تحدّيًا شيّقًا يجمع بين مهارات التصميم والبرمجة. سنتناول هنا خطوات شاملة لإنشاء ساعة ديناميكية وجذابة تستخدم لغات الويب الرئيسية.

أولاً وقبل كل شيء، يجب علينا إنشاء هيكل HTML الأساسي الذي سنعتمد عليه:

html
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Analog Clocktitle>
head>
<body>
    <div class="clock">
        <div class="hour-hand">div>
        <div class="minute-hand">div>
        <div class="second-hand">div>
        <div class="center">div>
    div>
    <script src="script.js">script>
body>
html>

الآن، سنقوم بتنسيق هذه الهيكل باستخدام CSS في ملف “styles.css”:

css
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.clock {
    position: relative;
    width: 200px;
    height: 200px;
    border: 8px solid #333;
    border-radius: 50%;
}

.hour-hand,
.minute-hand,
.second-hand {
    position: absolute;
    transform-origin: 50% 100%;
    background-color: #333;
}

.hour-hand {
    height: 50px;
    width: 4px;
}

.minute-hand {
    height: 80px;
    width: 4px;
}

.second-hand {
    height: 90px;
    width: 2px;
    background-color: #ff0000; /* يمكن تغيير لون الثواني حسب الرغبة */
}

.center {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

والآن، لنضيف التفاصيل الديناميكية باستخدام JavaScript في ملف “script.js”:

javascript
function rotateClockHands() {
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    const hourRotation = 360 * (hours / 12) + 90 + (30 * (minutes / 60));
    const minuteRotation = 360 * (minutes / 60) + 90;
    const secondRotation = 360 * (seconds / 60) + 90;

    document.querySelector('.hour-hand').style.transform = `rotate(${hourRotation}deg)`;
    document.querySelector('.minute-hand').style.transform = `rotate(${minuteRotation}deg)`;
    document.querySelector('.second-hand').style.transform = `rotate(${secondRotation}deg)`;
}

setInterval(rotateClockHands, 1000);
rotateClockHands(); // يتم استدعاء هذه الدالة لتحديث العقارب عند تحميل الصفحة

في هذا السياق، يتم تعريف دالة rotateClockHands() لحساب درجات دوران العقارب استنادًا إلى الوقت الحالي، ثم يتم تحديث تلك الدورانات في العناصر المناسبة باستخدام JavaScript.

تأكد من تضمين هذه السكريبتات والأنماط في صفحة HTML الخاصة بك، وسيقوم الكود بإنشاء ساعة ذات عقارب جميلة وديناميكية تستجيب لتحريكات الثواني، الدقائق، والساعات.

إنشاء ساعة ذات عقارب باستخدام CSS و JavaScript: دليل تصميم وبرمجة

المزيد من المعلومات

مفهوم الـ Transform والـ Transform-Origin في CSS:

الهيكل الزمني setInterval ودالة rotateClockHands:

استخدام JavaScript للوصول إلى عناصر HTML:

تكامل الألوان والتصميم:

التعامل مع التوقيت في JavaScript:

الإستدعاء الأولي للدالة:

الإضافات والتحسينات المحتملة:

المزيد من المعلومات

مفهوم الـ Transform والـ Transform-Origin في CSS:

الهيكل الزمني setInterval ودالة rotateClockHands:

استخدام JavaScript للوصول إلى عناصر HTML:

تكامل الألوان والتصميم:

التعامل مع التوقيت في JavaScript:

الإستدعاء الأولي للدالة:

الإضافات والتحسينات المحتملة:

استكشف فعالية حلقة التكرار for في Jinja لتنظيم وعرض البيانات

تحسين أداء التطبيقات باستخدام Object Pool Pattern

مقالات ذات صلة

تمثيل الأعداد على مستوى البت: أساسيات علم الحاسوب وتطبيقاتها

كل ما تحتاج معرفته لتصبح مساعدًا افتراضيًا

حل مشكلة خطأ ld linker في SFML على Ubuntu 16.04

كيفية تعامل البرمجة مع الإيموجيات