19 заметок с меткой javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

bbondarenko.ru

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

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

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

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

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

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

Простой счётчик переходов по ссылкам на сайте

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

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

<script src="jquery.js"></script> //подключаем 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"]) и записывает в базу. Визуализация этих данных выходит за рамки этой заметки. Например, можно нарисовать карту кликов, как в Яндекс.Метрике. Но даже по текстовым таблицам уже можно сделать выводы.

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

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

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

Демо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор персонажа

Вчера мы ходили к моей сестре Кате на День рождения. Все гости были в костюмах сказочных героев — это Катя такой сценарий придумала. А меня попросила решить задачу распределения ролей с такими условиями:

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

Кажется, это идеальные условия для создания онлайн-сервиса:

Онлайн-сервис выбора персонажа написан «на коленке» при помощи jquery, php и mysql. Все запросы идут по ajax. Работает на любых устройствах, где есть интернет. Кате осталось только разместить ссылку вКонтакте — и на следующий день все уже выбрали свои роли.

Да, я был в роли Джека Воробья :) Фотки выложу попозже :)

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

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

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

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

Маршрут через МКАДМаршрут из Москвы в МОМаршрут по МО

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

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

ekofriend.com

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

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

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

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

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

cs-fashion.ru

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

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

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

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

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

Не так давно изменилась привычная форма таблицы Менделеева. Новая принятая форма выглядит так:

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

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

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

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

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

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

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

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

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

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

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

Сайт VODALUX’а

vodalux.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017