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

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

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

تعلمنا في الدرس السادس عشر استخدام المؤقت وفيما يلي نضع بين أيديكم تطبيق بسيط لاستخدام المؤقت

دعونا نعتبر أن لدينا طائرة ونود تحريكها لأعلى وسط الصفحة ومن ثم نحركها لأسفل يسار الصفحة

أولا هنالك مفاهيم يجب أن نراجعها سوياً في التصميم باستخدام CSS

 

الأمر CSS

 البيان

background-image:url('bk.jpg');

لتغيير خلفية المحتوى div لصورة

 left:10px;

لتغيير الموقع الأفقي الكائن

 top:550px

لتغيير الموقع العمودي للكائن
 

 

الفكرة كالتالي

في كل نصف ثانية سيتم تحريك الطائرة نقطة للأعلى ونقطة لليمين حتى تصل إلى منتصف أعلى الصفحة ويتم إيقاف المؤقت وفي حالة الهبوط سيتم تحريك الطائرة نقطة للأسفل ونقطة لليمين حتى تعود على خط البداية كما في الصفحة التالية :

http://www.tecnyt.com/images/blog/P2/p2.html

 

  • افتح برنامج المفكرة لديك أو أي برنامج لتحرير كود الجافا سكربت
  • اكتب الكود التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>تطبيق على استخدام المؤقت</title>
</head>
<body dir="rtl" style="background-image:url('bk.jpg');background-repeat:no-repeat;"  >
<img id="Plane" src="airplane.png" style="top:550px;left:10px;position:absolute;"  > </div>
<button type="button" id="myBtn" onclick="StartmovePlaneUP()">إقلاع</button>
<button type="button" id="myBtn2" onclick="StartmovePlaneDown()">هبوط</button>
<script>
var UPInterval;
var DownInterval;
var Planetop;
var Planeleft;
 
function StartmovePlaneUP()
{	
Planetop = 550;
Planeleft = 10 ; 
StopmovePlaneDown();
	UPInterval = setInterval(movePlaneUP,10);
}
function movePlaneUP(){
	document.getElementById("Plane").style.top = Planetop +'px';        
	document.getElementById("Plane").style.left = Planeleft +'px';    
	
	if (Planetop >  10 )
  {
  Planetop = Planetop -1;
  } 
  
	if (Planeleft <  550 )
  {
  Planeleft = Planeleft +1;
  } 
	
	if (planetop <= 10) And (Planeleft => 550)
	{
    StopmovePlaneUP();
	}
}
	function StopmovePlaneUP() 
{
    clearInterval(UPInterval);
}
function StartmovePlaneDown()
{	
Planetop = 10;
Planeleft = 550 ; 
StopmovePlaneUP();
	DownInterval = setInterval(movePlaneDown,10);
}
function movePlaneDown(){
	document.getElementById("Plane").style.top = Planetop +'px';        
	document.getElementById("Plane").style.left = Planeleft +'px';    
	
	if (Planetop <  550 )
  {
  Planetop = Planetop +1;
  } 
  
	if (Planeleft < 1100 )
  {
  Planeleft = Planeleft +1;
  } 
    if (planetop >= 550) And (Planeleft => 1100)
	{
    StopmovePlaneDown();
	}
}	
	function StopmovePlaneDown() 
{
    clearInterval(DownInterval);
}
</script>
</body>
</html>

 

  • الآن احفظ الملف بتنسيق صفحة ويب .html ثم افتح الملف في المتصفح لديك
  • ستظهر لك صفحة فيها زرين انقر على زر إقلاع لتتحرك الطائرة أعلى وسط الصفحة

 

ثم انقر زر هبوط لتتحرك الطائرة أسفل يسار الصفحة

 

⇐ الدرس الخامس عشر function في الجافا سكربت
فكرة سريعة عن الترميز ⇐

الردود

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

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


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