Zegar z kursu js

pytanie zadane 2 maja 2017 w HTML i CSS przez MagicznyJasio Użytkownik (580 p.)

Witam

Czy mógłby mi ktoś powiedzieć czy tak mogę wykonać zegar ? A jeśli tak, to gdzie są błędy?

W tej chwili jak próbuję odpalić w przeglądarce, to wczytuje białą stronę.

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

    <meta charset="utf-8" />
    <title>Odliczanie czasu</title>
    <script type= "text/javascript"> 
function odliczanie()
{
var czas = new Date();
var dzien = czas.getDate();
if(dzien<10) dzien = "0" + dzien;
var rok = czas.getFullYear();
var miesiac = czas.getMonth();
if(miesiac<10) miesiac = "0" + miesiac;
var godzina = czas.getHours();
if(godzina<10) godzina = "0" + godzina;
var sekunda = czas.getSeconds(); 
if(sekunda<10) sekunda = "0" + sekunda;
var minuta = czas.getMiutes();
if(minuta<10) minuta = "0" + minuta;
setTimeout("odliczanie()",1000);
}
</script>
</head>
<body onload=odliczanie();>
<div id="zegar"> </div>
<script type= "text/javascript"> 
document.getElementById("zegar").innerHTML = dzien +"."+miesiac+"."+rok+" | "+godzina+":"+ minuta + ":" + sekunda;
</script>
</body>
</html>

Pozdrawiam

komentarz 2 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Literówka podczas wywołania metody getMinutes():

var minuta = czas.getMiutes();

Włącz sobie konsolę w przeglądarce, żebyś na przyszłość wiedział, jakie błędy rzuca JavaScript.

[edit]

Plus to, co napisał @Ehlert.

komentarz 2 maja 2017 przez jpacanowski VIP (101,940 p.)

<body onload=odliczanie();>

Nie, tak nie...

komentarz 2 maja 2017 przez MagicznyJasio Użytkownik (580 p.)

Dziękuję

Poprawione

Działa :)

komentarz 2 maja 2017 przez jpacanowski VIP (101,940 p.)

https://forum.pasja-informatyki.pl/190211/dlaczego-nie-body-onload-funkcja

1 odpowiedź

odpowiedź 2 maja 2017 przez Ehlert Ekspert (212,670 p.)
wybrane 2 maja 2017 przez MagicznyJasio

Najlepsza

Skrypty dołączamy przed domknięciem znacznika body
type w znaczniku script jest zbędne
Przenieś Js'a do oddzielnych plików.

//zmiast body onload
document.querySelector('body').addEventListener('load', yourFoo, false);
//albo użyj IIFE
(function(){
//to wykona się odrazu
})();

Zmienne takie jak czas, miesiac itp są lokalne i występują w funkcji odliczanie. Poza nią są undefined.

komentarz 2 maja 2017 przez Ehlert Ekspert (212,670 p.)

Masz, Js zegarek trochę bardziej po katolicku

JSBin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Clock</title>
</head>
<body>
  <span class="clock"></span>
  <script src="clock.js"></script>
</body>
</html>

/*
   clock.js
*/
(function(){
  'use strict';
  var clockElement = document.querySelector('.clock'),
      dateObject = new Date(),
      clockHTML = '',
      
      refreshDate = function () {
          dateObject = new Date();
      },
      
      refreshHTMLClock = function () {
        clockHTML = dateObject.getDay();
        clockHTML += '.' + dateObject.getMonth();
        clockHTML += '.' + dateObject.getFullYear() + ' ';
        clockHTML += dateObject.getHours() + ':';
        clockHTML += dateObject.getMinutes() + ':';
        clockHTML += dateObject.getSeconds();
      },
      
      refreshClock = function () {
        refreshDate();
        refreshHTMLClock();
        clockElement.innerHTML = clockHTML;
        setTimeout(refreshClock, 1000);
      };
   
  refreshClock();
  
})();