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

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

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





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



إيقاف استثناء خدمة نظام التعليمات البرمجية windows 10

هيا بنا نبدأ.





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

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

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

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



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

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





Digital Clock Using JavaScript






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



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

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

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

فهم كود JavaScript

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



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

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

var date = new Date();

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

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

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

تعيين وقت الظهيرة الحالي (صباحًا / مساءً)

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

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

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

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

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

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

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

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

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

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

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

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

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

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

setTimeout(Time, 1000);

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

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

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

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

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

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

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

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

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

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

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

لا يمكن رؤية ملفات android على جهاز الكمبيوتر

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

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

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

اقرأ التالي مواضيع ذات صلة نبذة عن الكاتب يوفراج شاندرا(تم نشر 60 مقالاً)

يوفراج طالب جامعي في علوم الكمبيوتر بجامعة دلهي بالهند. إنه متحمس لتطوير الويب Full Stack. عندما لا يكتب ، فإنه يستكشف عمق التقنيات المختلفة.

المزيد من Yuvraj Chandra

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك