|
Выбор скидки для магазина с помощью хомяка на JSРазбирал недавно старые материалы и нашел забавную штуку: небольшой скрипт на JS для интернет-магазина, с помощью которого можно выбирать себе скидку. Нажимаем кнопку и по колесу начинает бегать хомяк, одновременно крутится скидка в виде меняющихся чисел. Нажимаем остановить – хомяк останавливается и появляется та скидка, на которую вы можете рассчитывать. Демо ниже: 
Ваша скидка сегодня составляет:
Исходный код. Верстка: <div style="display: flex;flex-direction: column;width: max-content;margin: auto;"> <div style="text-align:center;"> <img src="img/art1022-60.png" onclick="onn();" id="onn1"> <img src="img/art1022-59.png" onclick="off();" style="display:none;margin: auto;" id="off1"> </div> <div style="padding: 20px;"> <img src="img/art1022-1.gif" id="im" width="250"> </div> <div> Ваша скидка сегодня составляет: <span id="nik" style="font-size: 30px; width: 100%;"></span> </div> </div>Скрипт JS, который обрабатывает нажатие кнопки, заставляет хомяка бегать по колесу и генерирует случайную скидку:
<script>
var flag=0;
function onn() {
$("#onn1").css("display","none");
$("#off1").css("display","block");
var i = 1;
(function fk() {
if (i < 59) {
num = Math.floor( Math.random( ) * (16) );
document.all('nik').innerHTML = num+"%";
$("#im").attr("src","img/art1022-"+i+".gif");
i++;
if (flag==1){
return;
}
setTimeout(arguments.callee, 40);
} else {
if (flag==0) {
i = 1;
fk();
}
}
})();
}
function off() {
flag=1;
$("#off1").css("display","none");
}
</script>
Требуется подключение любой версии jQuery. Как видите, ничего сложного нет. Один момент, если скорость интернета у посетител невелика, то лучше изображения загрузить сразу:
<link rel="preload" href="img/art1022-2.gif" as="image" /> <link rel="preload" href="img/art1022-3.gif" as="image" /> <link rel="preload" href="img/art1022-4.gif" as="image" /> ... <link rel="preload" href="img/art1022-58.gif" as="image" />Дальше, насколько я помню, там было встраивание скидки в корзину. При этом клиент мог играть сколько угодно раз – добиваясь самой большой скидки в 16%.  Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.  заметки, javascript, анимация, jquery |
|
Программы на заказ
Отзывы
Контакты| © upread.ru 2013-2023 При перепечатке активная ссылка на сайт обязательна. |
