الدرس السادس عشر : استخدام المؤقت setInterval في الجافا سكربت

  • تاريخ النشر : 27/08/38 05:12:00 م
الدرس السادس عشر : استخدام المؤقت setInterval في الجافا سكربت

من أهم الأدوات البرمجية استخدام المؤقت وهو موجود في كل لغات البرمجة والمؤقت هو أداة تقوم باستدعاء كود معين تحدد كل فترة زمنية محددة مثلاً كل دقيقة أو ثانية يتم تنفيذ الكود

المؤقت في الجافا سكربت يتم إنشاؤه باستخدام الامر setInterval ويأخذ الشكل التالي:

setInterval(function,Time by milliseconds);

setInterval(الدالة التي سيتم تنفيذها,الوقت بالملي ثانية ( جزء من الألف في الثانية ));

 

تتسائل الآن متى يتم إيقاف المؤقت ؟

فالجواب أن المؤقت لن يتوقف إلا إذا قمت بإيقافه برمجياً باستخدام الأمر clearInterval

أو تم الخروج من صفحة الويب سواء بإغلاق المتصفح أو الإنتقال من الصفحة

 

لنوضح ذلك بمثال بسيط حيث سنقوم بتغيير لون المربع كل نصف ثانية حيث لدينا قائمة بأسماء الألوان listcolor وفي كل مرة ننتقل للون التالي حتى نصل لآخر لون فنعود للون الأول

  • افتح برنامج المفكرة لديك أو أي برنامج لتحرير كود الجافا سكربت
  • اكتب الكود التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>الدرس السادس عشر استخدام المؤقت setInterval </title>
</head>
<body>
<h1> تطبيق كود الجافا سكربت لتغيير لون المربع</h1>

<div id="box" style="width:200px;height:200px;background-color:blue;" ></div>
<button onclick="StartFunction()">إبدأ بتغيير ألوان المربع</button><br/>
<button onclick="StopFunction()">توقف عن تغيير ألوان المربع</button>

<script>
var myInterval;
// قائمة أسماء الألوان
var listcolor=["AliceBlue","AntiqueWhite","Aqua","Aquamarine",
"Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet",
"Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral",
"CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan",
"DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki",
"DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed",
"DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray",
"DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue",
"DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite",
"ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod",
"Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed",
"Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen",
"LemonChiffon","LightBlue","LightCoral","LightCyan",
"LightGoldenRodYellow","LightGray","LightGrey","LightGreen",
"LightPink","LightSalmon","LightSeaGreen","LightSkyBlue",
"LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow",
"Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine",
"MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen",
"MediumSlateBlue","MediumSpringGreen","MediumTurquoise",
"MediumVioletRed","MidnightBlue","MintCream","MistyRose",
"Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab",
"Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen",
"PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff",
"Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown",
"RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen",
"SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray",
"SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle",
"Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"];
var colornum;
// دالة البدأ في تغيير اللون
function StartFunction ()
{
colornum = 0;	
	myInterval = setInterval(cangeboxcolor,500);
}
	// دالة تغيير اللون
  function cangeboxcolor()
  {
  document.getElementById("box").style.backgroundColor=listcolor[colornum];
  if (colornum < (listcolor.length -1) )
  {
  colornum = colornum + 1;
  } else {
  colornum = 0;
  }  
 }
 
 // دالة التوقف عن تغيير اللون
function StopFunction() 
{
    clearInterval(myInterval);
}
</script>
</body>
</html>
  • الآن احفظ الملف بتنسيق صفحة ويب .html ثم افتح الملف في المتصفح لديك
  • ستظهر لك صفحة فيها زرين انقر على زر إبدأ بتغيير ألوان المربع ليتم البدأ بتشغيل المؤقت وتغيير ألوان المربع
  • أو أنقر على زر توقف عن تغيير ألوان المربع ليتم التوقف عن تغيير ألوان المربع
⇐ الدرس الخامس عشر function في الجافا سكربت
فكرة سريعة عن الترميز ⇐

الردود

آراء أعضاء الموقع وتعليقاتهم

هل أنت مشترك بموقع تقنيات ؟ بادر بالإشتراك الآن


يجب عليك التسجيل لتستطيع كتابة تعليق