HTML + JS Basic demos

23 בנובמבר 2014

אין תגובות

בהמשך לפוסטים אודות קוד למתחילים בעולם ה – WEB, הפעם נרצה לכתוב משהו דומה לפעם הקודמת.

נרצה להציג תמונה על המסך, ולמשתמש יהיה שני תיבות טקסט, שהוא יוכל לקבוע את המיקום של התמונה על המסך, כמו כן בדיוק כמו בפעם הקודמת, יהיה לחצן של מיקום רנדומלי (רק שהפעם נוודא שאנחנו לא חורגים מגודל המסך) וכמובן לחצן Start שבכל X זמן, תקבל התמונה מיקום רנדומלי אחר, והפעם גם נוסיף Stop כדי שה – interval ידע לעצור.

ראשית, נסתכל על קוד ה – html + css שלנו.

Code Snippet
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #myImg {
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <img src="IMG_1173.jpg" width="150" id="myImg" />

    <input type="number" id="txtLeft" value="100" onchange="changePosition()" />
    <input type="number" id="txtTop" value="100" onchange="changePosition()" />

    <button onclick="random()">Random</button>
    <button onclick="startTimer()">Start</button>
    <button onclick="stopTimer()">Stop</button>
</body>
</html>

 

נעבור על הקוד.

ראשית ב – html יש לנו תמונה (כלשהי) שמוגדר לה id ו – width, בעזרת ה – id אנחנו מגדירים ב – css שמיקום התמונה על המסך יהיה אבסולוטי – כלומר לא לפי ה – flow הרגיל של html,  אלא לפי הגדרות top ו – left, הגדרה כזו יכולה לגרום לתמונה להופיע פיזית על אלמנטים אחרים במסך.

יש לנו שני תיבות טקסט מסוג number (פיצ’ר חדש של html5 – דפדפנים ישנים יציגו תיבות טקסט) שכל אחד מהם נרשם לפונקציה של changePosition (שמייד נכתוב אותה).

יש לנו שלושה לחצנים, אחד להגדיר מספר רנדומלי, השני להתחיל תהליך של interval והשלישי כדי לעצור את ה – interval.

 

והנה הסקריפט של changePosition

Code Snippet
function changePosition() {
    var top = document.getElementById('txtTop').value;
    var left = document.getElementById('txtLeft').value;

    var img = document.getElementById('myImg');

    if (top < window.innerHeight – img.height && top > 0) {
        img.style.top = top + 'px';
    }
    if (left < window.innerWidth – img.width && left > 0) {
        img.style.left = left + 'px';
    }
}

אנחנו מוציאים את המידע משני תיבות הטקסט לתוך משתנים בעזרת document.getElementById, וגישה למאפיין ה – value, לאחר מכן נמצא את התמונה, ונוודא שהערך שיש בתיבות הטקסט אינו קטן מ – 0 ואינו חורג מגבולות המסך (עם הורדה של גודל התמונה – מאחר שכדי לא לצאת מגבולות המסך, עלינו לוודא שצד ימין של התמונה אינו יוצא,).

כעת כל שינוי בתיבות הטקסט, כשהתמונה בגבולות המסך, תזיז את התמונה למקום המתאים.

בשלב הבא נכתוב את פונקצית המספר הרנדומלי.

Code Snippet
function random() {
    var img = document.getElementById('myImg');

    var top = Math.round(Math.random() * (window.innerHeight – img.height));
    var left = Math.round(Math.random() * (window.innerWidth – img.width));

    document.getElementById('txtTop').value = top;
    document.getElementById('txtLeft').value = left;

    changePosition();
}

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

כל מה שנשאר לנו זה להוסיף את הקוד של התחלת timer (שראינו בפעם הקודמת) ועצירתו (שנראה את הקוד עכשיו)

Code Snippet
var intId = null;
function startTimer() {
    intId = setInterval(random, 500);
}

function stopTimer() {
    clearInterval(intId);
}

בפעם הקודמת, ראינו את ההפעלה של ה – interval, אבל לא ראינו את העצירה.

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

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *