و هدا مثال على الساعة المراد إنشائها


بداية سنبدأ بإنشاء عناصر الساعة و ستكون كالتالي

1 - محيط الساعة ( الدئرة الخارجية )

سيضم داخله 4 عناصر أخرى هي

2 عقرب الثواني
3 عقرب الدقائق
4 عقرب الساعات
5 نقطة المركز

  <div class="clock">

    <div class="hand" id='h_hour'></div>
    <div class="hand" id='h_minute'></div>
    <div class="hand" id='h_second'></div>
<div class="hand" id='center'></div>
  </div>

1. الدائرة الخارجية تحمل المعرف clock
2. جميع العناصر الداخلية تحمل الكلاس hand
3. المعرف h_hour لعقرب الساعات
4. المعرف h_minute لعقرب الدقائق
5. المعرف h_second لعقرب الثواني
6. المعرف h_center لنقطة المركز

#clock {
  margin:130px auto;
  width: 300px;
  height: 300px;
  background: #ff39f71a;
  border-radius: 50%;
  position: relative;
  box-shadow: 2px 2px 10px #888888;
}

1. المحاداة الخارجية : 130 بكسل عموديا و تموضع تلقائي أفقيا 
2. الأبعاد : 300 بكسل للعرض و الطول
3. لون الخلفية 
4. إستدارة الحواف : 50% ليكون العنصر دائريا
5. تموضع نسبي
6. لون و شكل ظل العنصر

شكل الدائرة الخارجية :



الكلاس hand : و هو الكلاس الموجود في جميع العناصر داخل الدائرة ( العقارب و المركز )

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  border: 1px solid #fff;
  border-radius: 10px;


}

1. التموضع مطلق
2. الإنزياح عن الأسفل : 50%
3. الإنزياح عن اليسار : 50%
4. الحواف : 1 بكسل بنسق متصل و لون أبيض
5. إستدارة الحواف : 10 بكسل

الخصائص في الكلاس hand مشتركة بين جميع المكونات الداخلية للساعة ( العقارب و نقطة المركز )

نأتي الآن للخصائص الفريدة لكل عنصر و ستم إدراجها في المعرف id

 الخصائص الفريدة لعقرب الثواني

  width: 3px;
  height: 45%;
  background: red;

النتيجة




الخصائص الفريدة لباقي العناصر ( يمكنك أن تبدع كيفما شئت و لا يلزم التقيد بالمثال في هدا الدرس )

#h_minute {
  width: 7px;
  height: 40%;
  background: #000;
}
#h_hour {
  width: 10px;
  height: 28%;
  background: #000;
}
#h_center {

  background: #000;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

    transform: translateX(-50%) rotate(90deg);

النتيجة :



لاحض أن عقرب الثواني إستدار بزاوية 90 درجة لكن إتخد من وسطه مركزا للدوران
لإصلاح هده المشكلة يكفي تحديد الأسفل كمركز للدوران عن طريق خاصية transform-origin

نضع التالي في كلاس hand

  transform-origin: bottom;

النتيجة :




يمكن التحكم بالعناصر الأخرى على نفس الشاكلة بتحديد زاوية الإستدارة من خلال خاصية rotate


مثال







النتيجة :



يتبقى لنى الآن ضبط الساعة حسب التوقيت الحقيقي و سنقوم بدلك من خلال javascript

ننشئ ملف جافا سكريبت و ليكن على سبيل المثال بإسم script.js


script.js

نقوم بإستخراج التاريخ عن طريق دالة Date() و نحفظه في متغير datvar

  var datvar = new Date();

الآن نأتي للمرحلة الأصعب و هي إستخداج زاوية الإستدارة إنطلاقا من الوقت.
للقيام بدلك سنحتاج لبعض المنطق الرياضي

عدد الثواني في الدائرة هو 60
عدد الدقائق في الدائرة هو 60
عدد الساعات في الدائرة هو 12

إستدارة عقرب الثواني هو ( عدد الثواني / 60 ) * 360 درجة
إستدارة عقرب الدقائق هو  ( عدد الدقائق + ( عدد الثواني / 60 ) / 60 ) * 360 درجة
إستدارة عقرب الساعات هو (عدد الساعات + ( عدد الدقائق / 60) / 12) * 360 درجة

من متغير الوقت   datvar يمكن إستخراج الثواني و الدقائق و الساعات كالتالي

datvar.getSeconds()
datvar.getMinutes()
datvar.getHours()

حفظ نسبة الإستدارة لكل عقرب إنطلاقا من الوقت

  var seconds_rotat = datvar.getSeconds() / 60;
  var minutes_rotat = (seconds_rotat + datvar.getMinutes()) / 60;
  var hours_rotat = (minutes_rotat + datvar.getHours()) / 12;

 بدلا من تحديد خاصية transform عن طريق ملف css يمكن القيام بدلك من خلال الجافا كالتالي

getElementById('h_second').style.transform='translateX(-50%) rotate(50deg)';

نستبدل القيمة 50 بنسبة الإستدارة * 360

document.getElementById('h_second').style.transform='translateX(-50%) rotate('+seconds_rotat*360+'deg)'; 

تطبيق العملية على جميع العناصر

document.getElementById('h_second').style.transform = 'translateX(-50%) rotate(' + seconds_rotat * 360 + 'deg)';
document.getElementById('h_minute').style.transform = 'translateX(-50%) rotate(' + minutes_rotat * 360+ 'deg)';
document.getElementById('h_hour').style.transform = 'translateX(-50%) rotate(' + hours_rotat * 360 + 'deg)';

كود javascript كامل

  var datvar = new Date();
  var seconds_rotat = datvar.getSeconds() / 60;
  var minutes_rotat = (seconds_rotat + datvar.getMinutes()) / 60;
  var hours_rotat = (minutes_rotat + datvar.getHours()) / 12;


document.getElementById('h_second').style.transform = 'translateX(-50%) rotate(' + seconds_rotat * 360 + 'deg)';
document.getElementById('h_minute').style.transform = 'translateX(-50%) rotate(' + minutes_rotat * 360+ 'deg)';
document.getElementById('h_hour').style.transform = 'translateX(-50%) rotate(' + hours_rotat * 360 + 'deg)';

هدا الكود سيضبظ الوقت لحظة تحميل الصفحة مرة واحدة فقط و بالتالي لن نرى عقارب الساعة تتحرك في الوقت الفعلي

لتجاوز هده العقبة سنظع الكود السابق داخل دالة جديدة

function cc_time(){
// الكود السابق
}

تم نقوم بتمرير الدالة لدالة setInterval و اللتي تقوم بدورها بتكرار الدالة كل مدة زمنية معينة


المدخل التاني في دالة setInterval  هو المدة اللتي يستغرقها إعادى تنفيد الدالة مرة أخرى بالميلي ثانية
1000 ميلي ثانية = 1 ثانية

النتيجة


يمكنك إستخدام هده الصورة أو غيرها كخلفية









النتيجة



للتحميل :


http://www.mediafire.com/file/x7mt94x1qdbrpse/wahj.cf_clock.rar/file

إنتهى الدرس