Вёрстка страницы сайта теплохода «Пурга»

13 июля 2014 JavaScript

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

В результате получилась вот такая вёрстка.

Кроме прочего клиенту предоставляется возможность выбрать количество часов для мероприятия. В макете был приведён вариант «5 часов». Всё бы ничего, но если менять только число часов, получаются отвратительные «1 часов», «2 часов» и пр. Об этом писал Артемий Лебедев в своём Ководстве: «§ 98. Здравствуйте, с вами говорит робот.»

Заказчик не ставил такой задачи, но отдавать некачественную работу мне совсем не хотелось. Да склонения потребовали дополнительных усилий, но результат стоил того. Теперь сайт корректно сообщает: «1 час», «2 часа», …, «4 часа», «5 часов», …

Реализация склонения числительных на javascript выполнена в виде функции. При вызове функции передаётся непосредственно числительное и все формы склонения — функция возвращает нужную из них.

function plural(n,form1,form2,form5) {

	n = Math.abs(n) % 100;
	var n1 = n % 10;

	if (n > 10 && n < 20) {
		return form5
	};
	if (n1 > 1 && n1 < 5) {
		return form2
	};
	if (n1 == 1) {
		return form1
	};

    return form5;
}

var hour;

hour = 1;
console.log( hour + plural( hour,' час',' часа',' часов' ) );
// 1 час

hour = 3;
console.log( hour + plural( hour,' час',' часа',' часов' ) );
// 3 часа

hour = 1357;
console.log( hour + plural( hour,' час',' часа',' часов' ) );
// 1357 часов

Кроме этого наткнулся на замечательную библиотеку formatter.js для форматированного заполнения полей формы.