JS kykenee esittämään päivämäärän merkkijonona seuraavasti:
Mon Feb 05 2018 14:24:46 GMT+0200 (Eastern Europe Standard Time)
tai esittämään saman 1.1.1970 klo 00:00:00 alkaen millisekunteina:
1517833486703
Date() metodi
<p id="aika1"></p>
<script>
document.getElementById("aika1").innerHTML = Date();
</script>
Tulos www-sivulla:
Huomaa, esimerkki (yllä)näyttää sen hetken kun www-sivu oli avattu selaimeen.
Aikavyöhykkeetnew Date() metodiMetodi new Date() edellisen esimerkin tavoin sijoittaa paiva-muuttujaan tiedon avattaessa www-sivu.
Muuttujaan paiva2 sijoitetaan metodilla päivämäärä ja kellonaika merkkijonona.
Huomaa, kuukautta ei voi asettaa muulla kielellä kuin englanniksi, sekä merkkijonona näyttäminen eli toString().
<p id="aika1A"></p>
<script>
var paiva = new Date();
var paiva2 = new Date("October 13, 2014 11:13:00");
document.getElementById("aika1A").innerHTML =
paiva + "<br>" +
paiva2 + "<br>" +
paiva2.toString();
</script>
Tulos www-sivulla:
Metodiin new Date() voidaan antaa myös muillakin tavoin päivämäärä ja aikatieto:
| Metodi - asetukset | Selite |
|---|---|
| new Date(100000000000) | jolloin tieto millisekuntteina |
| new Date(99,5,24,11,33,30,0) | tieto vuosiluku, kuukausi, päivämäärä tunnit, minuutit, sekunnit ja aikavyöhyke |
| new Date(99,5,24) | tietona vuosiluku, kuukausi päivämäärä |
| Esittäminen www-sivulle toString() metodilla ja eri asetuksin: | |
| paiva.toDateString() | näyttää viikonpäivän, kuun pvm ja vuoden esim Mon Feb 05 2018 |
| paiva.toUTCString() | UTC-merkkijono standimuotona esim Mon, 05 Feb 2018 12:52:50 GMT |
| Päivämäärän esitysmuotoja: | |
| ISO | "2017-05-21" kansainvälinen standardi |
| Lyhyt muoto | "05/21/2017" |
| Pitkä muoto | "May 21 2017" tai "21 May 2017" |
| Kokonaisena | "Wednesday May 21 2017" |
Esimerkki päivämäärä asetuksista:
<p id="aikaA"></p>
<script>
document.getElementById("aikaA").innerHTML =
new Date("2015-03-25") + "<br>" +
new Date("2015-03") + "ISO standardi <br>" +
new Date("2015") + "ISO standardi tämäkin";
</script>
Tulos www-sivulla:
| Metodi | Selite |
|---|---|
| getDate() | Palauttaa kuukauden päivän 1 - 31 |
| getDay() | Palauttaa viikon päivän numerona 0 - 6 (su-la) |
| getFullYear() | Palauttaa vuoden neljällä numerolla ilmaistuna |
| getHours() | Palauttaa tunnin 0 - 23 |
| getMilliseconds() | Palauttaa millisekunnit 0 - 999 |
| getMinutes() | Palauttaa minuutit 0 - 59 |
| getMonth() | Palauttaa kuukauden 0 - 11 |
| getSeconds() | Palauttaa sekunnit 0 - 59 |
| getTime() | Palauttaa ajan millisekunteina alkaen 1.1.1970 klo 00.00.00 |
Esimerkeissä new Date() metodilla otetaan aluksi laitteen kellosta aika millisekunteina muuttujaan.
Kalenteripäivä esimerkki:
<p id="aikaB"></p>
<script>
var kalenteri = new Date();
document.getElementById("aikaB").innerHTML = "Esimerkki kalenterista:<br>"+
kalenteri.getDate() + ". päivä<br>" +
kalenteri.getMonth() +". kuukausi<br>" +
kalenteri.getFullYear() +" vuosi<br>" +
kalenteri.getDay() + " viikonpäivä numerona";
</script>
Tulos www-sivulla:
Kello esimerkki:
<p id="aikaC"></p>
<script>
var millisek = new Date();
document.getElementById("aikaC").innerHTML = "Esimerkki, kellon aika ja ajanotto:<br>"+
millisek.getTime() + " millisekunnit 1.1.1970 alkaen<br>" +
millisek.getHours() + " tunnit (vrk)<br>" +
millisek.getMinutes() + " minuutit alkaneesta tunnista<br>" +
millisek.getSeconds() + " sekunnit alkaneesta minuutista<br>" +
millisek.getMilliseconds() + " alkaneen sekunnin millisekunnit";
</script>
Tulos www-sivulla:
Seuraavassa esimerkissä näytetään viikonpäivä kun tämä www-sivu avattiin selaimessa:
<p id="aikaD"></p>
<script>
var aika = new Date();
var paiva = ["sunnuntai","maanantai","tiistai","keskiviikko","torstai","perjantai","lauantai"];
document.getElementById("aikaD").innerHTML = paiva[aika.getDay()];
</script>
Tulos www-sivulla:
Esimerkissä paiva-taulukkoon on sijoitettu merkkijonona viikonpäivät. Viikonpäivän numero eli sijainti
taulukosta saadaan aika.getDay()-metodirakenteella.
Päivän ja ajan asettamiseen liittyvät metodit esitellään taulukossa:
| Metodi | Selite |
|---|---|
| setDate() | Asettaa päivämäärän 1 - 31 |
| setFullYear() | Asettaa vuoden (asetettavissa myös kuukausi ja päivä) |
| setHours() | Asettaa tunnin 0 - 23 |
| setMilliseconds() | Asettaa millisekunnit 0 - 999 |
| setMinutes() | Asettaa minuutit 0 - 59 |
| setMonth() | Asettaa kuukauden 0 - 11 |
| setSeconds() | Asettaa sekunnit 0 - 59 |
| setTime() | Asettaa ajan millisekunteina alkaen 1.1.1970 klo 00.00.00 |
Esimerkissä asetetaan päivämääräksi 15.2.2027, (kellonaika näyttää tietokoneen kellonaikaa).
Huomaa, helmikuu on kuukausi numero 1. Tammikuu = 0, Helmikuu = 1, Maaliskuu = 2 jne.
<p id="aikaE"></p>
<script>
var pvm = new Date();
pvm.setFullYear(2020, 1, 14);
document.getElementById("aikaE").innerHTML = pvm;
</script>
Tulos www-sivulla:
Edellistä esimerkkiä soveltaen voidaan asettaa päivä ja päivien määrä:
<p id="aikaF"></p>
<script>
var pvm = new Date();
var pvm1 = new Date();
pvm.setDate(15);
pvm1.setDate(pvm1.getDate() + 50);
document.getElementById("aikaF").innerHTML =
pvm + " - asetettu 15.päivä<br>" +
pvm1 + " - asetettu pvm 50 päivän päähän<br>";
</script>
Tulos www-sivulla:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.kellotaulu {
background-color: #F0F8FF;
width: 10%;
border: 1px solid darkred;
padding: 10px;
margin: 10px;
font-size: 110%;
color: tomato;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
</style>
</head>
<body onload="aloitaKello()">
<div class="kellotaulu" id="txt"> </div>
<script>
function aloitaKello() {
var aika = new Date();
var h = aika.getHours();
var m = aika.getMinutes();
var s = aika.getSeconds();
m = otaAika(m);
s = otaAika(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(aloitaKello, 500);
}
function otaAika(i) {
if (i < 10) {i = "0" + i}; // lisää nollan eteen jos numero < 10
return i;
}
</script>
</body>
</html>
Tulos www-sivulla:
Tämä kello tulee esille kahdessa sekunnissa (kokeile päivittämällä selain) www-sivun avautuessa selaimeen ja sekunnit vaihtuvat 2 väliajoin.
<b><p id="seiko" style="color:green"></p></b>
<script>
var omaSek = setInterval(omaAika, 2000);
function omaAika() {
var aika = new Date();
document.getElementById("seiko").innerHTML = aika.toLocaleTimeString();
}
</script>
Viiveillä voidaan toteuttaa hetken näkyviä tervehdystekstejä tai div-elementillä toteutettuja info-laatikoita.
Alla testaamiseen ja rakenteluun sopiva esimerkki jolla näytetään punainen teksti 3 sekunnin ajan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#viesti{
color:RED;
}
</style>
</head>
<body>
<!-- tempun alku -->
<h3 id="viesti"> </h3>
<script>
var teksti = "Katoaa 3 sekunnin kuluttua.";
document.getElementById("viesti").innerHTML = teksti;
setTimeout(function () {
document.getElementById("viesti").innerHTML = "";
}, 3000);
</script>
<!-- Tempun loppu -->
<p> Huomaa!<br>
Info-laatikko voidaan tuottaa div-elementillä näytettäväksi JavaScriptillä.<br>
Enemmän CSS ja JS osaamista tarvitaan hienommissa toteutuksissa. </p>
</body>
</html>
Alla, painikkeella avautuu info-laatikko joka katoaa 5 sekunnin kuluttua.
Katso CSS-ohjeet sekä koodaus täältä !