Zegar w javascript

pytanie zadane 13 października 2017 w JavaScript przez Q7V Gaduła (4,250 p.)

Mam sobie o taki kod napisany w JS, umieściłem go w head.

<script type="text/javascript">
function zegar()
{
  var dzisiaj = new Date();
  var dzien = dzisiaj.getDate();
  var miesiac = dzisiaj.getMonth()+1;
  var rok = dzisiaj.getFullYear();
  var godzina = dzisiaj.getHours();
  var minuty = dzisiaj.getMinutes();
  var sekunda = dzisiaj.getSeconds();
document.getElementById("zegar").innerHTML = +dzien+"/"+miesiac+"/"+rok+" | "+godzina+":"+minuty+":"+sekunda+

//  document.write("<b>"+dzien+"/"+miesiac+"/"+rok+"</b> Godzina <b>"+godzina+":"+minuty+":"+sekunda+"</b>");
  setTimeout("zegar()",1000);
}



</script>

W body mam jakąś tam stronkę, zamiast diva ( tak jak na odcinku ) użyłem znacznika p i dałem mu id zegar i to mi nie działa, co robię źle? :/ Działa gdy umieszczę w htmlu drugi skrypt i w znaczniki <script> wpiszę instrukcję wypisującą, zresztą zapisałem ją sobie w/w funkcji jako komentarz.

komentarz 13 października 2017 przez cyklop123 Bywalec (2,790 p.)

zły argument podajesz do funkcji setTimeout

powinna to być referencja do funkcji

setTimeout(zegar,1000) //bez ()

albo

setTimeout(function(){
    zegar();
},1000) //bez ()

poza tym w złym miejscu wywołujesz setTimeout,

twój sposób będzie co sekundę otwierał nowy timer co da w rezultacie wieeeele timerów

lepiej go wywołać raz przy ładowaniu strony.

nie można tego zrobić zaraz pod kodem funkcji bo wtedy nie załadowany jest jeszcze div o id zegar dlatego istnieje pewne zdarzenie które wykonuje swój kod dopiero po załadowaniu strony i nazywa się ono onLoad
Przykład

window.onload = function(){
setTimeout(function(){
 zegar();
},1000)
}

Mam nadzieję że wytłumaczyłem to dobrze, jak nie będziesz czegoś wiedział to pisz

komentarz 13 października 2017 przez Q7V Gaduła (4,250 p.)

Więc poprawiłem wydaję mi się, że według tego co napisałeś i skleiłem coś takiego.

<script type="text/javascript">
window.onload = function(){
setTimeout(function(){
 zegar();
},1000)
function zegar()
{
  var dzisiaj = new Date();
  var dzien = dzisiaj.getDate();
  var miesiac = dzisiaj.getMonth()+1;
  var rok = dzisiaj.getFullYear();
  var godzina = dzisiaj.getHours();
  var minuty = dzisiaj.getMinutes();
  var sekunda = dzisiaj.getSeconds();
document.getElementById("zegar").innerHTML = +dzien+"/"+miesiac+"/"+rok+" | "+godzina+":"+minuty+":"+sekunda+

//  document.write("<b>"+dzien+"/"+miesiac+"/"+rok+"</b> Godzina <b>"+godzina+":"+minuty+":"+sekunda+"</b>");
}
}


</script>

I na moje rozumowanie to działa tak:

1 - Czekaj aż załaduję się HTML

2 - Gdy się załaduję wykonuj funkcje zegar co 1000ms

Ale nie działa... Moja styczność z JS zaczęła się 40 minut temu, więc proszę o wyrozumiałość. :D

komentarz 13 października 2017 przez shotokan Nałogowiec (39,660 p.)

nie działa, bo najpierw odwołujesz się do funkcji zegar() a potem ją definiujesz, a to trzeba na odwrót, najpierw zdefiniuj funkcję a potem użyj window.onload

a tak przy okazji to proponuję zastosować nowszy typ obsługi zdarzeń czyli addEventListener()
jak dalej będziesz miał problemy to podeślę rozwiązanie:)
i proponuję jeszcze korzystać częściej z konsoli błędów w przeglądarce :)

komentarz 14 października 2017 przez Q7V Gaduła (4,250 p.)

Piszesz takie skomplikowane rzeczy, a ja dopiero podstawy próbuję załapać, nie udało mi się tego zrobić mimo wielu starań... :/

Dam od razu cały kod HTML, może będzie łatwiej wyłapać błąd, próbowałem podmienić zawartość p innerem, ale nie działało, teraz próbuję wypisać informacje w odzielnym skrypcie i też nie działa... :/

<html>
     <head>
          <title>Serwery - VPS, Dedykowane</title>
		  <meta charset="UTF-8">
          <link rel="stylesheet" href="style.css" />
<script type="text/javascript">
function zegar()
{
  var dzisiaj = new Date();
  var dzien = dzisiaj.getDate();
  var miesiac = dzisiaj.getMonth()+1;
  var rok = dzisiaj.getFullYear();
  var godzina = dzisiaj.getHours();
  if(godzina<10)godzina = "0"+godzina;
  var minuty = dzisiaj.getMinutes();
  if(minuty<10)minuty = "0"+minuty;
  var sekunda = dzisiaj.getSeconds();
  if(sekunda<10)sekunda = "0"+sekunda;
//document.getElementById("zegar").innerHTML = +dzien+"/"+miesiac+"/"+rok+" | "+godzina+":"+minuty+":"+sekunda+

//document.write("<b>"+dzien+"/"+miesiac+"/"+rok+"</b> Godzina <b>"+godzina+":"+minuty+":"+sekunda+"</b>");
}

window.onload = function(){
setTimeout(function(){
 zegar();
},1000)

}


</script>
     </head>
     <body>
          <header>

          </header>
          <nav>
            <a href="index.html">Strona główna</a> | <a href="cennik.html">Cennik</a> | <a href="galeria.html">Galeria</a> | <a href="kontakt.html">Kontakt</a> | Dzisiaj jest <script type="text/javascript">
            document.write("<b>"+dzien+"/"+miesiac+"/"+rok+"</b> Godzina <b>"+godzina+":"+minuty+":"+sekunda+"</b>");

            </script>
          </nav>
               <article>
                 <h2>Nowa oferta!</h2>

                 <p>
                   <img style="float:left ;width:20% ;height:20%; padding: 5px;" src=img/5.png />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, massa nec tempus commodo, urna urna commodo felis, at pharetra tellus nunc ac tellus. Donec sed laoreet urna. Curabitur purus odio, suscipit ac iaculis at, elementum sit amet magna. Vivamus eget ultrices arcu, eget varius quam. Fusce feugiat tempor nibh iaculis consequat. Quisque tincidunt malesuada eros non vulputate. Nam aliquam mauris et dolor porta sagittis.

                   Fusce pellentesque lacus in metus congue, varius imperdiet ipsum feugiat. Nam ex mi... <a href="#">Czytaj dalej</a>
                 </p><hr>
                 <div id="stat">Wyświetleń 55 | Komentarzy 7</div>
                 <h2>Promocja <b>-50%!</b></h2>

                 <p>
                    <img style="float:left ;width:15% ;height:15%; padding: 5px;" src=img/77.png />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, massa nec tempus commodo, urna urna commodo felis, at pharetra tellus nunc ac tellus. Donec sed laoreet urna. Curabitur purus odio, suscipit ac iaculis at, elementum sit amet magna. Vivamus eget ultrices arcu, eget varius quam. Fusce feugiat tempor nibh iaculis consequat. Quisque tincidunt malesuada eros non vulputate. Nam aliquam mauris et dolor porta sagittis.

                   Fusce pellentesque lacus in metus congue, varius imperdiet ipsum feugiat. Nam ex mi... <a href="#">Czytaj dalej</a>
                 </p><hr>
                 <div id="stat">Wyświetleń 321 | Komentarzy 11</div>






           </article>
     </body>
</html>

komentarz 14 października 2017 przez shotokan Nałogowiec (39,660 p.)

Tu masz przykładowy skrypt z objaśnieniem co i jak, przeanalizuj i dostosuj do swojej potrzeby :)

<!DOCTYPE html>
<html lang="pl">

<head>
    <title>Zegarek</title>
    <meta charset="UTF-8">
</head>

<body>

    <div id="zegar"></div>


    <script type="text/javascript">

    //utworzenie funkcji o nazwie czas
    function czas() {
        var data = new Date(); //tworzymy obiekt typu data
        var godzina = data.getHours(); //pobieramy godzinę
        var minuta = data.getMinutes(); //pobieramy minutę
        var sekunda = data.getSeconds(); //pobieramy sekundy

        // przypisanie zera do godziny, minuty i sekundy, czyli np. 05 a nie 5
        if (godzina < 10) {
            godzina = "0" + godzina;
        }
        if (minuta < 10) {
            minuta = "0" + minuta;
        }
        if (sekunda < 10) {
            sekunda = "0" + sekunda;
        }

        //wyświetlenie zegarka w divie o id zegar
        document.querySelector("#zegar").innerHTML = "Obecna godzina: " + godzina + " : " + minuta + " : " + sekunda;

        setTimeout(czas, 1000); //samowywołanie się funkcji po 1s
    }
    window.addEventListener("load", czas); //wywołanie funkcji czas po załadowaniu strony
    </script>
    
</body>

</html>

komentarz 14 października 2017 przez Q7V Gaduła (4,250 p.)

Wow, dzięki wielkie. :)

1 odpowiedź

odpowiedź 13 października 2017 przez Ehlert Ekspert (212,670 p.)

Skrypty umieszczamy przed zamknięciem znacznika body.

komentarz 13 października 2017 przez Ehlert Ekspert (212,670 p.)

Btw. Funkcji zegar prawdopodobnie nigdzie nie wywołujesz.

komentarz 13 października 2017 przez Q7V Gaduła (4,250 p.)

Umieściłem w head, tak było w odcinku. :p A wywołałem go w body, czyli tam gdzie posiadam strukturę strony.

komentarz 13 października 2017 przez Ehlert Ekspert (212,670 p.)

W headzie umieszcza się biblioteki. Swoje skrypty na końcu body.

1	komentarz 13 października 2017 przez niezalogowany Czemu w headerze umieszcza się biblioteki?

komentarz 13 października 2017 przez Ehlert Ekspert (212,670 p.)

Zawsze widziałem, że pliki js z zawartością "z zewnątrz" umieszcza się w headzie. Te napisane przez nas przed zamknięciem body. Jeśli się mylę popraw mnie.