Diskuze: JS aktualizovaný výpis data a času dle PC
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Tvůrce
Zobrazeno 7 zpráv z 7.
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Na to se musí použít DOM (Document Object Model), aby se čas přepisoval a funkce setInterval, aby se aktualizoval.
function vypisCas() {
// Uložíme si objekt Date
var d = new Date();
// Najdeme element s id="cas"
var elem = document.getElementById("cas");
// Uložíme tam aktuální čas
elem.innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
// Vypíšeme aktuální čas
vypisCas();
// Nastavíme automatické spouštění funkce vypisCas po 1s (1000ms)
setInterval(vypisCas, 1000);Pak stačí v HTML přidat element třeba <div id="cas"></div> a čas se tam bude automaticky ukládat. JS kód musí ale být pod tímto elementem nebo ve funkci window.onload
Ať dělám co dělám nejde to:
<!DOCTYPE html>
<html lang="cs-cz" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1250"/>
<title>project</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function vypisCas() {
// Uložíme si objekt Date
var d = new Date();
// Najdeme element s id="cas"
var elem = document.getElementById("cas");
// Uložíme tam aktuální čas
elem.innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
// Vypíšeme aktuální čas
vypisCas();
// Nastavíme automatické spouštění funkce vypisCas po 1s (1000ms)
setInterval(vypisCas, 1000);
</script>
</body>
Zaprvé je tu tlačítko na vložení zdrojového kódu a zadruhé v body vůbec nemáš element, jehož obsah chceš měnit. Vlož si někam div s id cas, Drahoš ti to psal.
Musí tam být ten tag <div id="cas"></div> a pokud máš jQuery, jde to udělat líp:
<!DOCTYPE html>
<html lang="cs-cz" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<title>project</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Počkáme si, až se načte HTML
$(function() {
// Funkce uloží aktuální čas do tagu id="cas"
function vypisCas() {
// Uložíme si objekt Date
var d = new Date();
// Vložíme aktuální čas do elementu
$("#cas").html( d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() );
}
// Vypíšeme aktuální čas
vypisCas();
// Nastavíme automatické spouštění funkce vypisCas po 1s (1000ms)
setInterval(vypisCas, 1000);
});
</script>
</head>
<body>
<!-- Sem bude JS vypisovat cas -->
<div id="cas"></div>
</body>Zobrazeno 7 zpráv z 7.