عندما يحاول مدراء المواقع عمل مسابقة او (giveaway) والاختيار بشكل عشوائي بين التعليقات …
عادة ما يكون عدد التعليقات كبير جداً وقد يصل الى المئات , عندها يستحيل كتابة ارقام التعليقات على اوراق وعمل قرعة تقليدية (طبعاً بتجاهل موقع random.org )
لكن الموقع (اقصدrandom.org ) بطيء جداً في اخراج الرقم العشوائي … الحل مع J Query , لذلك صنعت صفحة مولد الارقام العشوائية في الموقع
(للدخول الى الصفحة اضغط على الصورة )
*/ سوف اقوم بشرح كيفية صناعة صفحة مشابهة لهذه الصفحة ( تحتاج الى معرفة بالJ Query )
الرقم العشوائي بالجافا
يمكننا بكل بساطة اخذ رقم عشوائياً بين رقمين بالجافا سكربت
var numRand = Math.floor(Math.random()*101)
هذا الكود سوف يأخذ اي رقم بين 1 و100 ويظهره ... هذا قد يفيد في بعض الاحيان , لكنني اريد ان اجعله اكثر فائدة ببناء صفحة تأخذ اعلى قيمة وادنى قيمة نحن ندخلها وتعطينا رقماً عشوائيا بينهما
فلنبدأ!
التعديل على html
نبتدئ تصميم الصفحة بإضافة صندوقين للمدخلات , وزر”الاختيار” ومعها ايضا عنصر div فارغ لنضع به النتيجة (او الرقم المختار عشوائيا)
<input type="text" id="lownumber" value="1" /> and <input type="text" id="highnumber" value="100" /> <br /> <input type="submit" id="getit" value="ولد الرقم العشوائي!" /> <div id="randomnumber"></div>
العمل على j query
سوف اجعل الضغط على زر “ولد الرقم العشوائي” يظهر رقماً عشوائي بين القيمتين التي ادخلناها في صندوقي الادخال .
ننشئ ملف js. جديد ونضع فيه
$("#getit").click(function() { var numLow = $("#lownumber").val(); var numHigh = $("#highnumber").val(); var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1; var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow); if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh) && (numLow != '') && (numHigh != '')) { $("#randomnumber").text(numRand); } else { $("#randomnumber").text("هنالك خطأ ما..."); } return false; });
الطريقة الاسهل , هي بطرح القيمة الصغرى من الكبرى , اخذ رقم عشوائي بينهما واضافته الى القيمة الاصغر , ولتعمل الفكرة بشكل جيد , يجب التأكد من ان
- الرقم الثاني اكبر من الاول .
- المدخلات لا تكون فارغة وان تكون ارقاماً لا حروف .
وكلمسة نهائية ,وضعت الرقمين 1 و100 بشكل افتراضي , لكنني اريدها ان تكون سهلة للتعديل . لذلك فقط عندما تضغط على الصندوق تحذف القيم الافتراضية في المرة الاولى فقط , وبالتأكد عند الضغط مرة اخرى على الصندوقين في نفس النافذة لا يحذفها مرة اخرى !
$("input[type=text]").each(function(){ $(this).data("first-click", true); }); $("input[type=text]").focus(function(){ if ($(this).data("first-click")) { $(this).val(""); $(this).data("first-click", false); $(this).css("color", "black"); } });
وبعد التعديل على الcss وتظبيط الشكل العام للتصميم اصبح :
وهكذا انتهيت من العمل على الصفحة :22:
شكراChris Coyier”^^
كتبوا هنا