متابعي المدونة الكرام. السلام عليكم ورحمة الله وبركاته.
في هذه المشاركة السريعة أضع لكم كودًا لإنشاء قرعة الكترونية بلغة javascript , والمقصود بالقرعة الالكتورنية أن يقوم المستخدم بإضافة مجموعة عناصر , كأن تكون أسماء أشخاص , بُلْدان , أو أي عناصر أخرى , ويقوم الكمبيوتر باختيار أحد هذه العناصر بصفة عشوائية.
سأضع لكم الكود مع شرح مختصر لأسطره وسأضع النتيجة في النهاية.
الكود:
<br /><br />
<font size=18>
<center><b><h1>القرعة الالكترونية </h1></b></center>
<table border=0>
<tr width=100%>
<td width=25%>
<button onclick="insertItem()"> إضافة عنصر </button>
<br />
<button onclick="removeItem()"> إزالة العنصر المحدد </button>
</td>
<td width=50%>
<select id="menu")
</select>
</td>
<td width=25%>
<button onclick="choose()"> اسحب ورقة </button>
</td></tr></table>
<br />
</font>
<!-- ما سبق هو التصميم العام للأداة ؛ حيث أنشأنا جدولًا من صف واحد و3 أعمدة, يمتد هذا الصف على كامل الشاشة يمينًا ويسارًا , وقد تم وضع كلًا من زر الحذف والإضافة من ناحية اليسار في العمود الأول , وفي الوسط تم وضع صندوق اختيار فارغ تظهر فيه العناصر المضافة عند الاستخدام , وفي اليمين زر لإظهار أحد هذه العناصر المضافة.
تم ربط زر الإضافة بأمر InsertItem() الذي ستتم برمجته لاحقًا ضمن تعليمات javascript, وكذلك الحال مع زر الحذف الذي تم ربطه بالأمر removeItem() , وكذلك الحال أيضًا بالنسبة لزر الاختيار الذي قد تم ربطه بالأمر choose()
وأيضًا قد تم إعطاء صندوق الاختيار اسمًا تعريفيًا id ليتم استدعاءه لاحقًا , والاسم هو menu -->
<!-- والآن نبدأ في برمجة الأوامر المربوطة بأزرارنا من خلال تعليمات javascript -->
<script type-text="javascript">
function insertItem() { //بدء تعريف أمر insertItem الخاص بإضافة العناصر
var menu = document.getElementById("menu") // استدعاء صندوق الخيارات من خلال أمر document.getElementById ووضع المعرف الخاص به داخل علامتي التنصيص الموجودة بين القوسين الهلاليَين , وقد تم وضع الصندوق في متغير أسميناه menu لتسهيل عملية الكتابة
menu.innerHTML += "<option>"+prompt("اسم العنصر")+"</option>" // أمر سطر اضافة عنصر جديد , حيث يتم أخذ اسم العنصر من المستخدم نفسه عبر رسالة حوارية
} // نهاية تعريف الأمر insertItem
function choose() { //بداية تعريف دالة الاختيار
var menu = document.getElementById("menu") // استدعاء صندوق الاختيار بنفس الطريقة
if (menu.length == 0) { // جملة شرطية تتأكد ما إن كان الصندوق فارغ أم لا
alert("قم بإضافة عناصر إلى القائمة أولا.") // في حال كان الصندوق فارغًا فأظهر للمستخدم تنبيهًا تطالبه بإضافة عناصر إلى القائمة
} else { // وإلا
alert("لقد وقع الاختيار على \n"+menu[Math.floor(Math.random() *menu.length)].innerHTML) //إظهار رسالة تنبيهية تخبر المستخدم بالعنصر الذي اختاره الجهاز آليًا
} // نهاية تعبير الجملة الشرطية
}// نهاية التعريف بدالة الاختيار
function removeItem() { // بداية تعريف دالة الحذف
var menu = document.getElementById("menu") //استدعاء الصندوق بنفس الطريقة
menu[menu.selectedIndex].remove() // أمر حذف العنصر المحدد
}// نهاية أمر الحذف
</script>
نتيجة الكود:
القرعة الالكترونية
|
|
ليست هناك تعليقات:
إرسال تعليق
قل شيئًا