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

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

задний план

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

Недавно в нашем отделе прошло годовое собрание, а также была проведена лотерея. За несколько дней до годового собрания ко мне неожиданно подошел Босс и сказал, что для ежегодного собрания отдела будет использована лотерейная программа. Я тогда был ошеломлен: всего за три дня, если в программе есть баг, не захлебнется ли он плевком сотого человека на месте происшествия? Ни в коем случае, Босс казался настолько уверенным во мне, что мне пришлось стиснуть зубы.

нужно

Хотите страницу настроек, включая настройки наград, список участников и т. д.
Если для одного приза слишком много победителей, его можно разыгрывать партиями, и можно установить количество людей в каждой партии.
По умолчанию лотерея будет разыгрываться в порядке наград, или вы можете выбрать определенную награду для начала.
Победители, которые не явились, могут быть удалены и снова выбраны в качестве замены.
Вы можете переключаться между любыми наградами, и вы можете проверить список рекордов-победителей.
Поддержка отмены результата лотереи текущего раунда и розыгрыша снова.

выполнить

Для разработчика веб-интерфейса естественно думать об использовании веб-технологий для достижения этой цели. Исходя из принципа не повторять колесо, сначала обратитесь к Google и Github. Я искал вокруг, и я не могу найти особенно полезную программу, которую можно использовать напрямую. Позже я увидел проект на Github, использующийTagCanvasПрограмма для лотереи, которую я сделал, имеет хороший интерфейс, но есть проблема с логикой, и она вылетает после нескольких кликов. Код нельзя использовать, но для справки можно использовать лотерейную форму облака тегов. Так что я нашел документ и посмотрел на основное использование, и вскоре он был интегрирован в страницу.

Поскольку страница настроек предполагает множество взаимодействий, чистый почерк требует слишком много времени, а фреймворк используется напрямую. Обычно Element UI используется очень часто, поэтому я использую его естественно. Учитывая, что на месте ежегодного собрания может не быть сети, скачайте JS и CSS, относящиеся к фреймворку, на локалку и обратитесь к нему напрямую. Для быстрой разработки не был построен инструмент построения веб-пакетов, а JS был внедрен непосредственно в браузер.

    <link rel="stylesheet" href="css/reset.css" />
    <link
      rel="stylesheet"
      href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
    />
    <script src="js/polyfill.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui@2.4.11/lib/index.js"></script>
    <script src="js/member.js"></script>

Сначала спроектируйте структуру данных. Список наградawards

[{
    "name": "二等奖",
    "count": 25,
    "award": "办公室一日游"
}, {
    "name": "一等奖",
    "count": 10,
    "award": "BMW X5"
}, {
    "name": "特等奖",
    "count": 1,
    "award": "深圳湾一号"
}]

Список участниковmembers

[{
  "id": 1,
  "name": "张三"
}, {
  "id": 2,
  "name": "李四"
}]

Список людей, которых нужно нарисоватьplayers,Даmembersподмножество

[{
  "id": 1,
  "name": "张三"
}]

Список результатов лотереиresult, индексируется по порядку награждения

[[{
    "id": 1,
    "name": "张三"
}], [{
    "id": 2,
    "name": "李四"
}]]

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

Страница розыгрышей

Конкретный код может перейти к моемуГитхаб проектПроверьте это и нажмите звездочку, если это удобно. также сейчасиспытать это. Из-за спешки времени код был написан относительно быстро.

В день ежегодного собрания я выиграл четвертый приз: карточку для покупок на 1000 юаней. Должен ли я радоваться, что не выиграл главный приз...

есть небольшая просьба

Я написал в Наггетс более 20 технических статей, благодаря всеобщей любви есть несколько статей, которые были прочитаны более 10 000, а общее количество прочтений перевалило за 100 000. Большое спасибо за ваши золотые пальцы здесь! Но есть и небольшое сожаление: после каждой статьи я оставляю свой QR-код станции перевода в паблике WeChat 1024, но не знаю, почему мало кто обращает на это внимание. Если бы 10% читателей обращали внимание на каждую статью, наверное, я бы просыпался со смеху во сне, ха-ха... Это как моя детская мечта "Если бы вся страна дала мне один доллар, у меня были бы сотни миллионов! «Было, можно только сказать, чтоЧудо. Теперь у меня есть эта безумная идея, и я хочу пригласить вас создать ее вместе.Чудо! Пока вы двигаете своим золотым пальцем и следите за официальной учетной записью 1024 Translation Station, вы можете как можно скорее получить техническую галантерею, которую я создал с душой! Не тратьте ни копейки! WeChat также недавно запустил функцию платного чтения, что указывает на то, что взимание платы за высококачественный контент является основной тенденцией, и в будущем будет все меньше и меньше бесплатного высококачественного контента! Я также создал фан-группу в WeChat, если случится чудо, я обязательно вернусь! Ниже приведен QR-код, отсканируйте его мобильным телефоном и станьте свидетелем чуда вместе!