Avatar billede shjorth Nybegynder
07. marts 2011 - 18:15 Der er 14 kommentarer og
1 løsning

Javascript tæller

Hejsa.

Jeg bruger flg til at lave en countdown med: http://keith-wood.name/countdown.html

Jeg skal nu bruge en "countup" som kan justeres således at den ligger 1 til et tal hvert 3-20 sekund. Altså så jeg i funktionen kan vælge hvor ofte der skal ligges et tal til.

Håber der er nogen der keder noget til det :)

Takker
Avatar billede shjorth Nybegynder
07. marts 2011 - 18:27 #1
Har forsøgt lidt med denne: http://stackoverflow.com/questions/2540277/jquery-counter-to-count-up-to-a-target-number

Men når jeg sætter "speed" til f.eks 1,000 så kører den meget meget hurtigt. Jeg skal helt op på 2,000,000 for at finde noget der minder om 1 sek
Avatar billede olebole Juniormester
07. marts 2011 - 19:33 #2
<ole>

Det er der ingen grund til at slæbe store, tunge og tvivlsomme JS-libraries igang for at løse. Lidt ganske alm. JS og DOM kan gøre det  =)


<script type="text/javascript">
function setEvent(oObj, sEvnt, fn) {
    if (oObj.addEvenListener) oObj.addEvenListener(sEvnt, fn, false);
    else if (oObj.attachEvent) oObj.attachEvent("on"+sEvnt, fn);
    else oObj["on"+sEvnt] = fn;
}
var oCounter = null;
var nCount = 1; // Antal sekuner mellem hver optælling
function initCounter() {
    oCounter = document.getElementById("fooBar");
    setInterval("countUp()", nCount*1000);
}
function countUp() {
    oCounter.firstChild.nodeValue = Number(oCounter.firstChild.nodeValue) + 1;
}

setEvent(window, "load", initCounter);
</script>

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



/mvh
</bole>
Avatar billede olebole Juniormester
07. marts 2011 - 19:34 #3
Ups ... en 'sdavø fajl'  =)

if (oObj.addEventListener) oObj.addEventListener(sEvnt, fn, false);
Avatar billede shjorth Nybegynder
07. marts 2011 - 19:42 #4
Nu er jeg komplet retard når det kommer til JS.

Hvorledes for jeg alt det der banket ned i en funktion så jeg blot kan skrive:

startTimer(persec,startFra,div)

Håber du kan hjælpe :)
Avatar billede olebole Juniormester
07. marts 2011 - 20:23 #5
Nej, jeg har jo ingen anelse om, hvordan det skal bruges - men hvorfor dog også stoppe det ned i én funktion?  =)
Avatar billede shjorth Nybegynder
07. marts 2011 - 20:27 #6
Jo ser du.

Grunden til jeg vil have det i een funktion er fordi jeg har en php while (fra databasen), som hver skal have denne countup.
Men da siden er loaded med AJAX, benytter jeg mig af eval().

Så det skulle helst se nogenlunde således ud:
[code]
<div id='runme' style='display:none;'>
<?
for... {
echo "startTimer(".$perSec[$i].",".$start[$i].","o".$i.");";
}
</div>
[/code]
Håber det giver lidt bedre mining nu
Avatar billede olebole Juniormester
07. marts 2011 - 20:45 #7
Jamen, hele idéen med Ajax er jo at sende rå data mellem browser og server. Ved Ajax formateres data som JSON eller XML på serveren. Herefter sendes de til browseren, som står for al HTML formatering og indsættelse i sidens DOM træ.

Det med at HTML formatere data på serveren er noget skod, som stammer fra et hav af inkompetente tutorial forfatteres misforståelse af, hvad Ajax i virkeligheden er. Den slags løsninger holder kun i små hobby løsninger - ikke når der kommer belastning på serveren. De slider desuden unødigt på de kræfter, man deler med de øvrige sites på webhotellet
Avatar billede shjorth Nybegynder
07. marts 2011 - 20:57 #8
Jo, det har du da sikkert ret i.
Men det er nu engang sådan det er lavet, når jeg en dag får bygget kompetencer op, så kan det skrives om :)

Men kunne du lokkes til at hjælpe mig med den funktion ?

Takker
Avatar billede olebole Juniormester
07. marts 2011 - 21:05 #9
Nej, det må du nok selv gøre  =)
Avatar billede shjorth Nybegynder
07. marts 2011 - 21:07 #10
Ingen hints som kan hjælpe mig på sporet ?
Avatar billede shjorth Nybegynder
08. marts 2011 - 13:40 #11
Benyttede mig af følgende:

[kode]
function initCounter(cont,start,end,speed) {
    document.getElementById(cont).innerHTML=start;
    eval("mint"+cont+" = setInterval(function(){countUp(cont,start,end)},speed)");
}
function countUp(cont,start,end) {
        if(document.getElementById(cont).innerHTML==end) { eval("clearInterval(mint"+cont+");"); } else {
        document.getElementById(cont).innerHTML = Number(document.getElementById(cont).innerHTML)+1; }
}
[/kode]
Avatar billede olebole Juniormester
08. marts 2011 - 15:50 #12
eval er uden sammenligning den aller tungeste funktion i JS, så den bør man undgå, hvor det overhovedet er muligt.

Umiddelbart ser det ud, somom du bruger den for at kunne konkatinere strenge - og bruge resultatet som variabel. Det kan heldigvis løses på en anden måde:


var foo = "Noget";
window[foo+"Bar"] = " helt andet";
alert(fooBar);  // Returnerer 'Noget helt andet'



Her udnyttes det, at alle et dokuments variabler kan findes som properties på window objektet  ;o)
Avatar billede olebole Juniormester
08. marts 2011 - 15:56 #13
*LoL* skide godt, olebole! Det var et rigtig dårligt eksempel  :D


var bla = "foo";
window[bla+"Bar"] = "Noget andet";
alert(fooBar)

Avatar billede shjorth Nybegynder
08. marts 2011 - 21:36 #14
Ja, det forstår jeg ikke meget af, men går ikke ud fra du vil uddybe det alligevel.
Avatar billede olebole Juniormester
08. marts 2011 - 23:02 #15
Alle variabler i et dokument ligger som properties på window objektet. Det betyder, at du kan hente enhver variabel på window objektet:


var foo = "noget";
alert(window.foo) // Returnerer 'noget'



Da man i JavaScript kan tilgå et objekts properties med både dot-notation og array-notation, kan vi prøve at sætte en variabel ved at sætte den med array-notation på window objektet:


window["bar"] = "noget andet";
alert(bar) // Returnerer 'noget andet'



Jeg prøver nu lige at kommentere eksemplet fra forrige indlæg:


// Vi definerer variablen 'bla' og sætter dens værdi til 'foo'
var bla = "foo";

// Vi bruger array-notation på window objektet, da det giver
// mulighed for at samle en variabel og en streng.
// Variablen indeholder 'foo' og strengen 'Bar' = 'fooBar'
window[bla+"Bar"] = "Noget andet";

// Her alert'er vi den nye variabel 'fooBar'
alert(fooBar) // Returnerer 'Noget andet'



Hvis du vil vide mere om arrays og objects i JS, kan jeg anbefale, du lige læser denne her, jeg skrev for mange år siden (men den holder vist stadig nogenlunde):
    http://www.eksperten.dk/guide/227

Hvis man ville drive det ud i vanvittige eksempler, kunne man skrive flg. kode, der læser indholdet af 'myDiv' og skifter alle tal ud med 'X':


var s = window["document"]["getElementById"]("myDiv").innerHTML["replace"](/\d/g, "X");
alert(s);

Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester