Выбор скидки для магазина с помощью хомяка на 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.