Она может предсказать что угодно, если правильно её настроить.
Несколько лет назад была настоящая криптолихорадка: люди покупали и продавали биткоины, майнили эфир, скупали видеокарты и царил дух авантюризма. В те времена все искали проверенные источники, инсайды и аналитику, которые помогут принять верное решение о покупке.
Как и всегда, прогнозы — дело неблагодарное, и прогноз из серии «Пальцем в небо» будет всяко точнее. Поэтому мы решили автоматизировать этот процесс: сделать универсальную аналитическую машину, которая способна прогнозировать что угодно, от курса доллара до маршрута лосося на нерест. Метод прогнозирования хорошо изучен — наугад.
Сейчас наша машина умеет предсказывать поведение курса криптовалюты в ближайшей перспективе:
Что происходит на самом деле
Вся эта история про аналитическую машину — полный фейк. Мы придумали этот проект от начала и до конца, и логика была такая:
- Показать красивый прогресс-бар.
- Запустить его по кнопке, чтобы он начал работать.
- Пока он движется, выводим всякие сообщения, чтобы создать видимость работы. Очень важно, чтобы человек на том конце думал, что машина реально что-то прогнозирует.
- В конце показываем какое-то сообщение, мол, вот ваш прогноз. Сообщение может быть совершенно рандомным, на качество прогноза это не влияет.
В итоге получилась машина, которая просто показывает вам красивый прогресс-бар и выдаёт в итоге рандомную фразу. В принципе, ничем не хуже большинства прогнозных систем, только мы честно об этом говорим.
Зачем этот проект
Этот проект — упражнение в главной составляющей программистского дзена: бери чужое, вкручивай в своё. Мы будем пользоваться готовыми чужими решениями и получим в итоге работающий и довольно полезный продукт.
Прогресс-бар
Сделать красивый прогресс-бар — дело не пяти минут, поэтому мы поискали уже готовые решения в Сети и нашли вот такое:
Там было почти всё, что нам нужно, кроме двух вещей:
- прогресс-бар заполнялся слишком быстро,
- не менялись надписи в процессе работы.
Мы не будем показывать весь исходный код, потому что можно зайти в начальный проект и посмотреть — вместо этого покажем, что поменяли.
Замедляем прогресс-бар. Смотрим в function preload(imgArray):
Было:
$(imgArray).each(function() {
$('<img>').attr("src", this).load(function() {
$progress.animate({
width: "+=" + increment + "%"
}, 100);
});
Стало:
var i = 0;
while (i < 300) {
$progress.animate({
width: "+=" + 0.25 + "%"
}, 100);
i = i+1;
}
Вместо того, чтобы увеличивать прогресс на какую-то непонятную величину, мы прибавляем к нему на каждом шаге всего по 0.25 пункта. Это мало, поэтому двигаться будет медленно. Число 300 в цикле мы подобрали опытным путём: почему-то если прибавлять по 0.25, то именно за 300 шагов мы наберём 100%.
Выводим сообщения по ходу работы. Смотрим в ту же функцию.
Было: ничего, потому что в исходном проекте этого не требовалось.
Стало:
Первые 5 раз мы сравниваем показатели процентов на шкале с каким-то числом и если совпадаем — выводим то, что лежит в переменной. В последнем сравнении выдаём проценты и финальный текст. Про переменные расскажем ниже.
Готовим текст
У нас уже был проект, где мы генерировали текст случайным образом. Возьмём оттуда немного кода и перепишем для себя:
Логика простая:
- готовим шаблоны текста для каждого этапа;
- вставляем функцию, которая вернёт нам случайное число в нужном диапазоне;
- заполняем финальные значения случайным образом.
Вернитесь немного назад и посмотрите: именно эти переменные мы использовали в разделе, когда сравнивали значения с процентами на шкале и выводили результат.
Собираем страницу
Основное мы сделали, осталось всё это красиво разместить в браузере. Берём код страницы исходного проекта, немного правим и получаем такое:
Мы добавили кнопку и раздел с тегом <p> для финального текста. Всё остальное донастроим в скрипте.
Запуск по кнопке
В исходном проекте прогресс-бар начинает работать автоматически сразу после загрузки страницы. Нам такое не нужно, а нужно, чтобы всё запускалось после нажатия на кнопку. Поэтому снова правим скрипт.
Убираем автозагрузку. За это отвечает свойство $(window).load(function(). Находим его и полностью удаляем эту функцию.
Привязываем запуск к кнопке. Помните, мы правили функцию function preload(imgArray)? Именно она отвечает за работу всего прогресс-бара. Чтобы привязать её к кнопке, оборачиваем вызов функции в такой код:
function launch() {
preload(demoImgArray);
}
Смотрим, чтобы в описании кнопки на странице тоже всё было правильно:
<button value="Получить предсказание по крипте" onclick="launch();">Получить прогноз по криптовалюте</button>
Строка onclick="launch()" означает, что при нажатии на кнопку сработает функция launch(), а именно она у нас в скрипте отвечает за запуск прогресс-бара.
Делаем кнопку одноразовой. Чтобы всё работало без сбоев и предсказуемо, давайте запретим нажимать на кнопку больше одного раза. Для этого используем jQuery в функции preload(imgArray):
$('button').prop('disabled', true);
Этот код делает следующее:
- Находит на странице элемент <button>.
- Присваивает свойству кнопки disabled значение true. Это значит, что кнопка становится неактивной — она видна, но нажать на неё нельзя. То что нужно.
Что в результате
Мы разместили свою версию проекта на сайте — можно пользоваться самому и делиться с друзьями. Если вы хотите сделать себе такое же и даже круче — держите исходный код:
index.html
style.css
script.js
В этом коде много лишних строк, он неоптимальный и его можно существенно улучшить. Но главное — он уже работает, и его можно быстро допилить под свои задачи. Поэтому вот домашнее задание для тех, кто хочет идеал:
- найти и убрать лишние функции;
- заменить настоящую загрузку картинок (посмотрите внимательно код) на что-то не настолько нагрузочное;
- сделать больше вариантов текста на каждом этапе.
Подписывайтесь на наш канал, чтобы не пропустить новые интересные проекты!
