На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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





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




Как начинается работа с готовым сайтом
Печать dataGridView из C++/CLI в Visual Studio


© upread.ru 2013-2022
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.