Выбор скидки для магазина с помощью хомяка на 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




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.



Разработка сайтов
Урок 25. Связный список Java
Анонимные функции PHP