كيفية إنشاء ساعة رقمية باستخدام HTML و CSS وجافا سكريبت

تعد Digital Clock من بين أفضل مشاريع المبتدئين في JavaScript. من السهل جدًا التعلم للأشخاص من أي مستوى مهارة.

في هذه المقالة ، ستتعلم كيفية إنشاء ساعة رقمية خاصة بك باستخدام HTML و CSS و JavaScript. ستحصل على خبرة عملية في مفاهيم جافا سكريبت المتنوعة مثل إنشاء المتغيرات واستخدام الوظائف والتعامل مع التواريخ والوصول إلى الخصائص وإضافتها إلى DOM والمزيد.

هيا بنا نبدأ.

مكونات الساعة الرقمية

تتكون الساعة الرقمية من أربعة أجزاء: الساعة ، والدقيقة ، والثانية ، والميريديم.

هيكل المجلد لمشروع الساعة الرقمية

قم بإنشاء مجلد جذر يحتوي على ملفات HTML و CSS و JavaScript. يمكنك تسمية الملفات بأي شيء تريده. هنا يتم تسمية المجلد الجذر ساعة رقمية. وفقًا لاتفاقية التسمية القياسية ، تتم تسمية ملفات HTML و CSS و JavaScript index.html, Styles.css، و script.js على التوالى.

إضافة هيكل إلى الساعة الرقمية باستخدام HTML

افتح ال index.html ملف والصق الكود التالي:

هنا ، أ شعبة تم إنشاؤه بامتداد هوية شخصية من ساعة رقمية. يستخدم هذا div لعرض الساعة الرقمية باستخدام JavaScript.

Styles.css هي صفحة CSS خارجية ومرتبطة بصفحة HTML باستخدام ملف بطاقة شعار. بصورة مماثلة، script.js هي صفحة JS خارجية ومرتبطة بصفحة HTML باستخدام امتداد <نصي> بطاقة شعار.

إضافة وظائف إلى الساعة الرقمية باستخدام JavaScript

افتح ال script.js ملف والصق الكود التالي:

وقت الوظيفة () {
// إنشاء كائن من فئة التاريخ
تاريخ فار = تاريخ جديد () ؛
// احصل على الساعة الحالية
var hour = date.getHours () ؛
// احصل على الدقيقة الحالية
var minutes = date.getMinutes () ،
// احصل على الثانية الحالية
var second = date.getSeconds () ،
// متغير للتخزين صباحًا / مساءً
فترة فار = "" ؛
// تعيين AM / PM وفقًا للساعة الحالية
إذا (ساعة> = 12) {
فترة = "م" ؛
} آخر {
الفترة = "AM" ؛
}
// تحويل الساعة بتنسيق 12 ساعة
إذا (ساعة == 0) {
ساعة = 12 ؛
} آخر {
إذا (ساعة> 12) {
ساعة = ساعة - 12 ؛
}
}
// تحديث الساعة والدقيقة والثانية
// إذا كانوا أقل من 10
ساعة = تحديث (ساعة) ؛
دقيقة = تحديث (دقيقة) ؛
الثاني = التحديث (الثاني) ؛
// إضافة عناصر الوقت إلى div
document.getElementById ("ساعة رقمية"). innerText = ساعة + ":" + دقيقة + ":" + ثانية + "" + فترة؛
// ضبط المؤقت على 1 ثانية (1000 مللي ثانية)
setTimeout (الوقت ، 1000) ؛
}
// وظيفة لتحديث عناصر الوقت إذا كانت أقل من 10
// قم بإلحاق 0 قبل عناصر الوقت إذا كانت أقل من 10
تحديث الوظيفة (ر) {
إذا (ر <10) {
إرجاع "0" + t ؛
}
آخر {
عودة ر
}
}
زمن()؛

فهم كود JavaScript

ال زمن() و تحديث() تستخدم الوظائف لإضافة وظائف إلى الساعة الرقمية.

الحصول على عناصر الوقت الحالية

للحصول على التاريخ والوقت الحاليين ، تحتاج إلى إنشاء كائن التاريخ. هذا هو بناء الجملة لإنشاء كائن التاريخ في JavaScript:

تاريخ فار = تاريخ جديد () ؛

سيتم تخزين التاريخ والوقت الحاليين في ملف تاريخ عامل. أنت الآن بحاجة إلى استخراج الساعة والدقيقة والثانية الحالية من كائن التاريخ.

date.getHours (), date.getMinutes ()، و date.getSeconds () تُستخدم للحصول على الساعة والدقيقة والثانية الحالية على التوالي من كائن التاريخ. يتم تخزين جميع عناصر الوقت في متغيرات منفصلة لمزيد من العمليات.

var hour = date.getHours () ؛
var minutes = date.getMinutes () ،
var second = date.getSeconds () ،

تعيين Meridiem الحالي (AM / PM)

نظرًا لأن الساعة الرقمية بتنسيق 12 ساعة ، فأنت بحاجة إلى تعيين Meridiem المناسب وفقًا للساعة الحالية. إذا كانت الساعة الحالية أكبر من أو تساوي 12 ، فإن ميريديم هو PM (Post Meridiem) وإلا فهو AM (Ante Meridiem).

فترة فار = "" ؛
إذا (ساعة> = 12) {
فترة = "م" ؛
} آخر {
الفترة = "AM" ؛
}

تحويل الساعة الحالية بتنسيق 12 ساعة

أنت الآن بحاجة إلى تحويل الساعة الحالية إلى تنسيق 12 ساعة. إذا كانت الساعة الحالية تساوي 0 ، فسيتم تحديث الساعة الحالية إلى 12 (وفقًا لتنسيق 12 ساعة). أيضًا ، إذا كانت الساعة الحالية أكبر من 12 ، يتم تقليلها بمقدار 12 للحفاظ على توافقها مع تنسيق الوقت 12 ساعة.

متعلق ب: كيفية تعطيل تحديد النص والقص والنسخ واللصق والنقر بزر الماوس الأيمن على صفحة ويب

إذا (ساعة == 0) {
ساعة = 12 ؛
} آخر {
إذا (ساعة> 12) {
ساعة = ساعة - 12 ؛
}
}

تحديث عناصر الوقت

تحتاج إلى تحديث عناصر الوقت إذا كانت أقل من 10 (أحادي الرقم). يتم إلحاق 0 بجميع عناصر الوقت المكونة من رقم واحد (ساعة ، دقيقة ، ثانية).

ساعة = تحديث (ساعة) ؛
دقيقة = تحديث (دقيقة) ؛
الثاني = التحديث (الثاني) ؛
تحديث الوظيفة (ر) {
إذا (ر <10) {
إرجاع "0" + t ؛
}
آخر {
عودة ر
}
}

إضافة عناصر الوقت إلى DOM

أولاً ، يتم الوصول إلى DOM باستخدام معرف div الهدف (ساعة رقمية). ثم يتم تخصيص عناصر الوقت إلى div باستخدام النص الداخلي واضع.

document.getElementById ("ساعة رقمية"). innerText = ساعة + ":" + دقيقة + ":" + ثانية + "" + فترة؛

تحديث الساعة كل ثانية

يتم تحديث الساعة كل ثانية باستخدام ملف setTimeout () الطريقة في جافا سكريبت.

setTimeout (الوقت ، 1000) ؛

تصميم الساعة الرقمية باستخدام CSS

افتح ال Styles.css ملف والصق الكود التالي:

متعلق ب: كيفية استخدام CSS box-shadow: الحيل والأمثلة

/ * استيراد خط Google Open Sans Condensed * /
import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ') ؛
#ساعة رقمية {
لون الخلفية: # 66ffff ؛
العرض: 35٪؛
الهامش: تلقائي ؛
أعلى الحشو: 50 بكسل ؛
الحشو السفلي: 50 بكسل ؛
عائلة الخطوط: "Open Sans Condensed"، sans-serif؛
حجم الخط: 64 بكسل ؛
محاذاة النص: مركز ؛
مربع الظل: 0 4 بكسل 8 بكسل 0 rgba (0 ، 0 ، 0 ، 0.2) ، 0 6 بكسل 20 بكسل 0 rgba (0 ، 0 ، 0 ، 0.19) ؛
}

يستخدم CSS أعلاه لتصميم الساعة الرقمية. هنا ، يتم استخدام خط Open Sans Condensed لعرض نص الساعة. تم استيراده من خطوط جوجل باستخدام @يستورد. ال #ساعة رقمية محدد المعرف يستخدم لتحديد div الهدف. محدد الهوية يستخدم هوية شخصية سمة لعنصر HTML لتحديد عنصر معين.

متعلق ب: أمثلة بسيطة لرمز CSS يمكنك تعلمها في 10 دقائق

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

ملحوظة: الكود المستخدم في هذه المقالة هو مرخص من معهد ماساتشوستس للتكنولوجيا.

تطوير مشاريع JavaScript أخرى

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

يمكنك تجربة بعض المشاريع مثل الحاسبة ، ولعبة Hangman ، و Tic Tac Toe ، وتطبيق JavaScript للطقس ، وصفحة مقصودة تفاعلية ، وأداة تحويل الوزن ، ومقص ورق Rock ، وما إلى ذلك.

إذا كنت تبحث عن مشروعك التالي المستند إلى JavaScript ، فإن الآلة الحاسبة البسيطة تعد اختيارًا ممتازًا.

كيفية إنشاء آلة حاسبة بسيطة باستخدام HTML و CSS وجافا سكريبت

الكود البسيط المحسوب هو الطريق الذي يجب اتباعه عند البرمجة. تعرف على كيفية إنشاء الآلة الحاسبة الخاصة بك في HTML و CSS و JS.

اقرأ التالي

عن المؤلف