Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 01.03.2018, 18:22
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="ru">
<head>
	<style>
		.window_show {
			display: none; 
			z-index: 1000;
			position: fixed;
			width: 200px; height: auto;
			right: 20px;
			bottom: 20px;
			padding: 15px;
			text-align: center;
			border-radius: 10px;
		}
		.green {
			color: #fff;
			background: #36549a;
			border: 3px solid #7f98c0;
		}

		.green a {
			color: #fff;
		}
	</style>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
				var over =  1;
			var rnd = function (min, max){
				return Math.floor(Math.random() * (max*1000 - min*1000)) + min*1000;
			};
			function sh(){
				if(over) $('.window_show').toggle('drop');
			}
			if(!localStorage.getItem('flag0')){
			setTimeout(sh, 5000);
			if(!localStorage.getItem('flag0')) var nn = setTimeout(function ff(){
				sh();
				if(!localStorage.getItem('flag0')) nn = setTimeout(ff, rnd(1, 10)); // диапазон 1-10 сек
			},10000);
			}

			$('#off').click(function(){
				localStorage.setItem('flag0', 1);
			});
			

			$('.window_show').mouseover(function(){
				over = 0;
			});

			$('.window_show').mouseout(function(){
				over = 1;
			});


		});
	</script>
</head>
<body>
	<div class='window_show green'>Заказ удален<button id="off">Отключить уведомление</button></div>
</body>
</html>
Ответить с цитированием
  #12 (permalink)  
Старый 01.03.2018, 19:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

CORONER,
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <style>
    .window_show {
      display: none;
      z-index: 1000;
      position: fixed;
      width: 200px; height: auto;
      right: 20px;
      bottom: 20px;
      padding: 15px;
      text-align: center;
      border-radius: 10px;
    }
    .green {
      color: #fff;
      background: #36549a;
      border: 3px solid #7f98c0;
    }

    .green a {
      color: #fff;
    }
    .window_show.act{
      display:  block;
    }

  </style>


</head>
<body>
  <div class='window_show green'>Заказ удален<button id="off">Отключить уведомление</button></div>
<script>

window.addEventListener("DOMContentLoaded", function() {
  var div = document.querySelector(".window_show"), hide = "abcd", i = 0, s = ["block", "none"], t;
  function rnd() {
    return 1000 + (Math.random() * 15000 | 0);
  }
  function clear() {
    window.clearTimeout(t);
  }
  function getItem() {
    return localStorage.getItem(hide);
  }
  function show() {
    clear();
    i ^= 1;
    div.style.display = s[i];
    !getItem() && (t = window.setTimeout(show, i ? rnd() : 5000));
  }
  !getItem() && show();
  div.addEventListener("click", function() {
    localStorage.setItem(hide, "hide");
    show();
  });
  div.addEventListener("mouseenter", clear);
  div.addEventListener("mouseleave", show);
});
</script>

</body>
</html>

Последний раз редактировалось рони, 03.03.2018 в 09:51.
Ответить с цитированием
  #13 (permalink)  
Старый 03.03.2018, 09:40
Интересующийся
Отправить личное сообщение для CORONER Посмотреть профиль Найти все сообщения от CORONER
 
Регистрация: 27.02.2018
Сообщений: 22

Последний вопрос. Подскажите, как сделать так, чтобы только появление было рандомным, а исчезновение всегда через 5 секунд?
if(!localStorage.getItem('flag0')) var nn = setTimeout(function ff(){ 
sh(5000);

Таким образом?
Ответить с цитированием
  #14 (permalink)  
Старый 03.03.2018, 09:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от CORONER
чтобы только появление было рандомным, а исчезновение всегда через 5 секунд
добавлено , пост №12
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Закрытие div блока по другой кнопке Виктор3177 Общие вопросы Javascript 4 14.02.2017 13:04
Cookie js запоминание закрытия блока Kiriklk Javascript под браузер 0 02.02.2016 20:39
Закрытие Div'a через JS+jQuery с cookie falsenull Общие вопросы Javascript 1 28.05.2012 17:12