login  Naam:   Wachtwoord: 
Registreer je!
 Forum

krachtmetertje (Opgelost)

Offline compudoc - 02/09/2008 15:43
Avatar van compudocPHP beginner soms zie je wel eens in flash / silverlight spelletjes, dat je de kracht voor iets moet bepalen om een actie uit te voeren (het balkje loopt dan sneller van hoog naar laag als je in een hoger level zit).

Nou wil ik dit ook met AJAX of gewoon javascript maken, maar ik wil geen flash o.i.d. gebruiken. Is dit mogelijk of niet?

Als dit mogelijk is zou iemand weten hoe? want ik kom er niet uit.

13 antwoorden

Gesponsorde links
Offline Stijn - 02/09/2008 19:21
Avatar van Stijn PHP expert Gij met je Ajax... Dat is pure javascript hoor. Je moet voor te beginnen een drietal variabelen hebben, snelheid, status en percentage. Je moet een functie aan die het percentage verhoogt over verlaagd. Initieel is de status 'verhogen'. Is hij 100 je percentage dan is je status 'verlagen'. Op het einde van je functie zet je een timeout die de functie terug oproept.

Deze functie kan je dan oproepen via een onclick event. Wanneer de gebruiker op stop klikt dan stopt die timeout. Je kan dit tekstueel eerst goed zetten en dan werken met afbeeldingen.
Offline compudoc - 03/09/2008 07:41
Avatar van compudoc PHP beginner oke, ik ga het vanmiddag proberen (ik moet nu eerst naar school, helaas  )

en hoe moet ik dan een timeout gebruiken? en kan ik daar dan ook instellen hoe vaak het opnieuw moet per seconde / per minuut?
Offline Stijn - 03/09/2008 14:45
Avatar van Stijn PHP expert http://msdn.microsoft.com/en-us/library/ms536753(VS.85).aspx
Offline compudoc - 03/09/2008 17:39 (laatste wijziging 04/09/2008 16:02)
Avatar van compudoc PHP beginner ik ben nu begonnen met een scriptje...
maar hoe moet ik nou optellen met settimeout? want ik krijg het niet voor elkaar dat het scriptje optelt.

edit: optellen is inmiddels gelukt

--------------------------------------------

Oke, ik heb nu dit inelkaar gezet.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. function StartMeter()
  3. {
  4.   StartTime = 0;
  5.   CountDirection = 0; // optellen (0) / aftrekken (1)
  6.   Refresh = 10; // na hoeveel miliseconde weergeven?
  7.  
  8.   KrachtMeter = kMeter(Refresh);
  9. }
  10.  
  11. function kMeter(Refresh)
  12. {
  13.   // optellen of niet?
  14.   if(StartTime > 99 || CountDirection == 1) {
  15.     StartTime = StartTime - 1;
  16.     CountDirection = 1;
  17.  
  18. 	// moet er inmiddels niet opgeteld worden?
  19. 	if(StartTime < 2) {
  20. 	  CountDirection = 0;
  21. 	}
  22.  
  23.   } else {
  24.     StartTime = StartTime + 1;
  25.   }
  26.  
  27.   // teller weergeven
  28.   document.getElementById('KMeter').innerHTML = StartTime;
  29.   KrachtMeter = setTimeout('kMeter()', Refresh);
  30. }
  32.  
  33.  
  34. <div onClick="StartMeter()">Start</div>
  35. <div id="KMeter" onClick="clearTimeout(KrachtMeter)"></div>


maar hoe moet ik nou ipv die cijfers een 'grafisch' balkje weergeven? en hoe kan ik de snelheid van de teller bepalen?
Offline Ontani - 04/09/2008 16:09
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Grafisch balkje door een div met achtergrondkleur of achtergrond afbeelding de breedte of hoogte te geven van het getal.

Snelheid van de teller bepaal je zelf dus al met:
StartTime += 1
of
StartTime -= 1

Als je dit nu vervangt door:
StartTime += Speed * CountDirection

En je gebruikt ipv
CountDirection = 0 of 1
CountDirection = 1 // Teller Telt Omhoog
CountDirection = -1 // Teller Telt Af
Offline compudoc - 06/09/2008 10:42
Avatar van compudoc PHP beginner ik heb nu dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. function StartMeter()
  3. {
  4.   StartTime = 0;
  5.   CountDirection = 1; // optellen (1) / aftellen (-1)
  6.   Refresh = 10; // na hoeveel miliseconde weergeven?
  7.  
  8.   KrachtMeter = kMeter(Refresh);
  9. }
  10.  
  11. function kMeter(Refresh)
  12. {
  13.   // snelheid
  14.   Speed = 3.0;
  15.  
  16.   // optellen of niet?
  17.   if(StartTime > 99 || CountDirection == -1) {
  18. 	CountDirection = -1;
  19. 	StartTime += Speed * CountDirection;
  20.  
  21.     if(StartTime < 2) {
  22. 	  CountDirection = 1;
  23. 	}
  24.  
  25.   } else {
  26. 	StartTime += Speed * CountDirection;
  27.   }
  28.  
  29.   // teller weergeven
  30.   Teller = Math.round(StartTime); 
  31.   tMeter = '<div style="width:' + Teller + 'px;background-color:#990000;"></div>'; 
  32.  
  33.   document.getElementById('KMeter').innerHTML = tMeter;
  34.   KrachtMeter = setTimeout('kMeter()', Refresh);
  35. }
  36. </script>
  37.  
  38.  
  39. <span onclick="StartMeter()">Start</span> | <span onclick="clearTimeout(KrachtMeter);" >Stop</span>
  40. <div id="KMeter"></div>


maar nou heb ik een vraagje over hoe ik nu nadat er op stop is gedrukt, ik het forumulier meteen kan 'submitten', zodat de gebruiker niet de kans heeft / krijgt om opnieuw op 'start' teklikken om een betere score te halen.
Offline Kr4nKz1n - 06/09/2008 11:37
Avatar van Kr4nKz1n Onbekend Sorry maar dit stelt mij teleur compudoc. Ik kom al een aantal jaren hier, soms maanden achter elkaar niet. En een aantal namen blijven bij mij hangen, zoals Joel (doh), vinTage, Ontani, titjes, stijn1989 en nog een paar van die EOS mensen (weet de nicknames niet allemaal), maar jullie vallen wel onder de beste hier op sitemasters.

Ik heb geen aanvulling op je topic, maar het is misschien iets om over na te denken.
Offline compudoc - 07/09/2008 20:26 (laatste wijziging 08/09/2008 08:02)
Avatar van compudoc PHP beginner ik heb inmiddels de oplossing gevonden:
document.forms['formulier_naam'].submit();

voor iedereen die intresse heeft in het scriptje:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. function StartMeter()
  3. {
  4.   StartTime = 0;
  5.   CountDirection = 1; // optellen (1) / aftellen (-1)
  6.   Refresh = 10; // na hoeveel miliseconde weergeven?
  7.  
  8.   KrachtMeter = kMeter(Refresh);
  9. }
  10.  
  11. function kMeter(Refresh)
  12. {
  13.   // snelheid
  14.   Speed = 7.3;
  15.  
  16.   // optellen of niet?
  17.   if(StartTime > 99 || CountDirection == -1) {
  18. 	CountDirection = -1;
  19. 	StartTime += Speed * CountDirection;
  20.  
  21.     if(StartTime < 2) {
  22. 	  CountDirection = 1;
  23. 	}
  24.  
  25.   } else {
  26. 	StartTime += Speed * CountDirection;
  27.   }
  28.  
  29.   // teller weergeven
  30.   Teller = Math.round(StartTime); 
  31.   tMeter = '<div style="width:' + Teller + 'px;height:20px;background-color:#990000;"></div>'; 
  32.   iHidden = '<input name="teller" type="hidden" value="' + Teller + '" />';
  33.  
  34.   document.getElementById('KMeter').innerHTML = tMeter + iHidden;
  35.   KrachtMeter = setTimeout('kMeter()', Refresh);
  36. }
  37.  
  38. function Submit()
  39. {
  40.   // submitten!
  41.   document.forms['test'].submit(); // ['naam van formulier']
  42. }
  43. </script>
  44.  
  45. <form name="test" method="post" action="test2.php">
  46. <span onclick="StartMeter()">Start</span> | <span onclick="clearTimeout(KrachtMeter); Submit()">Stop</span>
  47. <div id="KMeter"></div>
  48. </form>


en iedereen die geholpen heeft, heel erg bedankt!!
Offline djb - 07/09/2008 22:25
Avatar van djb PHP beginner hoi 
Zoiets is altijd handig:)

Alleen jammer dat hij niet in Firefox werkt 
tenminste hier niet (ik draai ubuntu met ff3)
op me laptop werkt hij super in ie 
Offline compudoc - 08/09/2008 08:03
Avatar van compudoc PHP beginner
djb schreef:
hoi 
Zoiets is altijd handig:)

Alleen jammer dat hij niet in Firefox werkt 
tenminste hier niet (ik draai ubuntu met ff3)
op me laptop werkt hij super in ie 


als het goed is werkt het nu wel in firefox.
Bij mij werkt het in iedergeval nu wel.
Offline Ontani - 08/09/2008 09:02
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Ik snap de reactie van Kr4nKz1n niet echt, wat bedoel je hiermee ?
Offline Kr4nKz1n - 08/09/2008 10:54
Avatar van Kr4nKz1n Onbekend Dat ik wel wat meer verwacht had van compudoc.
Offline djb - 08/09/2008 17:22
Avatar van djb PHP beginner
compudoc schreef:
[..quote..]

als het goed is werkt het nu wel in firefox.
Bij mij werkt het in iedergeval nu wel.


aah super bedankt 
Misschien moet je hem hier tusse de scripts zette 

Ik denk egt dat naar dit soort dingen veel vraag naar is 

want je kan het makkelijk aanpassen en je kan het altijd voor iets gebruiken 

super bedankt nogmaals 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s