Countdown bar

[rafinos]

Γεια σας παιδιά!

 

Προσπαθώ να κάνω μια countdown μπάρα που θα μειώνεται με ωραίο τρόπο, αλλά δεν μπορώ να το καταφέρω με τίποτα.

 

Το καλύτερο αποτέλεσμα που έχω καταφέρει είναι με τον παρακάτω κώδικα, αλλά γίνεται animate ανά δευτερόλεπτο μόνο (προσπάθησα να το κάνω ανά 10 ms αλλά δεν τα κατάφερα).

//Κάθε πρώτη φορά που τρέχει η συνάρτηση το timer είναι ίσο με 100
function countdown(){

		//Χρώμα στη μπάρα χρόνου ανάλογα με το timer
		if(timer > 60){
			$('#timer').css('background-color', '#336600');
		}else if(timer < 60 && timer > 40){
			$('#timer').css('background-color', '#00CC00');
		}else if(timer < 40 && timer > 20){
			$('#timer').css('background-color', '#FF9933');
		}else if(timer < 20 && timer > 10){
			$('#timer').css('background-color', '#FF6600');
		}else{
			$('#timer').css('background-color', '#FF0000');
		}



		//$('#timer').css('width',timer + '%');
		$('#timer').animate({width: timer+'%'});
		if(timer<=0){
			if(game_type === "marathon"){
				lives--;
			}
			$('#time_is_up').show();
			clearInterval(counter);
			do_it_again = setInterval(doitagain,2000); //αυτό μην σας νοιάζει απλά επαναλαμβάνει τη διαδικασία
			return;
		}
		//Τι είδος παιχνιδιού είναι Marathon ή Time trial
		if(game_type === "marathon"){
			if(c_answers >= 50){
	            timer -= (100/10); //10 δευτερόλεπτα
	        }else{
	        	timer -= (100/(15-(parseInt(c_answers)/10))); //15 δευτερόλεπτα και μειώνεται κατά ένα μέχρι να φτάσει τα 10 αυτό γίνεται ανάλογα με την τιμή που έχει το c_answers που αυξάνεται κατά ένα κάθε φορά
	        }
		}else if(game_type=="time_trial"){
		    timer -= (100/120); //120 δευτερόλεπτα
		}
	}

Και κάπου πιο πάνω τρέχω ένα 

counter = setInterval(countdown, 1000);

[egoeimai1]

Για να παρεις δεκατα δευτερολεπτου χρησιμοποιησε το ακεραιο υπολοιπο διαιρεσης (%)

[rafinos]

Για να παρεις δεκατα δευτερολεπτου χρησιμοποιησε το ακεραιο υπολοιπο διαιρεσης (%)

Μα αυτό που κάνει η διαίρεση είναι απλά να χωρίσει σε ίσα τμήματα τη μπάρα (timer) ώστε να αφαιρείται ένα κομμάτι κάθε δευτερόλεπτο (interval=1000).

 

Δοκίμασα να κάνω το εξής 

timer -= (100/((15-(parseInt(c_answers)/10)) * 100));

και το Interval = 10; 

 

Αλλά τελείωνε απίστευτα γρήγορα.

 

Εμένα με ενδιαφέρει να τρέχει σε 10ms, αλλά να διαρκεί 15 και (ή) 120 δευτερόλεπτα μέχρι να μηδενιστή η μπάρα. 

Επεξ/σία 17 Μαρτίου 2017 από rafinos

[rafinos]

Τελικά το έκανα...

timer -= (100/((15-(parseInt(c_answers)/10)) * 100));

και άλλαξα το animate με 

$('#timer').css('width',timer + '%');

Λογικά φταίει ότι το animate χρειάζεται έξτρα χρόνο (ακόμα και ίδιο να έβαζα... 10ms δηλαδή πάλι δεν δούλευε τελείως σωστά).