Пример оформления
(пример розыгрыша взят тут)
Друзья, Ланселот вместе с 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>
Расстановку блоков при оформлении конкретно этого примера можно посмотреть на стриншоте
