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.
Listing
<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>
-
-
Tre¶æ komentarza
-
