Kirjautuminen

Haku

Tehtävät

Keskustelu: Koodit: JavaScript: Aakkostesteri

Tumettaja [09.02.2009 18:24:23]

#

Yksinkertainen koodivinkki javascriptillä toteutetusta aakkostesteristä, jossa nimensä mukaisesti testataan kuinka nopeasti käyttäjä saa painettua suomalaiset aakkoset oikeassa järjestyksessä.

<html>
 <head>
 <title>Aakkostesteri</title>
 <script type="text/javascript">
 //taulukko aakkosista
 var aakkoset = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s",
 "t","u","v","w","x","y","z","å","ä","ö"];

 //seuraavaksi painettavan kirjaimen indeksi taulukosta
 var indeksi = 0;

 //kuluneet millisekunnit ja sekunnit
 var millisek = 0;
 var sekunnit = 0;

 //muuttuja joka kontrolloi testerin alkamista
 var aloita = false;

 function ajastin () {
     //div-elementit joissa kirjain ja kulunut aika näytetään
     var aika = document.getElementById("aika");
     var kirjain = document.getElementById("kirjain");
     //korotetaan millisekuntteja yhdellä
     millisek += 1;
     //jos yksi sekuntti on kulunut
     if (millisek == 100) {
        //korotetaan sekuntteja yhdellä
        sekunnit += 1;
        //nollataan millisekunnit
        millisek = 0;
    }
    //päivitetään nykyisen kirjaimen ja kuluneen ajan näkymää
    kirjain.innerHTML = aakkoset[indeksi];
    //jos testeriä ei ole vielä aloitettu
    if (!aloita) {
        aika.innerHTML = "Paina ensimmäistä kirjainta aloittaaksesi.";
    } else {
        //muuten näytetään kulunut aika
        aika.innerHTML = "<b>" + sekunnit + "</b>:" + millisek;
    }
    setTimeout(ajastin,1);
 }

 function painallus (e) {
     //otetaan talteen painettu näppäin
    if (e.keyCode) keycode=e.keyCode;
    else keycode=e.which;
    np = String.fromCharCode(keycode);
    //jos testeriä ei ole vielä aloitettu
    if (!aloita) {
        aloita = true;
    }
    //jos painetaan viimeistä kirjainta
    if (indeksi == 28 && np == "ö") {
         //näytetään tulos
        alert("Tuloksesi oli " + sekunnit + ":" + millisek + " sekunttia!");
        //päivitetään ikkuna jotta testeri voidaan aloittaa uudelleen
        window.location.reload();
    }
    //jos painettu näppäin on sama mitä seuraavaksi pitää painaa
    if (np == aakkoset[indeksi]) {
            //siirrytään seuraavaan kirjaimeen
            indeksi += 1;
    }
 }
 </script>
 </head>
 <body onload="ajastin()" onkeypress="painallus(event)">

 <div id="kirjain" style="font-size:30px;"></div>
 <div id="aika"></div>

 </body>
</html>

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta