Lottery.js
🎲 Это простое приложение для розыгрыша на JavaScript, основанное на Zepto или jQuery, которое можно легко интегрировать в существующую систему.
Спонсоры
Предварительный просмотр
Особенности
Использование
Подготовьте данные участников розыгрыша:
[
{
"avatar": "//example.com/avatar_1.jpg", // Адрес изображения аватара
"name": "MeetMore", // Имя
"data": { // Дополнительные данные этого пользователя
"company": "MeetMore Inc.",
"title": "CEO",
...
}
},
……
]
Включите CSS и JS на странице:
<!-- Zepto or jQuery -->
<script src="http://zeptojs.com/zepto.min.js"></script>
<link rel="stylesheet" href="./lottery.min.css" />
<script src="./lottery.compact.min.js"></script>
Готово к работе:
$.lottery({
api:"./api.json"
});
Параметры
$.lottery({
el: ".lottery", // Где выводить розыгрыш с помощью селектора jquery
timeout: 10, // Время автоматического завершения розыгрыша (в секундах)
once: true, // Каждый человек может выиграть только один раз (чтобы предотвратить повторные выигрыши)
title: "company", // Заголовок на экране победителя data[key]
subtitle: "title", // Подзаголовок на экране победителя data[key]
api: "http://example.com/lottery.json", // Адрес данных участников розыгрыша (необязательный, если указан, то данные будут проигнорированы)
data: [], // Непосредственно передать данные участников
confetti: true, // Отображать анимацию конфетти при выигрыше
showbtn: true, // Показать кнопку управления розыгрышем
speed: 400, // Интервал времени до следующего участника, в миллисекундах
number: 3 // Количество победителей за раунд
});
Параметр | Описание | Значение по умолчанию | Возможные значения |
---|---|---|---|
el | Где вывести розыгрыш | body | С помощью селектора jQuery, например, «.lottery» |
timeout | Время автоматического завершения розыгрыша, в секундах | null | 10 (целое число, секунды) |
once | Каждый человек может участвовать только один раз (повторные выигрыши невозможны) | false | true — включить |
title | Заголовок на экране победителя | user['name'] | user['data'][key] (ключ содержимого в дополнительных данных) |
subtitle | Подзаголовок на экране победителя | user['company'] | user['data'][key] (ключ содержимого в дополнительных данных) |
api | Передать данные участников в формате JSON | null | URL |
data | Непосредственно передать данные участника | null | Object |
confetti | Отображать анимацию конфетти при выигрыше (если здесь не включено, можно не включать confetti.js) | true | false |
showbtn | Показать кнопку управления розыгрышем | true | false |
speed | Интервал времени до следующего участника, в миллисекундах | 350 | false |
number | Сколько победителей за раунд | 1 | int |
API
$.lottery('start');
$.lottery('stop');
$.lottery('getUsers');
$.lottery('winners', 'get');
$.lottery('winners', 'clean');
$.lottery('history', 'show');
$.lottery('history', 'get');
$.lottery('history', 'clean');
Параметр | Описание | Возвращаемое значение |
---|---|---|
start | Начать розыгрыш | true |
stop | Остановить розыгрыш | Объект, информация о победителях |
getUsers | Получить список пользователей | Объект, список пользователей |
winners, get | Получить список победителей | Объект, список победителей |
winners, clean | Очистить информацию о победивших участниках (вернуть участников обратно в пул) | true |
history, show | Показать историю розыгрышей | true |
history, get | Получить историю розыгрышей | Объект, история розыгрышей |
history, clean | Очистить историю розыгрышей | true |
Победители будут очищены после обновления страницы, а история розыгрышей будет сохранена в LocalStorage и не будет очищена.
Поддержка браузеров
Современные браузеры.
Лицензия
Copyright © Duohui.co — Apache License 2.0
Благодарности
— confetti.js создан Хавьером Сосой (Javier Sosa) — Иконки созданы Ясиром Б. Эрильмазом (Okay: Yasir B. Eryılmaz), Пундимоном (Crown: Pundimon) и Дэвидом Ю (Dice: davidyu) из Noun Project — Move.js создан Ти Джеем Холовейчуком (TJ Holowaychuk)
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )