БлогNot. Простой календарь праздников на Javascript

Простой календарь праздников на Javascript

Ещё недавно на многих сайтах было очень модно выводить некие дополнительные сообщения, привязанные к текущей дате по часам компьютера посетителя, например, пару слов о том, какой нынче праздник. Сегодня такой функционал тоже не потерял актуальности и вряд ли когда-нибудь потеряет. Мы хотим реализовать максимально простой вариант кода, работающий без серверного программирования, то есть, на Javascript прямо из HTML-разметки документа.

Для простоты примем, что:

  • нас интересуют только даты в формате "день-месяц";
  • данные описаны статически в коде страницы и не нужно подгружать их удалённо.

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

  • подготовить элемент, куда будет выводиться результат поиска праздника, у нас это раздел с идентификатором holidayId;
  • по событию загрузки страницы приготовить вызов функции-замыкания, названной checkHoliday, аргументом которой передан этот идентификатор;
  • написать функцию, в которой реализовать хранение массива объектов-праздников и код для интерфейса с этим массивом.

Вот соответствующий скрипт в работе и листингом, листинг нужно сохранять как файл типа .html в кодировке Юникода utf-8.

Сегодня нет праздника...

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8" />
  <title>Праздники</title>
 </head>
 <body>

<div id="holidayId" style="background-color: #ccffcc">Сегодня нет праздника...</div>
<script>
 var checkHoliday = function (id) {
  var Holidays = [ //месяцы с единицы!
   //о каждом празднике в формате день, месяц, описание
   { day: 1, month: 1, desc: 'Новый год' },
   { day: 7, month: 1, desc: 'Рождество' },
   { day: 23, month: 2, desc: 'День Мужыка' },
   { day: 8, month: 3, desc: 'День Бабы' },
   { day: 1, month: 5, desc: 'Первомай' },
   { day: 9, month: 5, desc: 'День Победы' },
   { day: 23, month: 5, desc: 'ДР нашего любимого Одмина' },
   { day: 1, month: 6, desc: 'День защиты детей' },
   { day: 1, month: 9, desc: 'День знаний' },
   { day: 7, month: 11, desc: 'День большевичка' },
   { day: 31, month: 12, desc: 'Новый год' }
  ];
  function today () { //сегодняшняя дата в формате { day: 31, month: 12 }
   var t = new Date();
   var d = t.getDate();
   var m = t.getMonth() + 1;
   return { day: d, month: m };
  }
  function check (t) { //поиск праздника, вернём его номер в списке или -1
   for (var i=0; i<Holidays.length; i++)
    if (Holidays[i].day == t.day && Holidays[i].month == t.month) return i;
   return -1;
  }
  function strDate (t) { //дата t в формате "31 декабря"
   var monthes = [ '','января','февраля','марта','апреля','мая','июня',
   'июля','августа','сентября','октября','ноября','декабря' ];
   return t.day + ' ' + monthes[t.month];
  }
  var t = today();
  var k = check(t);
  if (k > -1) { //если найдено
   var el = document.getElementById (id);
   el.innerHTML = strDate(t)+': '+Holidays[k].desc;
  }
 } 
 window.addEventListener('load', function (e) { 
  checkHoliday('holidayId'); //передать id элемента, куда пишем!
 });  
</script>
<noscript>Нужен включённый в браузере Javascript для работы приложения!</noscript>

</body></html>

Вот кодик, чтобы сделать в элементе с id="data" список-заготовку всех дней года в формате "день-месяц" для первого скрипта. В получившемся списке данные корректно выровнены, остаётся только заполнить описания дней.

<pre><div id="data"></div></pre>
<script>
 var listOfDays = function (id) {
  var list = 'var Holidays = [';
  var days = [31,29,31,30,31,30,31,31,30,31,30,31];
  for (var m=0; m<12; m++) {
   for (var d=1; d<=days[m]; d++) {
    list += "\n" + ' { day: '+ (d<10 ? ' ' : '') + d + 
            ', month: '+(m<9 ? ' ' : '') + (m+1) + ', desc: \'\' }' +
            (m==11 && d==31 ? '' : ',');
   }
  }
  list += "\n" + '];'
  document.getElementById (id).innerHTML = list;
 }

 window.addEventListener('load', function (e) { 
  listOfDays('data'); //передать id элемента, куда пишем!
 });  
</script>
<noscript>Нужен включённый в браузере Javascript для работы приложения!</noscript>

Вот результат работы этого скрипта, если выполнить его из файла .html:

var Holidays = [
 { day:  1, month:  1, desc: '' },
 { day:  2, month:  1, desc: '' },
 { day:  3, month:  1, desc: '' },
 { day:  4, month:  1, desc: '' },
 { day:  5, month:  1, desc: '' },
 { day:  6, month:  1, desc: '' },
 { day:  7, month:  1, desc: '' },
 { day:  8, month:  1, desc: '' },
 { day:  9, month:  1, desc: '' },
 { day: 10, month:  1, desc: '' },
 { day: 11, month:  1, desc: '' },
 { day: 12, month:  1, desc: '' },
 { day: 13, month:  1, desc: '' },
 { day: 14, month:  1, desc: '' },
 { day: 15, month:  1, desc: '' },
 { day: 16, month:  1, desc: '' },
 { day: 17, month:  1, desc: '' },
 { day: 18, month:  1, desc: '' },
 { day: 19, month:  1, desc: '' },
 { day: 20, month:  1, desc: '' },
 { day: 21, month:  1, desc: '' },
 { day: 22, month:  1, desc: '' },
 { day: 23, month:  1, desc: '' },
 { day: 24, month:  1, desc: '' },
 { day: 25, month:  1, desc: '' },
 { day: 26, month:  1, desc: '' },
 { day: 27, month:  1, desc: '' },
 { day: 28, month:  1, desc: '' },
 { day: 29, month:  1, desc: '' },
 { day: 30, month:  1, desc: '' },
 { day: 31, month:  1, desc: '' },
 { day:  1, month:  2, desc: '' },
 { day:  2, month:  2, desc: '' },
 { day:  3, month:  2, desc: '' },
 { day:  4, month:  2, desc: '' },
 { day:  5, month:  2, desc: '' },
 { day:  6, month:  2, desc: '' },
 { day:  7, month:  2, desc: '' },
 { day:  8, month:  2, desc: '' },
 { day:  9, month:  2, desc: '' },
 { day: 10, month:  2, desc: '' },
 { day: 11, month:  2, desc: '' },
 { day: 12, month:  2, desc: '' },
 { day: 13, month:  2, desc: '' },
 { day: 14, month:  2, desc: '' },
 { day: 15, month:  2, desc: '' },
 { day: 16, month:  2, desc: '' },
 { day: 17, month:  2, desc: '' },
 { day: 18, month:  2, desc: '' },
 { day: 19, month:  2, desc: '' },
 { day: 20, month:  2, desc: '' },
 { day: 21, month:  2, desc: '' },
 { day: 22, month:  2, desc: '' },
 { day: 23, month:  2, desc: '' },
 { day: 24, month:  2, desc: '' },
 { day: 25, month:  2, desc: '' },
 { day: 26, month:  2, desc: '' },
 { day: 27, month:  2, desc: '' },
 { day: 28, month:  2, desc: '' },
 { day: 29, month:  2, desc: '' },
 { day:  1, month:  3, desc: '' },
 { day:  2, month:  3, desc: '' },
 { day:  3, month:  3, desc: '' },
 { day:  4, month:  3, desc: '' },
 { day:  5, month:  3, desc: '' },
 { day:  6, month:  3, desc: '' },
 { day:  7, month:  3, desc: '' },
 { day:  8, month:  3, desc: '' },
 { day:  9, month:  3, desc: '' },
 { day: 10, month:  3, desc: '' },
 { day: 11, month:  3, desc: '' },
 { day: 12, month:  3, desc: '' },
 { day: 13, month:  3, desc: '' },
 { day: 14, month:  3, desc: '' },
 { day: 15, month:  3, desc: '' },
 { day: 16, month:  3, desc: '' },
 { day: 17, month:  3, desc: '' },
 { day: 18, month:  3, desc: '' },
 { day: 19, month:  3, desc: '' },
 { day: 20, month:  3, desc: '' },
 { day: 21, month:  3, desc: '' },
 { day: 22, month:  3, desc: '' },
 { day: 23, month:  3, desc: '' },
 { day: 24, month:  3, desc: '' },
 { day: 25, month:  3, desc: '' },
 { day: 26, month:  3, desc: '' },
 { day: 27, month:  3, desc: '' },
 { day: 28, month:  3, desc: '' },
 { day: 29, month:  3, desc: '' },
 { day: 30, month:  3, desc: '' },
 { day: 31, month:  3, desc: '' },
 { day:  1, month:  4, desc: '' },
 { day:  2, month:  4, desc: '' },
 { day:  3, month:  4, desc: '' },
 { day:  4, month:  4, desc: '' },
 { day:  5, month:  4, desc: '' },
 { day:  6, month:  4, desc: '' },
 { day:  7, month:  4, desc: '' },
 { day:  8, month:  4, desc: '' },
 { day:  9, month:  4, desc: '' },
 { day: 10, month:  4, desc: '' },
 { day: 11, month:  4, desc: '' },
 { day: 12, month:  4, desc: '' },
 { day: 13, month:  4, desc: '' },
 { day: 14, month:  4, desc: '' },
 { day: 15, month:  4, desc: '' },
 { day: 16, month:  4, desc: '' },
 { day: 17, month:  4, desc: '' },
 { day: 18, month:  4, desc: '' },
 { day: 19, month:  4, desc: '' },
 { day: 20, month:  4, desc: '' },
 { day: 21, month:  4, desc: '' },
 { day: 22, month:  4, desc: '' },
 { day: 23, month:  4, desc: '' },
 { day: 24, month:  4, desc: '' },
 { day: 25, month:  4, desc: '' },
 { day: 26, month:  4, desc: '' },
 { day: 27, month:  4, desc: '' },
 { day: 28, month:  4, desc: '' },
 { day: 29, month:  4, desc: '' },
 { day: 30, month:  4, desc: '' },
 { day:  1, month:  5, desc: '' },
 { day:  2, month:  5, desc: '' },
 { day:  3, month:  5, desc: '' },
 { day:  4, month:  5, desc: '' },
 { day:  5, month:  5, desc: '' },
 { day:  6, month:  5, desc: '' },
 { day:  7, month:  5, desc: '' },
 { day:  8, month:  5, desc: '' },
 { day:  9, month:  5, desc: '' },
 { day: 10, month:  5, desc: '' },
 { day: 11, month:  5, desc: '' },
 { day: 12, month:  5, desc: '' },
 { day: 13, month:  5, desc: '' },
 { day: 14, month:  5, desc: '' },
 { day: 15, month:  5, desc: '' },
 { day: 16, month:  5, desc: '' },
 { day: 17, month:  5, desc: '' },
 { day: 18, month:  5, desc: '' },
 { day: 19, month:  5, desc: '' },
 { day: 20, month:  5, desc: '' },
 { day: 21, month:  5, desc: '' },
 { day: 22, month:  5, desc: '' },
 { day: 23, month:  5, desc: '' },
 { day: 24, month:  5, desc: '' },
 { day: 25, month:  5, desc: '' },
 { day: 26, month:  5, desc: '' },
 { day: 27, month:  5, desc: '' },
 { day: 28, month:  5, desc: '' },
 { day: 29, month:  5, desc: '' },
 { day: 30, month:  5, desc: '' },
 { day: 31, month:  5, desc: '' },
 { day:  1, month:  6, desc: '' },
 { day:  2, month:  6, desc: '' },
 { day:  3, month:  6, desc: '' },
 { day:  4, month:  6, desc: '' },
 { day:  5, month:  6, desc: '' },
 { day:  6, month:  6, desc: '' },
 { day:  7, month:  6, desc: '' },
 { day:  8, month:  6, desc: '' },
 { day:  9, month:  6, desc: '' },
 { day: 10, month:  6, desc: '' },
 { day: 11, month:  6, desc: '' },
 { day: 12, month:  6, desc: '' },
 { day: 13, month:  6, desc: '' },
 { day: 14, month:  6, desc: '' },
 { day: 15, month:  6, desc: '' },
 { day: 16, month:  6, desc: '' },
 { day: 17, month:  6, desc: '' },
 { day: 18, month:  6, desc: '' },
 { day: 19, month:  6, desc: '' },
 { day: 20, month:  6, desc: '' },
 { day: 21, month:  6, desc: '' },
 { day: 22, month:  6, desc: '' },
 { day: 23, month:  6, desc: '' },
 { day: 24, month:  6, desc: '' },
 { day: 25, month:  6, desc: '' },
 { day: 26, month:  6, desc: '' },
 { day: 27, month:  6, desc: '' },
 { day: 28, month:  6, desc: '' },
 { day: 29, month:  6, desc: '' },
 { day: 30, month:  6, desc: '' },
 { day:  1, month:  7, desc: '' },
 { day:  2, month:  7, desc: '' },
 { day:  3, month:  7, desc: '' },
 { day:  4, month:  7, desc: '' },
 { day:  5, month:  7, desc: '' },
 { day:  6, month:  7, desc: '' },
 { day:  7, month:  7, desc: '' },
 { day:  8, month:  7, desc: '' },
 { day:  9, month:  7, desc: '' },
 { day: 10, month:  7, desc: '' },
 { day: 11, month:  7, desc: '' },
 { day: 12, month:  7, desc: '' },
 { day: 13, month:  7, desc: '' },
 { day: 14, month:  7, desc: '' },
 { day: 15, month:  7, desc: '' },
 { day: 16, month:  7, desc: '' },
 { day: 17, month:  7, desc: '' },
 { day: 18, month:  7, desc: '' },
 { day: 19, month:  7, desc: '' },
 { day: 20, month:  7, desc: '' },
 { day: 21, month:  7, desc: '' },
 { day: 22, month:  7, desc: '' },
 { day: 23, month:  7, desc: '' },
 { day: 24, month:  7, desc: '' },
 { day: 25, month:  7, desc: '' },
 { day: 26, month:  7, desc: '' },
 { day: 27, month:  7, desc: '' },
 { day: 28, month:  7, desc: '' },
 { day: 29, month:  7, desc: '' },
 { day: 30, month:  7, desc: '' },
 { day: 31, month:  7, desc: '' },
 { day:  1, month:  8, desc: '' },
 { day:  2, month:  8, desc: '' },
 { day:  3, month:  8, desc: '' },
 { day:  4, month:  8, desc: '' },
 { day:  5, month:  8, desc: '' },
 { day:  6, month:  8, desc: '' },
 { day:  7, month:  8, desc: '' },
 { day:  8, month:  8, desc: '' },
 { day:  9, month:  8, desc: '' },
 { day: 10, month:  8, desc: '' },
 { day: 11, month:  8, desc: '' },
 { day: 12, month:  8, desc: '' },
 { day: 13, month:  8, desc: '' },
 { day: 14, month:  8, desc: '' },
 { day: 15, month:  8, desc: '' },
 { day: 16, month:  8, desc: '' },
 { day: 17, month:  8, desc: '' },
 { day: 18, month:  8, desc: '' },
 { day: 19, month:  8, desc: '' },
 { day: 20, month:  8, desc: '' },
 { day: 21, month:  8, desc: '' },
 { day: 22, month:  8, desc: '' },
 { day: 23, month:  8, desc: '' },
 { day: 24, month:  8, desc: '' },
 { day: 25, month:  8, desc: '' },
 { day: 26, month:  8, desc: '' },
 { day: 27, month:  8, desc: '' },
 { day: 28, month:  8, desc: '' },
 { day: 29, month:  8, desc: '' },
 { day: 30, month:  8, desc: '' },
 { day: 31, month:  8, desc: '' },
 { day:  1, month:  9, desc: '' },
 { day:  2, month:  9, desc: '' },
 { day:  3, month:  9, desc: '' },
 { day:  4, month:  9, desc: '' },
 { day:  5, month:  9, desc: '' },
 { day:  6, month:  9, desc: '' },
 { day:  7, month:  9, desc: '' },
 { day:  8, month:  9, desc: '' },
 { day:  9, month:  9, desc: '' },
 { day: 10, month:  9, desc: '' },
 { day: 11, month:  9, desc: '' },
 { day: 12, month:  9, desc: '' },
 { day: 13, month:  9, desc: '' },
 { day: 14, month:  9, desc: '' },
 { day: 15, month:  9, desc: '' },
 { day: 16, month:  9, desc: '' },
 { day: 17, month:  9, desc: '' },
 { day: 18, month:  9, desc: '' },
 { day: 19, month:  9, desc: '' },
 { day: 20, month:  9, desc: '' },
 { day: 21, month:  9, desc: '' },
 { day: 22, month:  9, desc: '' },
 { day: 23, month:  9, desc: '' },
 { day: 24, month:  9, desc: '' },
 { day: 25, month:  9, desc: '' },
 { day: 26, month:  9, desc: '' },
 { day: 27, month:  9, desc: '' },
 { day: 28, month:  9, desc: '' },
 { day: 29, month:  9, desc: '' },
 { day: 30, month:  9, desc: '' },
 { day:  1, month: 10, desc: '' },
 { day:  2, month: 10, desc: '' },
 { day:  3, month: 10, desc: '' },
 { day:  4, month: 10, desc: '' },
 { day:  5, month: 10, desc: '' },
 { day:  6, month: 10, desc: '' },
 { day:  7, month: 10, desc: '' },
 { day:  8, month: 10, desc: '' },
 { day:  9, month: 10, desc: '' },
 { day: 10, month: 10, desc: '' },
 { day: 11, month: 10, desc: '' },
 { day: 12, month: 10, desc: '' },
 { day: 13, month: 10, desc: '' },
 { day: 14, month: 10, desc: '' },
 { day: 15, month: 10, desc: '' },
 { day: 16, month: 10, desc: '' },
 { day: 17, month: 10, desc: '' },
 { day: 18, month: 10, desc: '' },
 { day: 19, month: 10, desc: '' },
 { day: 20, month: 10, desc: '' },
 { day: 21, month: 10, desc: '' },
 { day: 22, month: 10, desc: '' },
 { day: 23, month: 10, desc: '' },
 { day: 24, month: 10, desc: '' },
 { day: 25, month: 10, desc: '' },
 { day: 26, month: 10, desc: '' },
 { day: 27, month: 10, desc: '' },
 { day: 28, month: 10, desc: '' },
 { day: 29, month: 10, desc: '' },
 { day: 30, month: 10, desc: '' },
 { day: 31, month: 10, desc: '' },
 { day:  1, month: 11, desc: '' },
 { day:  2, month: 11, desc: '' },
 { day:  3, month: 11, desc: '' },
 { day:  4, month: 11, desc: '' },
 { day:  5, month: 11, desc: '' },
 { day:  6, month: 11, desc: '' },
 { day:  7, month: 11, desc: '' },
 { day:  8, month: 11, desc: '' },
 { day:  9, month: 11, desc: '' },
 { day: 10, month: 11, desc: '' },
 { day: 11, month: 11, desc: '' },
 { day: 12, month: 11, desc: '' },
 { day: 13, month: 11, desc: '' },
 { day: 14, month: 11, desc: '' },
 { day: 15, month: 11, desc: '' },
 { day: 16, month: 11, desc: '' },
 { day: 17, month: 11, desc: '' },
 { day: 18, month: 11, desc: '' },
 { day: 19, month: 11, desc: '' },
 { day: 20, month: 11, desc: '' },
 { day: 21, month: 11, desc: '' },
 { day: 22, month: 11, desc: '' },
 { day: 23, month: 11, desc: '' },
 { day: 24, month: 11, desc: '' },
 { day: 25, month: 11, desc: '' },
 { day: 26, month: 11, desc: '' },
 { day: 27, month: 11, desc: '' },
 { day: 28, month: 11, desc: '' },
 { day: 29, month: 11, desc: '' },
 { day: 30, month: 11, desc: '' },
 { day:  1, month: 12, desc: '' },
 { day:  2, month: 12, desc: '' },
 { day:  3, month: 12, desc: '' },
 { day:  4, month: 12, desc: '' },
 { day:  5, month: 12, desc: '' },
 { day:  6, month: 12, desc: '' },
 { day:  7, month: 12, desc: '' },
 { day:  8, month: 12, desc: '' },
 { day:  9, month: 12, desc: '' },
 { day: 10, month: 12, desc: '' },
 { day: 11, month: 12, desc: '' },
 { day: 12, month: 12, desc: '' },
 { day: 13, month: 12, desc: '' },
 { day: 14, month: 12, desc: '' },
 { day: 15, month: 12, desc: '' },
 { day: 16, month: 12, desc: '' },
 { day: 17, month: 12, desc: '' },
 { day: 18, month: 12, desc: '' },
 { day: 19, month: 12, desc: '' },
 { day: 20, month: 12, desc: '' },
 { day: 21, month: 12, desc: '' },
 { day: 22, month: 12, desc: '' },
 { day: 23, month: 12, desc: '' },
 { day: 24, month: 12, desc: '' },
 { day: 25, month: 12, desc: '' },
 { day: 26, month: 12, desc: '' },
 { day: 27, month: 12, desc: '' },
 { day: 28, month: 12, desc: '' },
 { day: 29, month: 12, desc: '' },
 { day: 30, month: 12, desc: '' },
 { day: 31, month: 12, desc: '' }
];

теги: дата javascript программирование

27.10.2019, 11:33; рейтинг: 53