NA VRH
DOMOV HTML CSS JavaScript jQuery AngularJS PHP MySQL Python C# Sass WordPress
glave/headings

JavaScript: JavaScript načini Sintaksa Spremenljivke Števila Objekti Funkcije Pogoji Zanke Nizi Datum in čas: - datum z array metodo DOM Array AJAX Knjižnica

Datum in Čas

Datum in čas v brskalniku deluje na način, da JavaScript privzeto uporabi časovni pas brskalnika. Tako datum in čas prikaže kot polni besedni niz.

Metoda Opis
getFullYear() izpis leta v številkah
getMonth() izpis meseca v številkah, od 0 do 11
getDate() izpis dneva v številkah, od 0 do 31
getHours(), getMinutes(), getSeconds(), getMilliseconds() pridobi ustrezne časovne komponente

Datum in Čas
    <p id="demo"></p>

    <script>
        var d = new Date();
        document.getElementById("demo").innerHTML = d;
    </script>
            

Ko ustvarimo objekt Datum (ang. Date), lahko delamo s številnimi metodami. Metoda datuma nam omogoča, da določimo leto (metoda getFullYear()), mesec (metoda getMonth()), dan (metoda getDay()), in uro (metoda getHours()), z uporabo lokalnega ali UTC (univerzalnega) časa.

    <p id="primer">Ob kliku na tipko, se ti bo prikazal čas in datum.</p>
    <button type="button" onclick="gumb1()">Prikaži datum in čas</button>

    <script>
        function gumb1() {
            document.getElementById('primer').innerHTML = Date();
            document.getElementById("primer").style.backgroundColor = "yellow"
            document.getElementById("primer").style.padding = "10px"
            document.getElementById("primer").style.border = "1px solid greenyellow"
            document.getElementById("primer").style.borderRadius = "6px"
        }
    </script>
            
    <p id="primer">Po kliku na gumb boste videli datum s številkami.</p>
    <button onclick="clickBtn()" class="btn">Pritisni za prikaz datuma</button>

    <script>
        function clickBtn() {
            var datum = new Date();
            var newDay = datum.getDate();
            var newMonth = datum.getMonth();
            var newYear = datum.getFullYear();

            document.getElementById("primer").innerHTML = newDay + " " + newMonth + " " + newYear;
            document.getElementById("primer").style.backgroundColor = "greenyellow"
            document.getElementById("primer").style.color = "black"
            document.getElementById("primer").style.fontWeight = "bold"
            document.getElementById("primer").style.padding = "10px"
            document.getElementById("primer").style.borderRadius = "6px"
        }
    </script>
            
    <p id="primer"></p>
    <button onclick="clickBtn()">Pritisni za prikaz datuma in ure</button>

    <script>
        function dodajZero(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }

        function clickBtn() {
            var datum = new Date();
            var newDay = datum.getDay();
            var newMonth = datum.getMonth();
            var newYear = datum.getFullYear();

            var u = dodajZero(datum.getHours());
            var m = dodajZero(datum.getMinutes());
            var s = dodajZero(datum.getSeconds());
            b = u + ":" + m + ":" + s;

            switch(newDay) {
                case 0:
                    newDay = "Nedelja";
                    break;
                case 1:
                    newDay = "Ponedeljek";
                    break;
                case 2:
                    newDay = "Torek";
                    break;
                case 3:
                    newDay = "Sreda";
                    break;
                case 4:
                    newDay = "Četrtek";
                    break;
                case 5:
                    newDay = "Petek";
                    break;
                case 6:
                    newDay = "Sobota";
                    break;
            }

            switch(newMonth) {
                case 0:
                    newMonth = "Januar";
                    break;
                case 1:
                    newMonth = "Februar";
                    break;
                case 2:
                    newMonth = "Marec";
                    break;
                case 3:
                    newMonth = "April";
                    break;
                case 4:
                    newMonth = "Maj";
                    break;
                case 5:
                    newMonth = "Junij";
                    break;
                case 6:
                    newMonth = "Julij";
                    break;
                case 7:
                    newMonth = "Avgust";
                    break;
                case 8:
                    newMonth = "September";
                    break;
                case 9:
                    newMonth = "Oktober";
                    break;
                case 10:
                    newMonth = "November";
                    break;
                case 11:
                    newMonth = "December";
                    break;
            }

            document.getElementById("primer").innerHTML = "Danes je <strong>" + newDay +
                "</strong>, " + "smo v mesecu <strong>" + newMonth +
                "</strong> " + " leta <strong>" + newYear +
                "</strong>" + ", ura pa je <strong>" + b + "</strong>";
            document.getElementById("primer").style.backgroundColor = "deepskyblue"
            document.getElementById("primer").style.padding = "10px"
            document.getElementById("primer").style.borderRadius = "6px"
        }
    </script>
            

V prvem delu smo delali s switch metodo, in bomo sedaj "nadgradili" na Array metodo. Zakaj "nadgradili"? Ker je hitrejše in lažje! Boste pa videli s čim boste delali sami najlažje, pa si izberite iz obeh metod.

    <p id="primer"></p>

    <script>
        var dan = new Array();
        dan[0] = "Nedelja";
        dan[1] = "Ponedeljek";
        dan[2] = "Torek";
        dan[3] = "Sreda";
        dan[4] = "Četrtek";
        dan[5] = "Petek";
        dan[6] = "Sobota";

        var a = new Date();
        var b = dan[a.getDay()];
        document.getElementById("primer").innerHTML = "Danes je " + b;{}
        document.getElementById("primer").style.backgroundColor = "#9ffff9"
        document.getElementById("primer").style.border = "1px solid deepskyblue"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
    </script>

    <style>
        .cl {
            color: deepskyblue;
        }
    </style>
            
    <p id="primer"></p>

    <script>
        var mesec = new Array();
        mesec[0] = "Januar";
        mesec[1] = "Februar";
        mesec[2] = "Marec";
        mesec[3] = "April";
        mesec[4] = "Maj";
        mesec[5] = "Junij";
        mesec[6] = "Julij";
        mesec[7] = "Avgust";
        mesec[8] = "September";
        mesec[9] = "Oktober";
        mesec[10] = "November";
        mesec[11] = "December";

        var a = new Date();
        var b = mesec[a.getMonth()];
        document.getElementById("primer").innerHTML = "Mesec " + b;{}
        document.getElementById("primer").style.backgroundColor = "orange"
        document.getElementById("primer").style.border = "1px solid orangered"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
    </script>
            
    <p id="primer"></p>

    <script>
        var dan = new Array();
        dan[0] = "Nedelja";
        dan[1] = "Ponedeljek";
        dan[2] = "Torek";
        dan[3] = "Sreda";
        dan[4] = "Četrtek";
        dan[5] = "Petek";
        dan[6] = "Sobota";

        var a = new Date();
        var b = dan[a.getDay()];
        document.getElementById("primer").innerHTML = b;

        var mesec = new Array();
        mesec[0] = "Januar";
        mesec[1] = "Februar";
        mesec[2] = "Marec";
        mesec[3] = "April";
        mesec[4] = "Maj";
        mesec[5] = "Junij";
        mesec[6] = "Julij";
        mesec[7] = "Avgust";
        mesec[8] = "September";
        mesec[9] = "Oktober";
        mesec[10] = "November";
        mesec[11] = "December";

        var c = new Date();
        var d = mesec[c.getMonth()];
        document.getElementById("primer").innerHTML = d;

        leto = new Date();
        e = leto.getFullYear();
        document.getElementById("primer").innerHTML = e;

        document.getElementById("primer").innerHTML = "Danes je " + b + ", mesec " + d + ", leto " + e;{}
        document.getElementById("primer").style.backgroundColor = "greenyellow"
        document.getElementById("primer").style.border = "1px solid green"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
        document.getElementById("primer").style.display = "inline-block"
    </script>