когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Нет лототрона, как быть? JavaScript генератор случайных чисел
Йо-йо! 18.05 я побывал на мастер-классе Максима Батырева «Менджре и комманда», о своих впечатлениях я рассказал у себя в дзен-блоге. Компания в которой я работаю являлась официальным партнёром мероприятия и мы разыгрывали год хостинга бесплатно.
Инициатива розыгрыша призов исходила от организаторов мероприятия. Мы напечатали билеты (о том как печатал билеты), нарезали их и…. и оказалось, что у них нет лототрона. Бы долго искали аренду этой штуки, но так и не нашли (за приемлемую плату).
Что делать если у тебя нет лототрона а ты из it-компании?!) Правильно! — писать рандомную сортировку!
Процесс
Самое важное в такой штуке как розыгрыш призов — это действительный рандом. Тут не должно быть факторов которые могли бы вызвать подозрения.
Истинный рандом
Я уже раньше использовал генератор случайных чисел для случайной сортировки элементов (пример). Но там была самая простая версия рандома. Позже я нашёл статью на habr в которой я нашёл «супер-функцию» для получение истинно случайного числа. После этого я создал более продвинутую версию.
Собственно как выглядит в итоге функция для случайной сортировки элементов:
function putToCache(elem, cache){
if(cache.indexOf(elem) != -1){
return;
}
var i = Math.floor(Math.random()*(cache.length + 1));
cache.splice(i, 0, elem);
}
function madness(){
var cache = [];
return function(a, b){
putToCache(a, cache);
putToCache(b, cache);
return cache.indexOf(b) - cache.indexOf(a);
}
}
// Собственно сама функция сортировки
function shuffle(arr){
var compare = madness();
return arr.sort(compare);
}
Когда у меня была готовая сортировка элементов я перешёл к более лёгким вещам.
Сортировка и объявление билетов
Так как у меня было 350 билетов я просто их создал в цикле.
childs = [];
for(var i = 1; i < 351; i++){
childs.push(i);
}
Если у вас есть конкретные имена номера билетов то вы можете их объявить в массиве.
Далее в js нашёл элементы и на кнопку повесил обработчик нажатия
const btn = document.getElementById('btn')
const result = document.getElementById('result');
btn.addEventListener('click', ()=>{
// Действия по нажатию
});
Эпичность прокрутки номеров
Для того, чтобы создать эмоциональную напряжённость нужно было создать прокрутку номеров.
Схематически она работает так: При нажатии я показываю случайные номера с некоторым интервалом, спустя некоторое время я отключаю прокрутку номеров и показываю победителя.
Как это выразить в коде
// Объявляю интервал и записываю его в переменную
const interval = setInterval(()=>{
childs = shuffle(childs);
// Записываю случайный номер в блок с результатом
result.textContent = childs[0];
}, 50);
setTimeout(()=>{
// Удаляю интервал
clearInterval(interval);
// Получаю опять заново отсортированный массив
childs = shuffle(childs);
// Записываю его в результа
result.textContent = childs[0];
}, 2000); // 2 секунды, можно больше
Смекалка рулит! Не унывайте в непредвиденных ситуация, вы же it-шники. Кстати, скоро релиз SJ v0.5.0. Там я добавил адаптивность!
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.