Felhasználói eszközök

Eszközök a webhelyen


egyetem:webc2:html5api:f3:forrasanyag

Megoldás forráskódja

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Négyzet választás</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-10-12" />
      <meta name="revised" content="Tóth Péter, 12/10/2012" />
      <meta name="description" content="HTML - Új API-k - Négyzet választás" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
        #idBox1,#idBox2,#idBox3{
           width:100px;
           height:100px;
           background-color:blue;
           margin:0px 50px 0px 0px;
           display:inline-block;
           border:0;
           padding:0;
           outline:0;
           }
      </style>
      <script type="text/javascript">
         <!--
         // OnLoad függvény
         function funcStart(){
            // Lekérdezzük a folyamat elején a kijelölt elem értéket
            var iIdx=new Number(localStorage.getItem("box"));
            // Ellenőrizzük, hogy volt-e megfelelő értéke az oldal frissítése előtt a változóban
            if((iIdx>=1)&&(iIdx<=3)){
               // Beállítjuk a megfelelő színt
               document.getElementById("idBox"+iIdx).style.backgroundColor="red";
               }
            }
         // OnClick lekezelése
         // idx - Megmutatja, hogy melyik index-ű négyzet volt lenyomva
         function funcKlick(idx){
            // Elmentjük háttér adatba a kijelölt téglalap azonosítóját
            localStorage.setItem("box",idx);
            // Újratöltjük a weboldalt;
            location.reload();
            }
         -->
      </script>
   </head>
   <body onload="funcStart()">
      <div id="idBox1" onclick="javascript:funcKlick(1);"></div>
      <div id="idBox2" onclick="javascript:funcKlick(2);"></div>
      <div id="idBox3" onclick="javascript:funcKlick(3);"></div>
   </body>
</html>
egyetem/webc2/html5api/f3/forrasanyag.txt · legutóbbi módosítás: (külső szerkesztés)