Loading:

Promocja Helion.pl

Data i czas po polsku - JavaScript

Skrypt pokazuję po najechaniu myszką na blok tekstu datę oraz czas w języku polskim. W formacie: Niedziela, 7 lutego 2010 roku, 15:59:24.

 

Jest on napisany w języku JavaScript, także będzie chodził nawet na takich hostingach jak republika, aczkolwiek, żeby zadziałał, użytkownik musi mieć w przeglądarce włączoną obsługę JavaScript.

 

Alternatywnie można dodać w sekcji <body> informację w znacznikach: <noscript>...</noscript> informującą użytkownika o tym, że do odpowiedniego działa strony, potrzebna jest obsługa JS.

 

Na początek napiszemy sobie ramy dokumentu XHTML wraz ze stylami CSS.

 

<html>
 <head>
    <title>Data i czas</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="Skrypt daty oraz czasu na stronie WWW w języku polskim" />
    <meta name="keywords" content="javascript, data i czas, data po polsku js" />
    <meta name="author" content="Łukasz R." />
    <style type="text/css">
        body {
            margin: 30px auto;
            text-align: center;
            background-color: #000;
            font: 17px Tahoma, sans-serif;
            color: darkgreen;
        }
        #date {
            margin: 0 auto;
            padding: 10px;
            border: 3px dotted lightgreen;
            -moz-border-radius: 5px;
            width: 400px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">    
       
    </script>
 </head>
 <body>
    <div id="date">Najedź tutaj, aby wyświetlić datę i czas</div>
 </body>
</html>

 

Teraz napiszemy funkcję odpowiadającą za wyświetlenie daty, funkcję on():

 

function on() {
            var days_array = new Array(
                "Niedziela", "Poniedziałek", "Wtorek",
                "Środa", "Czwartek", "Piątek", "Sobota");
       
            var month_array = new Array(
                "stycznia", "lutego", "marca", "kwietnia",
                "czerwca", "lipca", "sierpnia", "września",
                "października", "listopada", "grudnia");
           
            var date = new Date();
           
            var day = date.getDay();
            var number_day = date.getDate();
            var month = date.getMonth();
            var year = date.getFullYear();
           
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
           
            if (hour < 10) hour = "0" + hour;
            if (minute < 10) minute = "0" + minute;
            if (second < 10) second = "0" + second;
           
            var datetime = days_array[day] + ", " + number_day + " " +
            month_array[month] + " " + year + " roku,<br />\n" +
            hour + ":" + minute + ":" + second;
           
            var div = document.getElementById("date");
            div.innerHTML = datetime;
}

 

Jeśli mamy funkcję wyświetlającą, czas napisać króciutką funkcję, która schowa datę wraz z usunięciem z bloku kursora myszki - funkcja off():

 

function off() {
            var div = document.getElementById("date");
            div.innerHTML = "Najedź tutaj, aby wyświetlić datę i czas";

}

 

Ostatnią rzeczą, której potrzebujemy jest uruchomienie skryptu, czyli funkcji load(), która wygląda następująco:

 

function load() {
            var div = document.getElementById("date");
            div.onmouseover = on;
            div.onmouseout = off;

}

 

Ale teraz aby uruchomić skrypt zaraz po załadowaniu się strony, musimy użyć jednej, bardzo prostej linjki, która uruchomi funkcja load, zaś load uruchomi funkcje on i off.

 

window.onload = load;

 

I gotowe nasz skrypt powininien działać prawidłowo, oczywiście można zmienić nazwę diva, do którego ma być wrzucona data. Można skopiować sam skrypt i wrzucić go na swoją stronę. Dziękuję za uwagę i pozdrawiam.



Napisz Artykuł

Listing

<html>
 <head>
        <title>Data i czas</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="Skrypt daty oraz czasu na stronie WWW w języku polskim" />
        <meta name="keywords" content="javascript, data i czas, data po polsku js" />
        <meta name="author" content="Łukasz R." />
        <style type="text/css">
                body {
                        margin: 30px auto;
                        text-align: center;
                        background-color: #000;
                        font: 17px Tahoma, sans-serif;
                        color: darkgreen;
                }
                #date {
                        margin: 0 auto;
                        padding: 10px;
                        border: 3px dotted lightgreen;
                        -moz-border-radius: 5px;
                        width: 400px;
                        cursor: pointer;
                }
        </style>
        <script type="text/javascript"> 
                function on() {
                        var days_array = new Array(
                                "Niedziela", "Poniedziałek", "Wtorek",
                                "Środa", "Czwartek", "Piątek", "Sobota");
               
                        var month_array = new Array(
                                "stycznia", "lutego", "marca", "kwietnia",
                                "czerwca", "lipca", "sierpnia", "września",
                                "października", "listopada", "grudnia");
                       
                        var date = new Date();
                       
                        var day = date.getDay();
                        var number_day = date.getDate();
                        var month = date.getMonth();
                        var year = date.getFullYear();
                       
                        var hour = date.getHours();
                        var minute = date.getMinutes();
                        var second = date.getSeconds();
                       
                        if (hour < 10) hour = "0" + hour;
                        if (minute < 10) minute = "0" + minute;
                        if (second < 10) second = "0" + second;
                       
                        var datetime = days_array[day] + ", " + number_day + " " +
                        month_array[month] + " " + year + " roku,<br />\n" +
                        hour + ":" + minute + ":" + second;
                       
                        var div = document.getElementById("date");
                        div.innerHTML = datetime;
                }
               
                function off() {
                        var div = document.getElementById("date");
                        div.innerHTML = "Najedź tutaj, aby wyświetlić datę i czas";
                }
               
                function load() {
                        var div = document.getElementById("date");
                        div.onmouseover = on;
                        div.onmouseout = off;
                }
                window.onload = load;
        </script>
 </head>
 <body>
        <div id="date">Najedź tutaj, aby wyświetlić datę i czas</div>
 </body>
</html>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=4972

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: lukaaspl Ranga: Poziom 7 Punktów: 200
Komentarze użytkowników
Zegarek łatwy do zainstalowania i nawet ładnie wygląda, ale jednak trochę psuje całą stronę na której się znajduje...
autor: sebulek | 5330 | 2010-03-10 20:32:42


    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors