Автор

Дата на сайте HTML

Дата на сайте HTML


 

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта)  усадьбы «Сказка»!

 

Вот весь скрипт даты:

 

<script language="javascript" type="text/javascript"><!--
var d = new Date();

var day=new Array("Воскресенье","Понедельник","Вторник",
"Среда","Четверг","Пятница","Суббота");

var month=new Array("января","февраля","марта","апреля","мая","июня",
"июля","августа","сентября","октября","ноября","декабря");

document.write(day[d.getDay()]+" " +d.getDate()+ " " + month[d.getMonth()]
+ " " + d.getFullYear() + " г.");
//--></script>

По-моему, проще некуда, достаточно красиво и понятно. Если у вас нет никакого желания изучать построение этого скрипта, то просто вставляйте его в любое место HTML-страницы и получите следующую надпись:

 

 

Еще один вариант более расширенный

<script type="text/javascript">// <![CDATA[
 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);
// ]]&gt;
// ]]&gt;
// ]]&gt;
// ]]&gt;
// ]]&gt;
// ]]></script>
!  Сегодня
<script type="text/javascript">// <![CDATA[
// <![CDATA[
var d = new Date();

var day=new Array("Воскресенье","Понедельник","Вторник",
"Среда","Четверг","Пятница","Суббота");

var month=new Array("января","февраля","марта","апреля","мая","июня",
"июля","августа","сентября","октября","ноября","декабря");

document.write(day[d.getDay()]+" " +d.getDate()+ " " + month[d.getMonth()]
+ " " + d.getFullYear() + " г.");
// ]]&gt;
// ]]&gt;
// ]]&gt;
// ]]&gt;
// ]]&gt;
// ]]></script>

 

Выглядит он так:

! Сегодня

 

 

Вобщем не требуется никаких навыков, просто тупо вставляем код и все ок!

 

Подробнее:

 

Итак, начинаем с присвоения значения даты переменной d, затем создаём массивы (Array) для дней недели (day) и месяцев (month), указывая их в необходимой грамматической форме: падеж, число, заглавная буква, если слово стоит в начале даты и т.п. Последняя строчка скрипта - собственно печать даты (document.write). Здесь вы устанавливаете, что и в какой последовательности будете выводить в строке текущей даты. Компоненты отделяются друг от друга знаком +. Для ввода пробела используется конструкция " ", а для ввода буквы г (год) - конструкция "  г."

Как видно из скрипта, получение данных о текущем времени выполняет элемент get. Этот метод позволяет получить следующую информацию:

  • getDate() - возвращает число от 1 до 31, представляющее число месяца;
  • getDay() - возвращает день недели как целое число от 0 (воскресенье) до 6 (суббота);
  • getMonth() - возвращает номер месяца в году;
  • getFullYear() - возвращает год. Если использовать просто getYear(), то будет выводиться текущий год минус 1900;
  • get Hours() - возвращает час суток;
  • getMinutes() - возвращает минуты как число от 0 до 59;
  • getSeconds() - возвращает число секунд от 0 до 59.

Вставлять непосредственно Java-скрипт внутрь страницы сайта не всегда удобно. Лучше поместить описание скрипта в начало страницы между тегами <head></head> и задать переменную, которую будем вызывать по мере необходимости в тексте. Назовём её TODAY и определим в ней форму вывода даты аналогично вышеизложенному. Скрипт будет выглядеть следующим образом:

<script language="javascript" type="text/javascript">
</script>

 

Для вывода даты вызываем скрипт в нужном месте HTML-кода страницы, используя следующую команду:

<script language="javascript" type="text/javascript">
document.write(TODAY);
</script>

Если ваш сайт содержит много страниц, на которых надо показывать дату, то удобнее выделить Java-скрипт вывода даты в отдельный файл, например, data.js. Практически, это страница, состоящая из первого из описанных скриптов, то есть со строкой document.write (см. выше). Располагать её надо в том же каталоге, что и основная страница, и вызывать в месте вывода даты следующим образом:

<script language="javascript" type="text/javascript" src="data.js" >
</script>

Не забудьте проверить, чтобы файл data.js имел ту же кодировку, что и основной документ, иначе дата будет выводиться замечательными крючками, квадратиками и прочими финтифлюшками.

Замечание. Следует иметь ввиду, что описанный скрипт выводит дату, установленную на компьютере пользователя, что не всегда соответствует реальному текущему времени. Если вам необходимо показать точное время, то необходимо использовать РНР-скрипт, который будет показывать время на сервере.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

Дата на сайте HTML

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


Дата на сайте HTML

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.


Дата на сайте HTML

Коллекция причудливых текстовых эффектов, чтобы оживить теглайн и кнопки действий вашего сайта.


Дата на сайте HTML

Все чаще пользователи просят нас навести примеры реализации ховер-эффектов. Эти эффекты позволяют не только скрыть, но и оживить необходимые элементы. В сегодняшнем уроке мы предоставим вашему вниманию замечательный набор прикольных ховер-эффектов, в работе которых используются современные CSS техники и 3D эффекты. Такие эффекты станут отличным дополнением для изображений или мультимедийных контентов на ресурсе. Данные ховеры должны Вас вдохновить на собственные, креативные решения для ваших сайтов.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close