Samo odświeżający się zegar

0

Witam wszystkich :D
Zaczynam się uczyć JS i w swoim pierwszym małym projekcie chciałem dodać zegarek do html'a, ale niestety nie wyświetla się :( zanim dodałem funkcje odpowiadającą za odświeżanie zegarka, wyświetlał sie bez problemu, po dodaniu tej funkcji nie działa :/ Jak by mi ktoś powiedział co jest nie tak to był bym wdzięczny :D

<head>
    
    
    <script type="text/javascript">
function refreshtime()
{



        var dzisiaj = new Date ();
        
        var day = dzisiaj.getDate();
        var month = dzisiaj.getMonth()+1;
        var year = dzisiaj.getFullYear();
        var hour = dzisiaj.getHours();
        var minute = dzisiaj.getMinutes();
        var second = dzisiaj.getSeconds();

        document.getElementsByClass("clock").innerHTML =
        day+"/"+month+"/"+year+"|"+hour+":"+minute+":"+second;
   

       setTimeout("refreshtime()",1000);
}

      </script>
</head>
<body>
     <div class="clock" id="clock"></div>
</body>
0

w jakim sensie nie wywołuje? Mógł byś tak łopatologicznie wyjaśnić? Zaczynam dopiero z js i w ogóle z programowaniem i trochę się gubię

4

No to kilka uwag:

  1. Jak napisał powyżej @ledi12 - nigdzie tej funkcji nie wywołujesz. Owszem, jest ona zadeklarowana, ale jej wywołanie znajduje się wewnątrz jej samej. Kod JS, o ile nie jest wpisany wprost w znacznik <script>, ale zawiera się w ramach funkcji, to nie zostanie wywołany póki jawnie tej funkcji nie odpalisz - czyli nie będziesz kazać się jej uruchomić
  2. Zamiast ustawiać cyklicznie timeout lepiej polecić, żeby automatycznie odpalało się to co określony czas
  3. O wiele lepsze jest korzystanie z getElementById a nie bazować na klasie
  4. Poprawiona wersja jest dostępna tutaj - https://jsfiddle.net/3eoch2jd/
  5. W ramach ćwiczeń - możesz dodać zero, jeśli jakaś pozycja daty lub godziny jest jednocyfrowa - czyli nie 8/3 tylko 08/03 (ale już nie 012/010)
  6. Dobrze by było stworzyć jakąś zmienną, która będzie trzymać wartość do wyświetlenia - czyli najpierw sobie sklejasz tego stringa z poszczególnych kawałków, a potem dopiero robisz coś na zasadzie ...innerHTML = nowaWartosc
  7. a w ogóle to najlepiej by było wydzielić funkcję sklejającą ciąg z datą i godziną do osobnej funkcji - coś na zasadzie ...innerHTML = zmienZegar()

HTML:

     <div id="clock">start</div>

oraz JS:

function refreshtime()
{       var dzisiaj = new Date ();
       var day = dzisiaj.getDate();
       var month = dzisiaj.getMonth()+1;
       var year = dzisiaj.getFullYear();
       var hour = dzisiaj.getHours();
       var minute = dzisiaj.getMinutes();
       var second = dzisiaj.getSeconds();

       document.getElementById("clock").innerHTML = day+"/"+month+"/"+year+"|"+hour+":"+minute+":"+second;
      
}
setInterval(refreshtime,1000);
1

daj na koncu tagu script window.onload = refreshtime

1

@cerrato: Coś podziałałem i wystrugałem coś takiego https://jsfiddle.net/ndszpw4e/1/
Jest to ładne i czytelne?

O co chodzi z escape'owaniem? Jaka jest różnica pomiędzy innerText a innerHtml?

1

Co do Twojego przykładu - idziemy w dobrą stronę, ale jeszcze wiele rzeczy bym zrobił.

var month = today.getMonth() + 1;
let y
if (month < 10) {
  y = "0"
} else {
  y = ""
}
  1. Powyższy fragment powtarza się chyba 5 razy - dla dnia, miesiąca, godziny itp. Nie byłoby dobrze zrobić z tego osobną funkcję, która przyjmie jako parametr jakąś wartość i zwróci ją przerobioną? Wtedy te wszystkie 5 przypadków byś ogarnął jednym kawałkiem kodu, a nie pisaniem tego samego 5x.
  2. Rozszerzając pkt.1 - co w sytuacji, w której uznasz, że zamiast 0 chcesz wstawić - albo jakiś inny znak/symbol? Jak masz specjalną funkcję to zmieniasz w jednym miejscu. Jak masz to osobno napisane dla każdego przypadku to musisz w każdym miejscu zmienić osobno. Łatwo coś przeoczyć/namieszać.
  3. Poza tym - po co wprowadzasz dodatkową zmienną Y i potem ją dopisujesz do innego ciągu? Masz pomysł jak to zrobić inaczej?
  4. Podpowiedź do poprzedniego punktu - zpais programistyczny to nie jest matematyka i coś w postaci X = 5 + X jest całkowicie poprawny
  5. Zresztą chyba o tym wiesz - bo pod koniec jest fragment if (day < 10) { "0" + day } :P
  6. Co do escapowania - @TomRiddle dał link. Rozumiesz, o co chodzi czy nie do końca i mamy coś wyjaśnić?
  7. class="clock" - nie musisz dawać klasy, skoro i tak w żaden sposób tego elementu nie stylujesz, a odniesienie do niego (żeby aktualizować czas) pobierasz po id. W programowaniu są dwie (znaczy - jest ich bardzo wiele, ale akurat te dwie pasują do kontekstu) zasady: YAGNI - https://pl.wikipedia.org/wiki/YAGNI i KISS - https://pl.wikipedia.org/wiki/KISS_(regu%C5%82a)

1 użytkowników online, w tym zalogowanych: 0, gości: 1