טיימר ב jQuery.

[CSS]

טיימר בשפת jQuery
במדריך הזה נכיר 2 סוגים של טיימרים - האחד זה טיימר רגיל של ספירת שניות, והשני הוא טיימר לאחור (כמו למשל באתרי הורדות).

אז נתחיל בטיימר הראשון.
איך טיימר בנוי? הטיימר בנוי כך שכל שנייה צריך להגדיל את המספר הקודם.
איך נעשה את זה? בקלילות רבה.
בתוך ה HTML ניצור דיב עם id כ count.

<div id="count">1</div>

קודם כל, נכין משתנה אשר יכיל בתוכו את השניות. כברירת מחדל הוא יהיה כ - 1.

var count = 1;

לאחר מכן נכין setInterval אשר יבצע משהו מסויים כל X מילישניות.
במקרה שלנו אנחנו רוצים להגדיל את המספר ב - 1 כל 1000 מילישניות (1000 מילישניות = שנייה).

setInterval(function() {
},1000);

מה שהקוד עושה בעצם זה כל 1000 מילישניות זה יבצע את כל מה שרשום בתוך הפונקציה (אפשר לעשות קריאה לפונקציה, או אפשר לעשות פונקציה ישירות).

בתוך הפונקציה נגדיל את המשתנה count ב - 1, ונשנה את הערך של הדיב שלנו לערך של ה count.

count++;
$("#count").text(count);

זהו, סיימנו, עכשיו יש לכם טיימר.
הקוד המלא:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var count = 1;
setInterval(function() {
count++;
$("#count").text(count);
},1000);
});
</script>

<div id="count">1</div>

הטיימר השני הוא טיימר הפוך - טיימר לאחור.
הוא עובד אותו דבר, רק במקום להעלות את count ב - 1, אנחנו נוריד אותו ב - 1.

count--;

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

var fc = setInterval(function() {

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

if(count == 1) {
alert("Done!"); clearInterval(fc); 
}

את השורה הזאת נוסיף לפני ה count--.
עכשיו ברגע שזה יסיים לספור 45 שניות, זה יקפיץ הודעה.
הקוד המלא:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var count = 45;
var fc = setInterval(function() {
if(count == 1) {
alert("Done!"); clearInterval(fc);
}
count--;
$("#count").text(count);
},1000);
});
</script>

<div id="count">45</div>

שאלות, הערות, בקשות יתקבלו בברכה!

[-Smoxer-]

מדריך נחמד מאוד. תודה רבה.