לוגו אתר Fresh          
 
 
  אפשרות תפריט  ראשי     אפשרות תפריט  צ'אט     אפשרות תפריט  מבזקים     אפשרות תפריט  צור קשר     חץ שמאלה ‎print ‎"Hello World!"; if‎ ‎not rules.‎know ‎then rules.‎read();‎ חץ ימינה  

לך אחורה   לובי הפורומים > מחשבים > תכנות ובניית אתרים
רענן עמוד זה עזרה בקוד JS עם אינטרבלים
שמור לעצמך קישור לדף זה באתרי שמירת קישורים חברתיים
תגובה
« לאשכול הקודם | לאשכול הבא »
 
כלי אשכול חפש באשכול זה



  #1  
ישן 19-03-2010, 08:11
  shushu304 shushu304 אינו מחובר  
 
חבר מתאריך: 19.10.08
הודעות: 69
עזרה בקוד JS עם אינטרבלים
אני רוצה לשים תמונה של כדור שכל הזמן יזוז למעלה למטה ימינה ושמאלה לפי רוחב וגובה חלון הדפדפן.

השתמשתי בקודים הבאים:
קוד:
var z_x = screen.availWidth;
    var z_y = screen.availHeight;


בניתי קוד שאמור לעשות 4 דברים:
1) התחלת תנועה לכיוון ציר X
2) התחלת תנועה לכיוון ציר Y

3)ברגע ש-X שווה לרוחב המסך, עשיתי clearInterval והתחלתי אינטרבל חדש שאמור להחזיר את הכדור לכיוון X=0
4)אותו דבר עם Y שמגיע לגובה המסך וחזרה לY=0

2 בעיות עיקריות:
1) בהתחלה התנועה מתחילה אבל לא עוצרת כאשר הכדור מגיע למקסימום רוחב וגובה של המסך וממשיך עוד ונעצר בשלב מסוים וגם יוצר סקרולבר.
2) כאשר הכדור עוצר בכיוון הרגיל, הפונקציות שאמורות להחזיר חזרה לכיוון 0 לא מתחילות.

קוד CSS
קוד:
<style type="text/css">
img { position: absolute;
    top: 1px;
    left: 1px;
}
</style>



קוד JS
קוד:
<script type="text/javascript">
  <!--

    var z_x = screen.availWidth;
    var z_y = screen.availHeight;
    var i_x = 1;
    var i_y = 1;
    var i_x_b = 1;
    var i_y_b = 1;
    var speed = 6;
    var speed_back = -6;
    var int_move_front_x;
    var int_move_back_x;
    var int_move_front_y;
    var int_move_back_y;
    //var i_y_in = i_y;
    //var i_x_in = i_x;

// first function - start all
    function start_move()
    {
        int_move_front_x = setInterval('move_x()',10);
        int_move_front_y = setInterval('move_y()',10);
    }

// start move x
    function move_x()
    {
        
        if (i_x <= z_x)
        {
            i_x += speed;
            document.getElementById('pic').style.left= i_x+"px";
        }
        if (i_x > z_x)
        {
            clearInterval(int_move_front_x);
            int_move_back_x = setInterval('move_x_back',10);
            alert('back x start');
        }
    }

// start move x back
    function move_x_back()
    {
        if (i_x > 0)
        {
            i_x += speed_back;
            document.getElementById('pic').style.left= i_x+"px";
        }
        if (i_x <= 0)
        {
            clearInterval(int_move_back_x);
            int_move_front_x = setInterval('move_x',10)
        }
    }

// start move y
    function move_y()
    {
        
        if (i_y <= z_y)
        {
            i_y += speed;
            document.getElementById('pic').style.top= i_y+"px";
        }
        if (i_y > z_y)
        {
            clearInterval(int_move_front_y);
            int_move_back_y = setInterval('move_y_back',10);
            alert('back y start');
        }
    }

// start move y back
    function move_y_back()
    {
        if (i_y > 0)
        {
            i_y += speed_back;
            document.getElementById('pic').style.top= i_y+"px";
        }
        if (i_y <= 0)
        {
            clearInterval(int_move_back_y);
            int_move_front_y = setInterval('move_y',10)
        }
    }
  //-->
  </script>

קוד HTML
קוד:
<body onload="start_move();">

  <img id="pic" src="ball.jpg" width="214" height="217" alt="" />
 </body>
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #2  
ישן 19-03-2010, 10:51
  משתמש זכר dorM dorM אינו מחובר  
מנהל
  
חבר מתאריך: 26.07.08
הודעות: 6,473
בתגובה להודעה מספר 1 שנכתבה על ידי shushu304 שמתחילה ב "עזרה בקוד JS עם אינטרבלים"
שמתי לב שאתה משתמש ברוחב וגובה המסך במקום רוחב וגובה המסמך. המסך גדול מהמסך ויכול להיות שכאן הבעיה, ולא בלוגיקת הקוד. (לכן לא קראתי את שאר הקוד)

תראה:
W3C DOM Compatibility - CSS Object Model View @ quirksmode.org
ותחפש שם clientWidth ו-clientHeight
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #3  
ישן 19-03-2010, 12:33
  shushu304 shushu304 אינו מחובר  
 
חבר מתאריך: 19.10.08
הודעות: 69
בתגובה להודעה מספר 2 שנכתבה על ידי dorM שמתחילה ב "שמתי לב שאתה משתמש ברוחב..."
שני דברים:

1) בוא נגיד שגם אם לקחתי את גובה ורוחב המסך עצמו ולא חלון הדפדפן... זה דבר אחד שיכול לפתור את הבעיה שבעצם הכדור ממשיך ויוצר סקרולבר (למרות שזה מוזר כי רוחב המסך ורוחב הדפדפן אמור להיות אותו הדבר..)

2) לא חושב שזה קשור בכלל לבעיה השניה שהיא בעצם למה הכדור לא חוזר חזרה, החצי הראשון בטוח עובד ואתה יכול לראות ששמתי alert ב-IF השני שבעצם פסיק את האינטרבל של ההלוך ומפעיל אינטרבל חדש של החזרה, והאלרט עובד דבר שאומר לנו שהוא כן מגיע לחלק הזה של הקוד.
ומשם אני כבר לא יודע למה הפונקציות של החזרה לא עובדות..
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #4  
ישן 19-03-2010, 14:17
  משתמש זכר dorM dorM אינו מחובר  
מנהל
  
חבר מתאריך: 26.07.08
הודעות: 6,473
בתגובה להודעה מספר 3 שנכתבה על ידי shushu304 שמתחילה ב "שני דברים: 1) בוא נגיד שגם..."
ציטוט:
במקור נכתב על ידי shushu304
2) לא חושב שזה קשור בכלל לבעיה השניה שהיא בעצם למה הכדור לא חוזר חזרה, החצי הראשון בטוח עובד ואתה יכול לראות ששמתי alert ב-IF השני שבעצם פסיק את האינטרבל של ההלוך ומפעיל אינטרבל חדש של החזרה, והאלרט עובד דבר שאומר לנו שהוא כן מגיע לחלק הזה של הקוד.
ומשם אני כבר לא יודע למה הפונקציות של החזרה לא עובדות..

אני מנחש שזה קורה בגלל שלא קראת לפונקציה, אלא רק ציינת את השם שלה:
קוד:
int_move_back_x = setInterval('move_x_back',10);

צריך לשנות ל:
קוד:
int_move_back_x = setInterval('move_x_back()',10);


קורה לטובים ביותר

אגב, מספיק להשתמש ב- int_move_x ו- int_move_y, בלי ציון forward או back. יענו במקום להגדיר:
קוד:
    var int_move_front_x;
    var int_move_back_x;
    var int_move_front_y;
    var int_move_back_y;

תוכל להגדיר:
קוד:
    var int_move_x;
    var int_move_y;
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #5  
ישן 19-03-2010, 16:39
  shushu304 shushu304 אינו מחובר  
 
חבר מתאריך: 19.10.08
הודעות: 69
בתגובה להודעה מספר 4 שנכתבה על ידי dorM שמתחילה ב "[QUOTE=shushu304]2) לא חושב..."
חחחח ואי אני לא מאמין בסוף זה היה הסוגריים..
תודה

וכן אנייודע בקשר להגדרה של ה-int וכל זה שלא חייב בהתחלה את ה- var

עכשיו נשאר לי לגלות למה זה ממשיך יותר מרוחב וגובה החלון ויוצר סקרולבר, יש לך רעיון בקשר לזה?
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #6  
ישן 20-03-2010, 18:29
  משתמש זכר dorM dorM אינו מחובר  
מנהל
  
חבר מתאריך: 26.07.08
הודעות: 6,473
בתגובה להודעה מספר 5 שנכתבה על ידי shushu304 שמתחילה ב "חחחח ואי אני לא מאמין בסוף זה..."
ציטוט:
במקור נכתב על ידי shushu304
וכן אנייודע בקשר להגדרה של ה-int וכל זה שלא חייב בהתחלה את ה- var

ההפך - לפעמים יש צורך ב-var, תלוי בצורך שלך. תקרא משתנה - איפה מוגדר ואיפה לא? ; או: Variable scope
מה שהתכוונתי בהתחלה זה שאתה מגדיר ארבעה משתנים שמקבלים ערך המוחזר מפונקציית setInterval, אבל למעשה מספיק לך להשתמש בשני משתנים. ככה שלדוגמא, במקום לכתוב:
קוד:
// first function - start all
    function start_move()
    {
        int_move_front_x = setInterval('move_x()',10);
        int_move_front_y = setInterval('move_y()',10);
    }

// start move x
    function move_x()
    {
        
        if (i_x <= z_x)
        {
            i_x += speed;
            document.getElementById('pic').style.left= i_x+"px";
        }
        if (i_x > z_x)
        {
            clearInterval(int_move_front_x);
            int_move_back_x = setInterval('move_x_back',10);
            alert('back x start');
        }
    }


היית כותב:
קוד:
// first function - start all
    function start_move()
    {
        int_move_x = setInterval('move_x()',10); // line changed
        int_move_y = setInterval('move_y()',10); // line changed
    }

// start move x
    function move_x()
    {
        
        if (i_x <= z_x)
        {
            i_x += speed;
            document.getElementById('pic').style.left= i_x+"px";
        }
        if (i_x > z_x)
        {
            clearInterval(int_move_x); // line changed
            int_move_x = setInterval('move_x_back()',10); // line changed
            alert('back x start');
        }
    }

התייחסתי בעיקר לציר x, והדגשתי את השורות ששיניתי עם ההערה "line changed".
סה"כ רציתי לציין ששניים מהמשתנים מיותרים (זה בסדר להשתמש בהם, אבל אין צורך).

ציטוט:
במקור נכתב על ידי shushu304
עכשיו נשאר לי לגלות למה זה ממשיך יותר מרוחב וגובה החלון ויוצר סקרולבר, יש לך רעיון בקשר לזה?

כן - אני חושב שזה בגלל שלא התחשבת בגודל של האלמנט. בקוד שלך התייחסת לאלמנט בתור נקודה, ולא בתור אלמנט עם מימדים של אורך ורוחב. תוסיף לקוד התחשבות ברוחבו וגובהו. כדי לקבל ערך נכון של מימדי האלמנט, תסתכל בטבלאות התאימות שבאתר quirksmode.org (זה טוב להכיר את כולם).
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #7  
ישן 20-03-2010, 22:05
  shushu304 shushu304 אינו מחובר  
 
חבר מתאריך: 19.10.08
הודעות: 69
בתגובה להודעה מספר 6 שנכתבה על ידי dorM שמתחילה ב "[QUOTE=shushu304]וכן אנייודע..."
דוקא ניסיתי להתייחס לאלמנט, ובבדיקות האם הוא הגיע לגובה ורוחב החלון עשיתי פחות רוחב וגובה התמונה, אבל עדין זה לא הגיע למצב שרציתי..
אני אבדוק כבר מחר את ששלחת לי, תודה על הקישור
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #8  
ישן 20-03-2010, 23:33
  משתמש זכר dorM dorM אינו מחובר  
מנהל
  
חבר מתאריך: 26.07.08
הודעות: 6,473
בתגובה להודעה מספר 7 שנכתבה על ידי shushu304 שמתחילה ב "דוקא ניסיתי להתייחס לאלמנט,..."
ציטוט:
במקור נכתב על ידי shushu304
דוקא ניסיתי להתייחס לאלמנט, ובבדיקות האם הוא הגיע לגובה ורוחב החלון עשיתי פחות רוחב וגובה התמונה, אבל עדין זה לא הגיע למצב שרציתי..

אתה מתייחס לקוד שפרסמת כאן? לא רואים. הדבר היחידי שהתייחסת לאלמנט בקוד שפרסמת כאן, זה מיקום ה-X,Y שלו במסמך. מיקום ה-X,Y של אלמנט נוגע לפינה השמאלית-עליונה של האלמנט.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #9  
ישן 21-03-2010, 07:31
  shushu304 shushu304 אינו מחובר  
 
חבר מתאריך: 19.10.08
הודעות: 69
בתגובה להודעה מספר 8 שנכתבה על ידי dorM שמתחילה ב "[QUOTE=shushu304]דוקא ניסיתי..."
בקוד שפה לא רואים את ההתייחסות, לפני שפרסמתי את הקוד פה הוספתי את החלק של X ו-Y פחות האלמנט, וראיתי שזה לא עוזר אז החלטתי לפרסם את הקוד בלי ההתייסות לאלמנט.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #10  
ישן 21-03-2010, 19:36
  משתמש זכר dorM dorM אינו מחובר  
מנהל
  
חבר מתאריך: 26.07.08
הודעות: 6,473
בתגובה להודעה מספר 9 שנכתבה על ידי shushu304 שמתחילה ב "בקוד שפה לא רואים את..."
ציטוט:
במקור נכתב על ידי shushu304
בקוד שפה לא רואים את ההתייחסות, לפני שפרסמתי את הקוד פה הוספתי את החלק של X ו-Y פחות האלמנט, וראיתי שזה לא עוזר אז החלטתי לפרסם את הקוד בלי ההתייסות לאלמנט.

תוכל להעתיק לכאן את הקוד הכי עדכני, הכולל התייחסות למימדי האלמנט?
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #11  
ישן 22-03-2010, 12:29
  shushu304 shushu304 אינו מחובר  
 
חבר מתאריך: 19.10.08
הודעות: 69
בתגובה להודעה מספר 10 שנכתבה על ידי dorM שמתחילה ב "[QUOTE=shushu304]בקוד שפה לא..."
תיקנתי את הקוד והפעם השתמשתי בפקודה אחרת בשביל למצור את רוחב וגובה המסך, בנוסף התייחסתי לגודל האלמנט ועכשיו זה יוצא אחלה עכשיו הבעיה היחידה היא שזה לא עובד באקספלורר.

קוד:
   
var z_x = window.innerWidth-214;
	var z_y = window.innerHeight-217;


לא הצלחתי להבין בקישור שהבאת לי איזה פקודה מתאימה לכל הדפדפנים, כנראה שלאקספלורר צריך קוד אחר כדי למצוא את רוחב וגובה המסמך.

אפשר לראות את מה שיצא בקישור הבא:
http://www.nwo.co.il/webmaster/ball_interval/
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #12  
ישן 22-03-2010, 13:50
  משתמש זכר dorM dorM אינו מחובר  
מנהל
  
חבר מתאריך: 26.07.08
הודעות: 6,473
בתגובה להודעה מספר 11 שנכתבה על ידי shushu304 שמתחילה ב "תיקנתי את הקוד והפעם השתמשתי..."
ניסית מה שכתבתי בהודעה הראשונה ?
ראה: Document Size.html
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
תגובה
« לאשכול הקודם | לאשכול הבא »

כלי אשכול חפש באשכול זה
חפש באשכול זה:

חיפוש מתקדם
מצבי תצוגה דרג אשכול זה
מצב כלאיים מצב כלאיים
דרג אשכול זה:

מזער את תיבת המידע אפשרויות משלוח הודעות
אתה לא יכול לפתוח אשכולות חדשים
אתה לא יכול להגיב לאשכולות
אתה לא יכול לצרף קבצים
אתה לא יכול לערוך את ההודעות שלך
קוד vB פעיל
קוד [IMG] פעיל
קוד HTML כבוי
מעבר לפורום



כל הזמנים המוצגים בדף זה הם לפי איזור זמן GMT +2. השעה כעת היא 03:17

הדף נוצר ב 0.07 שניות עם 12 שאילתות
צור קשר - Fresh - למעלה

הפורום מבוסס על vBulletin, גירסא 3.0.6
כל הזכויות לתוכנת הפורומים שמורות © 2024 - 2000 לחברת Jelsoft Enterprises.
כל הזכויות שמורות ל Fresh.co.il ©

צור קשר | תקנון האתר