24 заметки с меткой javascript
📅 30 марта

Пузыринг или как раздеть девушку

Оголите части тела девушки на фотографии, спрятав лишние детали одежды при помощи пузырей. Потренируйтесь на готовых девушках или загрузите свои изображения.

Фото для тренировки

Цвет фона Скачать
Reset

Как пользоваться сервисом?

• Создать пузырь: клик на свободном месте фотографии.
• Изменить размер: колесо мыши или жест двумя пальцами.
• Удалить: двойной клик по пузырю.

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

Что такое пузыринг или BUBBLING

Техника BUBBLING, или по-русски пузыринг, была придумана неким монахом, которому религия запретила смотреть на обнажённых женщин. Но это не точно 😃

После пузыринга девушка выглядит полностью голойПосле пузыринга девушка выглядит полностью голой

Секрет прост: берётся фото в купальнике, далее закрашиваются все участки тела в одежде, а голые участки — остаются. При просмотре таких фотографий фантазия творит чудеса, и всё самое интересное дорисовывается нашим воображением.

Видео-инструкция

На подходе... Заходите позже 😃

📅 23 марта

Бросить кубик онлайн

Бросить кубик

Многие люди колдуют над кубиком перед тем, как его бросить. Что-то шепчут, загадывают, чтобы выпала заветная шестёрка ⚅. Данный сервис уравнивает шансы всех игроков в плане везения или нечестных бросков. Чтобы начать, вы можете просто кликнуть по кубику или по кнопке «Бросить кубик». Чтобы начать новую игру — обновите страницу.

Если вы играете вдвоём / втроём или более, правильнее всего сделать так: каждому игроку открыть данный сайт на своём телефоне, чтобы у каждого был свой кубик. Иначе может получиться так, что все ваши ⚅-ки достанутся соседу )

Если есть вопросы — читайте далее, почему данный алгоритм назван «Честным», и насколько он вам подходит.

▼ Читать дальше

📅 16 марта

API Яндекс Карт: расчёт доставки по зонам

Задача:
рассчитать стоимость доставки товара по городу, учитывая различные тарифные зоны. Выбрать и сгруппировать заказы, которые удобно доставить курьером за одну поездку.

Данный модуль создан на движке Яндекс.Карт и предназначается для CRM-системы службы доставки. На вход поступают данные о всех новых (ещё не обработанных) заказах: номер заказа, желаемое время и адрес доставки. На выходе получается таблица, в которой перечислены заказы, расстояние от офиса, стоимость доставки в зависимости от тарифной зоны. Если адрес находится за пределами города, то показан километраж за МКАДом, а стоимость увеличивается с учётом цены за километр.

Сервис API Яндекс.Карт рассчитывает точки не мгновенно. На обработку и просчёт 10 точек уходит примерно 1-2 секунды. Поэтому пункты просчитываются по одному, и в это время таблица недоступна. После того, как все точки рассчитаны, менеджеру можно приступать к обработке заказов.

  • Поступившие заказы обрабатываются по одному, в итоге получается таблица с ценамиПоступившие заказы обрабатываются по одному, в итоге получается таблица с ценами

Здесь реализована синхронизация карты и таблицы. Заказы можно выбирать как на карте, так и в самой таблице. Кнопка «Только выделенные» оставляет на карте только выделенные заказы — так удобнее оценить, успеет ли курьер объехать все эти точки за один день.

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

📅 16 декабря 2018

Плавная прокрутка страницы к якорю с сохранением хеша на jQuery

Стандартное поведение браузеров при клике на якорную ссылку может сбить человека с толку. Потому что страница скроллится мгновенно, и человек не понимает, в какое место страницы он попал (вверх или вниз), да и вообще — остался ли он на данной странице, или перешёл на другую.

Чтобы это исправить, будем использовать плавную прокрутку на javascript или jquery. Плавная прокрутка до элемента ясно даёт понять, что мы остались на том же сайте, и куда именно прокрутилась страница.

План скрипта

Обычная функция типа scrollTo делает прокрутку, но это было бы слишком грубо и не учитывало все нюансы. А вот что требуется от правильного скрипта:

1) отменить стандартные действия браузера при клике по таким ссылкам;
2) определить расстояние до элемента, к которому нужно прокрутить;
3) плавно, то есть, без тормозов прокрутить страницу на это расстояние;
4) изменить window.location.hash — часть адреса страницы после решётки #.

▼ Читать дальше

📅 6 марта 2018

Плавная прокрутка страницы на чистом javascript

На одном из сайтов нужно было реализовать прокрутку (скролл) страницы наверх с плавной анимацией. На jquery это делается одной командой:

$("html,body").animate({scrollTop:0},500);

А на чистом яваскрипте немного сложнее:

var t;
function scrolltop() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) {
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
} else {
clearTimeout(t);
}
return false;
}

Переменная top равна текущему расстоянию прокрутки страницы в пикселях. Каждые 30 мс эта величина уменьшается в 1,5 раза, в итоге плавно достигает нуля. Это имитация свойства ease-out в CSS анимациях.

Если вам нужно скроллить страницу наверх линейно, без ускорения, то пишем как-то так:

window.scrollTo(0,-20);

Тогда страница будет скроллиться наверх со скоростью 20 пикселей в 30 мс.

Чем обусловлен период в 30 мс? Кофмортная частота обновления экрана — примерно 30 кадров в секунду, значит, продолжительность каждого кадра — 30 мс. Для идеальной гладкости можно сделать 60 кадров в секунду, и тогда таймауты должны быть примерно по 15 мс. Но это может подтромаживать на слабых устройствах.

📅 4 мая 2017

Калькулятор вероятности

Готовые варианты задачи:

Парадокс дней рожденияОн же для трёх человекОдно число на двух кубиках4 чёрных подряд в рулетке5 / 30 одного знака зодиака

Объектов в группе

Из них с одинаковыми параметрами
или более

Различных комбинаций параметров

Количество опытов (точность)
 × 100

Рассчитать вероятность

Если нужно повысить точность результатов, увеличьте количество опытов. При этом скрипт будет работать дольше.

Калькулятор считает не строго по формулам, а базируется на случайных числах.

Калькулятор плохо отслеживает критические случаи. Например, такая задача: с какой вероятностью в классе из 36 человек найдётся 4 или более учеников одного знака зодиака? Очевидно, не 100%, потому что существует «идеальное» распределение, когда на каждый знак зодиака придётся ровно по три ученика. Но вероятность такой ситуации ничтожно мала, и она может не выпасть в калькуляторе даже при 1 млн опытов. Поэтому калькулятор показывает 100%.

📅 4 мая 2017

Как определить фейковые отзывы

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

Что знает о нас любой сайт?

Часть параметров передаёт браузер при обращении к серверу, а другую часть можно определить с помощью яваскрипта и передать аяксом.

  • IP-адрес
  • название и версию ОС
  • название и версию браузера
  • разрешение экрана и размер окна браузера
  • прочие параметры...

Айпи можно скрыть с помощью специальных сервисов или плагинов. Про остальное обычно забывают. Однако этих данных достаточно, чтобы с большой вероятностью вычислить спам-комментарии на одном и том же сайте (или на сетке своих сайтов, или в сообществе сайтов одной тематики).

▼ Читать дальше

📅 5 февраля 2016

Калькулятор стоимости поездки

автовозов.рф/расчет-онлайн

Калькулятор нужен для того, чтобы человек прикинул, сколько будет стоить поездка из точки А в точку Б. При подсчёте учитывается марка автомобиля, количество грузчиков, время в пути, а также через какие тарифные зоны Москвы или Подмосковья проходит маршрут.

Этапы работы калькулятора

  • Главные поля — откуда и куда, а справа — карта с тарифными зонамиГлавные поля — откуда и куда, а справа — карта с тарифными зонами

Повышение доверия

Показательно, что многие посетители вводят только адрес старта и финиша. Если их устраивает цена, они не доводят заказ до конца, а сразу же звонят. Уточнив детали у менеджера, они радуются, что сумма поездки совпадает с цифрами из калькулятора. Таким образом, калькулятор работает на повышение конверсии и доверия.

📅 31 октября 2014

Сайт Братьев Бондаренко

bbondarenko.ru

Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.

  • Главная страница: большая фотка и предложение запустить демо-роликГлавная страница: большая фотка и предложение запустить демо-ролик

Сайт занимает всю ширину и высоту на любом мониторе или планшете (на смартфоне поддерживается только горизонтальная ориентация). Пункты меню переключаются без перезагрузки страницы.

Фишка сайта — постоянный плеер в нижней части:

Плеер работает на любом устройствеПлеер работает на любом устройстве

Замечу, что плеер включается только по желанию пользователя, а песня не прерывается при переходе в другой раздел сайта. Это классно: запустил красивую музыку и спокойно изучаешь сайт. А если открыть видео, то плеер ставится на паузу.

📅 2 июля 2014

Простой счётчик для сайта на jquery

Возникла задача проследить, на какие ссылки кликает пользователь на сайте. С использованием jquery клиентский скрипт получился очень простым: вешаем событие на всю страницу, если кликнули по ссылке — отправляем аяксом все нужные параметры (ссылка, её координаты на странице, браузер и т.д.)

Чтобы сработало обычное действие ссылки (и события от других счётчиков), функция возвращает true, не дожидаясь успешного ответа от сервера.

//подключаем jquery

var vizit_start = Math.round(new Date().getTime() / 1000);
//запоминаем время захода на страницу (timestamp в секундах)
$('body').click(function(e) {
var a_click=e.target;
//a_click - объект, по которому кликнули
if($(a_click).is('a')) {
//если это ссылка, то отправляем данные
var a_pos=$(a_click).position();
//теперь переменная a_pos хранит координаты объекта
var vizit_sec = Math.round(new Date().getTime() / 1000) - vizit_start;
//время визита = разница во времени
$.ajax({
//отправка данных аяксом
url:"http://site.ru/sledilka.php",
//куда отправляем данные
type:"POST",
//методом POST
data:{
page:location.href,
//адрес текущей страницы
width:$("html").width(),
//ширина страницы (контента)
height:$("html").height(),
//высота страницы (контента)
left:a_pos.left,
//координата ссылки X
top:a_pos.top,
//координата ссылки Y
url:$(a_click).attr('href'),
//куда ведёт ссылка
txt:$(a_click).text(),
//текст ссылки
browser:navigator.userAgent,
//инфа о браузере и ОС
vizit:vizit_sec
//время визита в секундах
},
dataType: "text"
//данные представлены как текст
});
}
return true;
});

Скачать скрипт

Серверная часть принимает данные POST-ом (например, время визита: $_POST["vizit"]) и записывает в базу. Визуализация этих данных выходит за рамки этой заметки. Например, можно нарисовать карту кликов, как в Яндекс.Метрике. Но даже по текстовым таблицам уже можно сделать выводы.

📅 29 марта 2014

Проверка адаптивного сайта

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

{adaptiv}

Что такое адаптивный сайт?

Адаптивный сайт автоматически подстраивается под ширину устройства. При этом блоки сайта могут скрываться или видоизменяться. Например, на компьютере логотип и меню сайта располагаются слева направо, а на телефоне — сверху вниз.

Чем отличается адаптивный сайт от мобильной версии?

Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.

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

Данная проблема решается двумя способами: добавить мобильную версию m.site.ru или НЕ делать отдельный сайт, но добавить вашему основному сайту адаптивности. Это специальные стили и скрипты, которые включаются, если ширина экрана слишком мала: например, спрятать меню, увеличить шрифт, вместо крупных изображений показать маленькие и т.п.

Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.

Адаптивный сайт совмещает в себе и обычный (для PC), и мобильный (для телефонов), и несколько промежуточных вариантов (крупные телефоны, планшеты, телевизоры и т.д.). Главное преимущество адаптивного сайта — он хорошо выглядит на любой ширине экрана.

Почему ширина телефона в данном сервисе такая маленькая?

Реальное количество пикселей на современных гаджетах, как правило, очень велико, а сайты не рассчитаны на такую огромную ширину. Поэтому мобильные устройства с экранами повышенной чёткости открывают сайты, приведя их к некоему виртуальному стандарту. Чтобы узнать эти цифры у себя, нажмите кнопку, открыв эту страницу с телефона или планшета:

Какой у меня размер окна браузера?

На устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.

Таким образом, для разработчиков важны примерно 3 ключевых размера: 320, 480 и 800 точек в ширину. 1280 — это уже размер обычной PC-версии. Если остались вопросы, читайте подробнее в заметке про адаптивный дизайн.

📅 4 мая 2013

Сортировка таблицы на jquery без плагинов

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

Прямая и обратная сортировка таблицы по разным столбикамПрямая и обратная сортировка таблицы по разным столбикам

Демо

Скрипт получился из 20 строк, 1 кб (готовый tablesorter весит 13 кб и дольше «усваивается»). Ещё одно отличие: подготовительные операции для сортировки происходят по клику; это имеет смысл, потому что сортировка нужна не всем.

Первым делом нужно присвоить идентификаторы каждой строчке таблицы. Это лучше сделать сразу на сервере при выводе таблицы:

<tr id="z_1" ><td> ... </td></tr>
<tr id="z_2" ><td> ... </td></tr>
...

Теперь идентификатор будет привязан к строке с данными, и если её переставить в другое место, ничего не перепутается.

▼ Читать дальше

📅 21 апреля 2013

Определение координат полигонов на Яндекс.Картах

Яндекс запустил новый конструктор карт, и теперь собственная карта с пометками вставляется всего одной строчкой скрипта. Это удобно для большинства пользователей, но в новом коде встраивания нет координат объектов.

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

Клик по карте включает режим рисования полигона, следующим кликом ставится первая точка полигона (и так далее). После завершения (клик по точке → завершить) можно таким же образом рисовать следующий полигон. По нажатию кнопки внизу отобразятся координаты всех полигонов (в порядке рисования), потом зум и центр карты.

📅 1 марта 2013

Захват большой Яндекс.Карты для печати

(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)

В предыдущей заметке я рассказал, как захватить большое изображение (карту) по частям при помощи скриншотов и Фотошопа. Однако если есть средства для управления картой (API), то можно лёгким движением получить карту любого размера:

Такая карта получится в итогеТакая карта получится в итоге

Зачем вообще такая большая карта? Неужели нельзя проматывать её на экране, или купить карту нужной области, повесить на стенку и втыкать в неё флажки?

С помощью инструментов Яндекс.Карт на карте можно расположить «умные» метки (например, разноцветные), маршруты и любую другую информацию. Эти операции можно выполнить вручную или автоматически. Потом карта с информацией печатается, вешается на стенку: это удобно, потому что видно сразу всю карту, а не только её часть. После распечатывания остаётся возможность порисовать на готовой карте.

Или вот ещё идея: распечатать карту с крестиками, а в них воткнуть настоящие флажки. Если объектов сотня, экономится немало времени.

Захват карты в 2 шага

Нам нужно:
1) отобразить карту необходимого масштаба и размера в браузере,
2) сохранить всю страницу в виде картинки (в том числе фрагменты, выходящие за область экрана).

▼ Читать дальше

📅 14 декабря 2011

Расчёт маршрута (API Яндекс.Карт)

Доделал сервис расчёта маршрутов для сайта «МК-Лидер» (с помощью API Яндекс.Карт). Задача была непростая: внутри МКАД одни расценки, за МКАД — другие. Например, для сквозного маршрута через МКАД из Зеленограда до Красногорска нужно рассчитать 5 участков:

1) выезд от базы до Зеленограда,
2) Зеленоград — МКАД,
3) кусочек по МКАДу,
4) МКАД — Красногорск,
5) возврат из Красногорска на базу.

Кроме путей по Москве (внутри МКАД) есть маршруты сквозные, из Москвы в Московскую область (или наоборот), а также только по МО:

▼ Читать дальше

📅 26 ноября 2011

Эко-упаковка от EKOFRIEND

ekofriend.com

На сайте можно заказать красивую экологически чистую упаковку (пакеты, корзиночки, коробочки). Дизайн хорошо передаёт эко-направленность:

Главная страницаГлавная страница

Мною выполнены вёрстка, дорисовка недостающих элементов и программирование.

▼ Читать дальше

📅 19 октября 2011

Интернет-магазин одежды cs-fashion.ru

cs-fashion.ru

Завершил разработку миниоптового интернет-магазина cs-fashion.ru:

На главной странице — флешка и каталогНа главной странице — флешка и каталог

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

▼ Читать дальше

📅 12 октября 2011

Таблица Менделеева

Недавно изменилась форма таблицы Менделеева, привычная нам ещё со школы. Новая форма имеет 18 ячеек в ширину вместо 10, она более красивая и величественная 😃

По этому случаю для сайта xumuk.ru был сделан новый адаптивный сервис:

Интерактивная таблица МенделееваИнтерактивная таблица Менделеева

Искомые элементы подсвечиваются при вводе. Можно искать по названию или его части, обозначению, атомной массе — короче говоря, по любому параметру из таблицы.

Посмотреть сервис в работе: Таблица Менделеева на xumuk.ru.

▼ Читать дальше

📅 16 мая 2011

Сервис ЕГЭ для XuMuK.ru

Тесты по ЕГЭ в форме привычных бланков:

Автопереключение: ответили на 13-й вопрос, сразу включается 14-йАвтопереключение: ответили на 13-й вопрос, сразу включается 14-й

▼ Читать дальше

📅 13 мая 2011

Поиск законов для «Правотеки»

Небольшой сервис поиска законов и статей в режиме реального времени для сайта «Правотеки»:

Всего 3 клика мышкой — и нужный закон перед вамиВсего 3 клика мышкой — и нужный закон перед вами
📅 22 апреля 2011

Сайт VODALUX’а

vodalux.ru

На сайте представлены основные подразделения компании. Каждая кнопка слева ведёт либо на галерею, либо на нужный адрес. Галерея — это «разбросанные» фотки, которые увеличиваются при наведении.

Основной сайт компании VODALUXОсновной сайт компании VODALUX

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

© Дизайн не мой (я просто разверстал и использовал яву-скрипт 😃

📅 3 октября 2010

Калькуляторы услуг для «Гудвила»

В каждом разделе сайта компании «Гудвил», где имело смысл делать калькулятор, расположился соответствующий значок:

Нажимаем и попадаем на нужный калькуляторНажимаем и попадаем на нужный калькулятор

Допустим, вы заинтересовались услугами для ИП с работниками и читаете этот раздел сайта. Тогда откроется нужный калькулятор с нужными вам функциями, и не нужно будет разбираться в каком-то универсальном сервисе с кучей параметров.

Правильно заполнены не все пунктыПравильно заполнены не все пункты

▼ Читать дальше

📅 19 октября 2009

Гальванопара для XuMuK.ru

ГальванопараГальванопара

Оригинал сервиса на сайте xumuk.ru:
Определение полярности электродов и ЭДС гальванического элемента.

📅 25 сентября 2009

Конвертер величин для XuMuK.ru

В русском интернете можно найти 2-3 приличных конвертера величин. Теперь появился ещё один сервис, в стиле сайта XuMuK.ru:

Лошадиные силы переводим в киловаттыЛошадиные силы переводим в киловатты

Тестируем: Перевод физических величин на xumuk.ru.

▼ Читать дальше

Иван ТитовИван Титов
Веб-дизайнер,
разработчик
★ Москва
© 2004 – 2019