Генератор случайных цифр

23 ноября 2020

Виджет генератора случайных чисел.
— задается диопазон «от» и «до»;
— старт в один клик;
— перебор других значений до того самого выигрышного
Область применения: розыгрыши, выбор победителей из пронумерованного списка и все со своим брендированием

Пример оформления

(пример розыгрыша взят тут)

Друзья, Ланселот вместе с Minerva De Vi Photography хочет подарить одному из вас возможность сделать прекрасные фотографии с Ланселотом абсолютно бесплатно! Поэтому мы устраиваем розыгрыш фотосессии.

И сегодня пришло время подвести итоги!

Генератор случайных цифр. Фотограф Константин Шамин

От До

Как это сделано

Код виджета как обычно вставляется в HTML-блок

<style>
#generator {
   text-align: center;
   cursor: pointer;
}
.number_size_100 {
   font-size: 250px;
}
.number_size_1000 {
   font-size: 180px;
}
.number_size_10000 {
   font-size: 140px;
}
.colorize {
   color: #990000; /* цвет цифры-победителя */
}
input {
   width: 100px;
   box-shadow: none;
   color: inherit;
   font-size: 15px;
   line-height: 1.5;
   vertical-align: top;
   padding: 12px 14px;
   outline: none;
   transition: background 0.3s;
   border: 0;
   border-radius: 10px;
   background: rgba(53,53,53,0.05);
}
</style>

<script>
function generate(min,max) {
   return Math.round(Math.random() * (max - min) + min);
};

function psora(k, n) {
  var r = Math.PI * (k ^ n)
  return r - Math.floor(r)
}

$(document).ready(function () {
   $("#generator").on("click", function(){
      $("#generator").removeClass("colorize");
      if ($("#max").val()>=100) { $("#generator").removeClass("number_size_10000 number_size_1000").addClass("number_size_100"); }
      if ($("#max").val()>=1000) { $("#generator").removeClass("number_size_100 number_size_10000").addClass("number_size_1000"); }
      if ($("#max").val()>=10000) { $("#generator").removeClass("number_size_100 number_size_1000").addClass("number_size_10000"); }

      var n=0;
      for (var i = 0; i < 20; i++) {
         setTimeout(function() {
            var randnum = generate($("#min").val(),$("#max").val());
            $("#generator").html(randnum);
            n++;
            if (n==20) { $("#generator").addClass("colorize"); }
         }, 100 * i);
      };
   });
});
</script>

<div style="width:100%; text-align:center;">
   <label for="min">От</label>
   <input type="number" value="1" id="min" name="min" class="field">
   <label for="max">До</label>
   <input type="number" value="100" id="max" name="max" class="field">
</div>

<div id="generator" class="number_size_100">?</div>