Веб-компас сайтостроителей
Часы и дата на JavaScript
В этой статье рассмотрим, как вывести дату и сделать часы на сайте с помощью JavaScript.
Для получения текущего времени воспользуемся объектом Date(), который без аргументов и возвращает нужное нам текущее время.
Но формат даты, определяемый этим объектом, нас не устраивает, для примера посмотрите
Для получения нужного нам формата нужно определить каждый компонент даты, то есть нужно вычислить день месяца, номер месяца и т.д. Для этого воспользуемся следующими функциями
То есть часы, минуты и секунды получим следующим образом
Вроде уже можно писать функцию для вывода часов, но есть один нюанс, если возвращаемое значение функциями getSeconds(), getMinutes() и getHours() будет меньше 10, то цифры 0 не будет впереди. Поэтому давайте напишем функцию представляющую вид часов в привычном для нас виде
В переменной time_wr будет время в привычном для нас виде. Теперь нужно нам это время вывести на экран монитора. Воспользоваться функцией document.write() не получиться в данном случае, так как нам же надо "тикающие" часы, то есть нужно время обновлять через определенный промежуток времени. Воспользуемся свойством innerHTML, которое есть у каждого элемента HTML-кода. Это свойство содержит весь HTML-код данного элемента. Его можно изменять. И если его изменить, то изменится HTML-код, содержащийся в элементе, а, следовательно, и содержимое веб-странички. Поэтому поступим следующим образом. Будем выводить время в элементе span, которому дадим уникальный идентификатор hours. Впоследствии в JavaScript-е получим к нему доступ выражением document.getElementById("hours")
В данном случае время не будет меняться, но чтобы время обновлялось, нужно функцию wr_hours() вызывать через определенное время. В этом нам поможет функция setInterval(), которая выполняет заданный код каждый раз по истечению заданного промежутка времени. Время в этой функции задается в миллисекундах.
Мы зададим интервал равный одной секунде (1000 миллисекунд). Чаще обновлять нет смысла, так как у нас время выводится с точностью до секунды. Соответственно получим следующий код
Теперь давайте добавим дату и день недели. Так как функции getDay() и getMonth() возвращают лишь числа, а мы хотим видеть названия дня недели и месяца, то добавим два массива с перечислением дней недели и названиями месяцев.
В итоге получим следующий код
И теперь на сайте будет дата и "тикающие" часы.
Часы и дата на JavaScript
Для получения текущего времени воспользуемся объектом Date(), который без аргументов и возвращает нужное нам текущее время.
Код
time=new Date();
Но формат даты, определяемый этим объектом, нас не устраивает, для примера посмотрите
Код
alert (Date());
Для получения нужного нам формата нужно определить каждый компонент даты, то есть нужно вычислить день месяца, номер месяца и т.д. Для этого воспользуемся следующими функциями
- getSeconds() - возвращает число секунд в диапазоне от 0 до 59;
- getMinutes() - возвращает число минут в диапазоне от 0 до 59;
- getHours() - возвращает число часов в диапазоне от 0 до 23;
- getDay() - возвращает день недели в диапазоне от 0 до 6 (0->воскресенье, 1 -> понедельник, и т.д.);
- getDate() - возвращает день месяца в диапазоне от 1 до 31;
- getMonth() - возвращает номер месяца в диапазоне от 0 до 11;
- getFullYear() - возвращает год в виде четырех чисел, минимальное значение 1970.
То есть часы, минуты и секунды получим следующим образом
Код
time=new Date();
time_sec=time.getSeconds();// получаем секунды
time_min=time.getMinutes();// получаем минуты
time_hours=time.getHours();// получаем часы
Вроде уже можно писать функцию для вывода часов, но есть один нюанс, если возвращаемое значение функциями getSeconds(), getMinutes() и getHours() будет меньше 10, то цифры 0 не будет впереди. Поэтому давайте напишем функцию представляющую вид часов в привычном для нас виде
Код
function wr_hours()
{
time=new Date();
time_sec=time.getSeconds();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+=":";
time_wr+=((time_sec<10)?"0":"")+time_sec;
}
В переменной time_wr будет время в привычном для нас виде. Теперь нужно нам это время вывести на экран монитора. Воспользоваться функцией document.write() не получиться в данном случае, так как нам же надо "тикающие" часы, то есть нужно время обновлять через определенный промежуток времени. Воспользуемся свойством innerHTML, которое есть у каждого элемента HTML-кода. Это свойство содержит весь HTML-код данного элемента. Его можно изменять. И если его изменить, то изменится HTML-код, содержащийся в элементе, а, следовательно, и содержимое веб-странички. Поэтому поступим следующим образом. Будем выводить время в элементе span, которому дадим уникальный идентификатор hours. Впоследствии в JavaScript-е получим к нему доступ выражением document.getElementById("hours")
Код
...
<span id="hours"></span>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
function wr_hours()
{
time=new Date();
time_sec=time.getSeconds();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+=":";
time_wr+=((time_sec<10)?"0":"")+time_sec;
obj_hours.innerHTML=time_wr;
}
wr_hours();
</script>
...
В данном случае время не будет меняться, но чтобы время обновлялось, нужно функцию wr_hours() вызывать через определенное время. В этом нам поможет функция setInterval(), которая выполняет заданный код каждый раз по истечению заданного промежутка времени. Время в этой функции задается в миллисекундах.
Код
setInterval("{выражение}", {временной интервал});
Мы зададим интервал равный одной секунде (1000 миллисекунд). Чаще обновлять нет смысла, так как у нас время выводится с точностью до секунды. Соответственно получим следующий код
Код
...
<span id="hours"></span>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
function wr_hours()
{
time=new Date();
time_sec=time.getSeconds();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+=":";
time_wr+=((time_sec<10)?"0":"")+time_sec;
obj_hours.innerHTML=time_wr;
}
wr_hours();
setInterval("wr_hours();",1000);
</script>
...
Теперь давайте добавим дату и день недели. Так как функции getDay() и getMonth() возвращают лишь числа, а мы хотим видеть названия дня недели и месяца, то добавим два массива с перечислением дней недели и названиями месяцев.
Код
name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа", "сентября","октября", "ноября","декабря");
name_day=new Array ("воскресенье","понедельник","вторник", "среда","четверг", "пятница","суббота");
В итоге получим следующий код
Код
<html>
<head>
<title>Часы и дата на JavaScript</title>
</head>
<body>
<h1>Часы и дата на JavaScript</h1>
<div><span id="hours"></span>
</div>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");
name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");
function wr_hours()
{
time=new Date();
time_sec=time.getSeconds();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+=":";
time_wr+=((time_sec<10)?"0":"")+time_sec;
time_wr=" сегодня "+name_day[time.getDay()]+", "+time.getDate()+" "+name_month[time.getMonth()]+" "+time.getFullYear()+" г. время "+time_wr;
obj_hours.innerHTML=time_wr;
}
wr_hours();
setInterval("wr_hours();",1000);
</script>
</body>
</html>
И теперь на сайте будет дата и "тикающие" часы.
- Статью добавил пользователь
- Категория
- Дата размещения 08.07.2008, просмотров 51386
Еще статьи из данной категории
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
А вот не знаете ли вы, как написать скрипт, чтобы время менялось не только, когда я стр. обновляю, а каждую секунда...как бы в реальном времени?
Вопрос! На другую тему!
Как можно поставить калькулятор на сайт, чтобы завести расчеты по формулам как таблицы в exel?
Заранее спасибо.
<script type="text/javascript">
//This script is taken on http://westsidecrew.3dn.ru/ .You can use script only with this comment.
function clock()
{
date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) {hours = "0" + hours }
if (minutes < 10) {minutes = "0" + minutes }
if (seconds < 10) {seconds = "0" + seconds }
time = (hours + ":" + minutes + ":" + seconds);
hours=document.getElementById("hours");
hours.innerHTML=time;
}
setInterval("clock();",1000);
clock()
</script>
<div><span id="hours"></span></div>
Допустим в промежуток времени с 12-00 до 14-00 выводилась "Надпись 1"
а в промежуток времени с 14-00 до 14-20 выводилась "Надпись 2"
и так далее...
сайту +1
как создать часы для сайта, в сутках которых будет не 24 часа, а 72? При этом изменения по часовым поясам не предвидится...
все часы либо ориентированы на 24 часа, либо сразу подстраиваются под компьютер пользователя.
Пробовала написать на флеше - 72 часа не держит...покадровая разработка не устраивает.
возможен вариант с "растягиванием" суток на 72 часа (т.е. пишется 24, а тянется все 72).
очень нужна помощь в этом вопросе(
На такие вопросы трудно найти ответ в Google.
Проясните пожалуйста сам вот ентот синтаксис, если не затруднит, думаю енто не мне одному будет интересно.
<script type="text/javascript">
var tchk=true;
function getCurrentTime() {
var name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");
var name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");
var time=new Date();
var time_hours=time.getHours(time);
var time_minutes=time.getMinutes(time);
if (time_minutes<10) time_minutes='0' + time_minutes;
if (tchk) {
var time_str= 'Сегодня ' + name_day[time.getDay()] + ', ' + time.getDate() + ' ' + name_month[time.getMonth()] + ' ' + time.getFullYear() + ' года, ' + time_hours + '<font color="#000000">:</font>' + time_minutes;
tchk=false;
} else {
var time_str= 'Сегодня ' + name_day[time.getDay()] + ', ' + time.getDate() + ' ' + name_month[time.getMonth()] + ' ' + time.getFullYear() + ' года, ' + time_hours + '<font color="#FFFFFF">:</font>' + time_minutes;
tchk=true;
}
$("#time").html(time_str);
setTimeout(getCurrentTime,1000);
}
$(document).ready(function(){
getCurrentTime();
});
</script>
<span id="time" style="font-size:16pt;font-family:Arial;"></span>
obj_hours is null
это строка
obj_hours.innerHTML=time_wr;
Как избавиться от ошибки, подскажите, пожалуйста?
<span id="hours"></span>
перед кодом javascript.
Единственно была проблема как новичку, как разделить друг от друга часы день недели и дату, в итоге разобралась.
<html>
<head>
<title>Часы и дата на JavaScript</title>
</head>
<body>
<h1>Время,день недели и дата на JavaScript</h1>
<table width="250" border="0" cellpadding="0">
<tr>
<td align="center" valign="bottom"> <div style="font-size:86px" ><span id="hours" style="color:#FFF"></span>
</div>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");
name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");
function wr_hours()
{
time=new Date();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+="";
time_wr=" "+time_wr;
obj_hours.innerHTML=time_wr;
}
wr_hours();
setInterval("wr_hours();",1000);
</script>
<hr width="75%" align="center" style="color:#FFF"></td>
</tr>
<tr>
<td align="center" valign="middle" ><div style="font-size:48px" ><span id="day" style="color:#FFF"></span>
</div>
<script type="text/javascript">
obj_day=document.getElementById("day");
name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");
function wr_day()
{
time_wr=" "+name_day[time.getDay()]+"";
obj_day.innerHTML=time_wr;
}
wr_day();
setInterval("wr_day();",1000);
</script></td>
</tr>
<tr>
<td align="center" valign="middle"><div style="font-size:32px" ><span id="date" style="color:#FFF"></span>
</div>
<script type="text/javascript">
obj_date=document.getElementById("date");
name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");
function wr_date()
{
time_wr=" "+time.getDate()+" "+name_month[time.getMonth()]+" "+time.getFullYear()+"";
obj_date.innerHTML=time_wr;
}
wr_date();
setInterval("wr_date();",1000);
</script></td>
</tr>
</table>
</body>
</html>
Но остался вопрос как менять фонт шрифта?
<div id="privet_data_vrema"> <!-- Общий блок для приветствия, дня недели, даты и времени -->
<div id="privet"> <!-- Блок для приветствия -->
<script type="text/javascript">
day = new Date(); hour = day.getHours(); if (hour>=5 && hour<12) greeting = "Доброе утро!"; else { if (hour>=12 && hour<18) greeting = "Добрый день!"; else { if (hour>=18 && hour<24) greeting = "Добрый вечер!"; else { if (hour>=0 && hour<5) greeting = "Доброй ночи!"; } } } document.write(greeting);
</script></div>
<div id="den_nedeli"> <!-- Блок для дня недели -->
Сегодня! <script language="javascript" type="text/javascript"><!--
var d = new Date();
var day=new Array("Воскресенье","Понедельник","Вторник",
"Среда","Четверг","Пятница","Суббота");
document.write(day[d.getDay()]);
</script></div>
<div id="datas"> <!-- Блок для дня даты -->
<script language="javascript" type="text/javascript"><!--
var d = new Date();
var month=new Array("Января","Февраля","Марта","Апреля","Мая","Июня",
"Июля","Августа","Сентября","Октября","Ноября","Декабря");
document.write(d.getDate()+ " " + month[d.getMonth()]
+ " " + d.getFullYear() + " года!");
</script></div>
<div id="times"> <!-- Блок для времени -->
<span id="hours"></span>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
function wr_hours()
{
time=new Date();
time_sec=time.getSeconds();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+=":";
time_wr+=((time_sec<10)?"0":"")+time_sec;
obj_hours.innerHTML=time_wr;
}
wr_hours();
setInterval("wr_hours();",1000);
</script></div>
</div>
/*Стиль общего блока приветствия, день недели. дата, время*/
#privet_data_vrema{
margin:0px;
padding:0px;
height:46px;
width:330px;
border:1px solid #FF0;
}
#privet{
margin:0px;
padding:0px;
font-size:20px;
text-align:center;
color:#906;
}
#den_nedeli{
margin:0px;
margin-top:4px;
margin-right:10px;
padding:0px;
font-size:16px;
color:#0F0;
float:left;
}
#datas{
margin:0px;
margin-top:4px;
padding:0px;
font-size:16px;
color:#333;
}
#times{
margin:0px;
margin-top:-14px;
padding:0px;
font-size:16px;
color:#333;
float:right;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Э.Ф.А. - Экономика. Финансы. Анализ.</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="NeonHTML 4.5">
<style type="text/css">
body {
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<img src="images/logo1.jpg" />
<div><div style="text-align:right;"><span id="hours"></span>
</div>
<script language="JavaScript" type="text/javascript">
<!--
obj_hours=document.getElementById("hours");
name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");
name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");
function wr_hours(){
time=new Date();
time_sec=time.getSeconds();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+=":";
time_wr+=((time_sec<10)?"0":"")+time_sec;
time_wr=" Сегодня "+name_day[time.getDay()]+", "+time.getDate()+" "+name_month[time.getMonth()]+" "+time.getFullYear()+" г. время "+time_wr;
obj_hours.innerHTML=time_wr;
}
wr_hours();
setInterval("wr_hours();",1000);
-->
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Э.Ф.А. - Экономика. Финансы. Анализ.</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="NeonHTML 4.5">
<style type="text/css">
body {
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div><div style="text-align:right;">
<img src="images/logo1.jpg" />
<span id="hours"></span>
</div>
<script language="JavaScript" type="text/javascript">
<!--
obj_hours=document.getElementById("hours");
name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");
name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");
function wr_hours(){
time=new Date();
time_sec=time.getSeconds();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
time_wr+=":";
time_wr+=((time_sec<10)?"0":"")+time_sec;
time_wr=" Сегодня "+name_day[time.getDay()]+", "+time.getDate()+" "+name_month[time.getMonth()]+" "+time.getFullYear()+" г. время "+time_wr;
obj_hours.innerHTML=time_wr;
}
wr_hours();
setInterval("wr_hours();",1000);
-->
</script>
</body>
</html>