JavaScript – sada příkladů 7

Příklad 7.1

Napište skript, který bude do textového pole formuláře zobrazovat aktuální čas.

<HEAD>
  <SCRIPT>
    function zobrazCas1() {
      dnes = new Date();
      hod = dnes.getHours();
      min = dnes.getMinutes();
      sec = dnes.getSeconds();
      if (min < 10)
        min = "0" + min;
      if (sec < 10)
        sec = "0" + sec;
      document.hodiny1.vystup.value = hod + ":" + min + ":" + sec;
      setTimeout("zobrazCas1()", 1000);
    }
  </SCRIPT>
</HEAD>

<BODY onload="zobrazCas1()">
  <FORM name="hodiny1">
    <INPUT type="text" name="vystup" size="8" readonly>
  </FORM>
</BODY>

Příklad 7.2

Napište skript, který bude do textového pole formuláře zobrazovat aktuální čas ve formátu AM/PM.

<HEAD>
  <SCRIPT>
    function zobrazCasAMPM() {
      dnes = new Date();
      hod = dnes.getHours();
      min = dnes.getMinutes();
      sec = dnes.getSeconds();
      if (hod <= 12)
        dodatek = " AM";
      else {
        dodatek = " PM";
        hod = hod - 12;
      }
      if (min < 10)
        min = "0" + min;
      if (sec < 10)
        sec = "0" + sec;
      document.hodiny2.vystup.value = hod + ":" + min + ":" + sec + dodatek;
      setTimeout("zobrazCasAMPM()", 1000);
    }
  </SCRIPT>
</HEAD>

<BODY onload="zobrazCasAMPM()">
  <FORM name="hodiny2">
    <INPUT type="text" name="vystup" size="10" readonly>
  </FORM>
</BODY>

Pokuste se tento skript modifikovat tak, aby měl uživatel možnost vybrat si mezi 12 a 24hodinovým zobrazením času. Volbu řešte prvky typu radio button.

Příklad 7.3

Napište skript, který bude do titulkového pruhu okna prohlížeče zobrazovat aktuální čas.

<HEAD>
  <SCRIPT>
    function zobrazCasTit() {
      dnes = new Date();
      hod = dnes.getHours();
      min = dnes.getMinutes();
      sec = dnes.getSeconds();
      if (min < 10)
        min = "0" + min;
      if (sec < 10)
        sec = "0" + sec;
      document.title = hod + ":" + min + ":" + sec;
      setTimeout("zobrazCasTit()", 1000);
    }
  </SCRIPT>
</HEAD>

<BODY onload="zobrazCasTit()">
  Podívejte se do titulkového pruhu.
</BODY>

Vyzkoušejte si v novém okně.

Příklad 7.4

Předpokládejme, že ve složce images, která je podsložkou aktuální složky, máme uložen obrázek micek.gif. Následující skript provádí jednoduchou ukázku animace – míček odrážející se od vniřních okrajů okna. Při experimentování si nezapomeňte uložit tento obrázek (micek.gif).

<HTML>
<HEAD>
<TITLE>Létající míček</TITLE>
<SCRIPT>
  var poziceX, poziceY;
  var sirka, vyska;
  var Woffset, Hoffset;
  var interval;
  var krok = 1;
  var prodleva = 20;
  var smerY = false;      // false = nahoru, true = dolu
  var smerX = false;      // false = doleva, true = doprava
  var pauza = true;

  function zmenPozici() {
    sirka = document.body.clientWidth;
    vyska = document.body.clientHeight;
    if (smerX)
      poziceX = poziceX + krok;
    else
      poziceX = poziceX - krok;
    if (poziceX < 0) {
      smerX = true;
      poziceX = 0;
    }
    if (poziceX >= (sirka - Woffset)) {
      smerX = false;
      poziceX = (sirka - Woffset);
    }
    if (smerY)
      poziceY = poziceY + krok;
    else
      poziceY = poziceY - krok;
    if (poziceY < 0) {
      smerY = true;
      poziceY = 0;
    }
    if (poziceY >= (vyska - Hoffset)) {
      smerY = false;
      poziceY = (vyska - Hoffset);
    }
    document.all.obrazek.style.left = poziceX;
    document.all.obrazek.style.top = poziceY;
  }

  function start() {
    poziceX = 0;
    poziceY = 0;
    Hoffset = document.all.obrazek.offsetHeight;
    Woffset = document.all.obrazek.offsetWidth;
    document.all.obrazek.style.visibility = "visible";
    interval = setInterval("zmenPozici()", prodleva);
  }

  function kliknuti() {
    if (pauza) {
      clearInterval(interval);
      pauza = false;
    }
    else {
      interval = setInterval("zmenPozici()", prodleva);
      pauza = true;
    }
  }
</SCRIPT>
</HEAD>

<BODY onLoad="start()">
<IMG src="images/micek.gif" id="obrazek"
     style="position: absolute" onMouseDown="kliknuti();">
<H1>Létající míček</H1>
</BODY>
</HTML>

Vyzkoušejte si v novém okně.

Vysvětlete význam všech proměnných použitých ve skriptu. Proč se vždy na začátku funkce zmenPozici zjišťuje šířka a výška vnitřní části okna? Nestačilo by tyto údaje zjistit jen jednou (např. hned po načtení stránky)? Pokuste se tento skript modifikovat tak, aby se míček po načtení stránky zobrazil přesně uprostřed okna, jeho počáteční pohyb nastal v náhodném směru a aby bylo možné rychlost pohybu míčku měnit (např. vstupem dat z formuláře).

Jak si vyzkoušet výše uvedené příklady?

Označte myší zdrojový text libovolné ukázky.
Vybraný text zkopírujte do clipboardu.
Klikněte myší do textového pole uvedeného níže a text sem z clipboardu vložte.
Zdrojový text můžete libovolně upravit.
Poté klikněte na tlačítko Ukázat. V okně náhledu se vám zobrazí dokument, jehož zdrojový text byl zapsán v textovém poli.
Pokud je třeba, aby se dokument otevřel v novém okně, stačí kliknout na tlačítko Ukázat v novém okně.
Tlačítkem Vybrat vše se označí veškerý text zapsaný v textovém poli.
Tlačítkem Smazat můžete obsah celého textového pole vymazat.

Náhled: