بدأت رحلتك في برمجة الويب بإبداع وتنظيم ممتازين في كود التحكم بإشارات المرور. يبدو أنك تسعى لتحسين تجربة المستخدم عبر تنفيذ حلقة تكرار لتبديل الإشارات تلقائياً دون التدخل اليدوي. دعني أساعدك في تحقيق ذلك بإضافة حلقة تكرار إلى الكود الحالي.
للبداية، يمكننا استخدام setInterval() لتنفيذ العملية بشكل دوري. سنقوم بإنشاء دالة جديدة تسميها autoChangeTrafficLights() لتقوم بتغيير الإشارات بشكل تلقائي. ستقوم هذه الدالة بتحديث الصورة كل فترة زمنية محددة.
إليك الكود الجديد بتوضيحات مفصلة:
htmlHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Automatic Traffic Lightstitle>
head>
<body>
<img id="trafficlights" src="Redlight.jpeg" alt="Red Light" style="width:128px;height:128px;">
<button id="toggleButton" type="button" onclick="toggleAutoChange()">Toggle Automatic Changebutton>
<script>
var position = 0;
var list = ["Redlight.jpeg", "RedAmberlight.jpeg", "Greenlight.jpeg", "Amberlight.jpeg"];
var intervalId = null; // سيحتوي على معرف فاصل الزمن
function changetrafficlights() {
position = (position + 1) % list.length; // التأكد من الانتقال بين الصور بشكل دوري
var image = document.getElementById('trafficlights');
image.src = list[position];
}
function autoChangeTrafficLights() {
changetrafficlights(); // تغيير الصورة
}
function toggleAutoChange() {
if (intervalId === null) { // إذا كانت العملية التلقائية غير مفعلة
intervalId = setInterval(autoChangeTrafficLights, 2000); // كل ثانيتين
document.getElementById('toggleButton').innerText = "Stop Automatic Change"; // تغيير نص الزر
} else { // إذا كانت العملية التلقائية مفعلة
clearInterval(intervalId); // إيقاف العملية التلقائية
intervalId = null;
document.getElementById('toggleButton').innerText = "Start Automatic Change"; // تغيير نص الزر
}
}
script>
body>
html>
في هذا الكود، قمنا بإضافة دالة جديدة اسمها autoChangeTrafficLights() التي تقوم بتغيير الإشارات تلقائياً. ثم قمنا بإضافة دالة toggleAutoChange() التي تقوم بتشغيل أو إيقاف عملية تغيير الإشارات تلقائياً باستخدام setInterval() و clearInterval().
آمل أن يساعدك هذا الكود في تحقيق الهدف المطلوب! إذا كان لديك أي أسئلة أو استفسارات إضافية، فلا تتردد في طرحها.
المزيد من المعلومات
بالطبع، ها هو استكمال المقال:
عندما يتعلق الأمر ببرمجة الويب، فإن تحسين تجربة المستخدم هو أمر لا غنى عنه. واحدة من الطرق التي يمكنك بها تحقيق ذلك هي تنفيذ تغييرات تلقائية في صفحتك بدلاً من الاعتماد على التدخل اليدوي. في هذا المثال، قمنا بتطبيق هذه الفكرة على تغيير إشارات المرور بشكل تلقائي.
تمثل الصور المستخدمة لإشارات المرور في مثالنا الحالي مجموعة من الصور: الإشارة الحمراء، الإشارة الحمراء المتقدمة، الإشارة الخضراء، والإشارة الصفراء. وباستخدام كود JavaScript بسيط، يمكننا التبديل بين هذه الصور بنقرة زر واحدة.
لكن ما إذا أردنا أن نتيح للمستخدمين تجربة تلقائية، حيث يتم تغيير الإشارات بشكل متكرر دون الحاجة إلى التدخل اليدوي؟ لتحقيق هذا الهدف، قمنا بإضافة دالة جديدة تسمى autoChangeTrafficLights(). تقوم هذه الدالة بتغيير الإشارات بشكل تلقائي باستخدام setInterval()، والذي يسمح لنا بتنفيذ العملية بشكل دوري. في هذا المثال، قمنا بتعيين فترة زمنية تبلغ 2 ثانية لكل تغيير في الإشارة، لكن يمكن تعديل هذا الرقم حسب الاحتياجات.
تم توفير زر “تبديل التغيير التلقائي” للمستخدم، الذي يتيح له تشغيل أو إيقاف التغيير التلقائي حسب رغبته. باستخدام دالة toggleAutoChange()، يمكن للمستخدمين التحكم بشكل سهل ومريح في تجربتهم.
بهذه الطريقة، تمكنا من تحقيق هدفنا بتوفير تجربة تلقائية وسلسة للمستخدمين، مما يعزز تفاعلهم مع صفحتك ويجعل تجربتهم أكثر متعة وفاعلية.
في النهاية، يمكن أن تستمر في تطوير وتحسين هذا الكود بما يتناسب مع احتياجات مشروعك الخاص، سواءً عن طريق إضافة مزيد من الإشارات، أو تخصيص أوقات التغيير، أو حتى تعديل التصميم بشكل أكبر لتناسب متطلباتك الخاصة.
كل ما تحتاج إليه هو الإبداع والتفاني في تحقيق الهدف المطلوب، وسوف تصل إلى نتائج مذهلة تلبي توقعاتك وتفوقها.
آمل أن يكون هذا المقال مفيدًا لك ويساعدك في تطوير مشروعك بشكل أفضل. إذا كانت لديك أي أسئلة إضافية أو تحتاج إلى مساعدة بشأن أي شيء آخر، فلا تتردد في طرحها!
