Показать сообщение отдельно
  #3 (permalink)  
Старый 21.03.2016, 22:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Запоминание клика на сутки
Pobedill,
в примере сохрание на 10 секунд, за это время нажать кнопку и запустить пример заново.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.phone2 {display: none;
  background: #90421C;
  color: #f6f6f6;
  font: 20px Arial, sans-serif;
  padding: 10px 10px 10px 10px;
  border-radius: 6px;
  margin-top: -10px;
  text-align: center;
}
.phone {cursor: pointer;
  background: #90421C;
  color: #f6f6f6;
  font: 18px Arial, sans-serif;
  padding: 10px 10px 10px 10px;
  border-radius: 6px;
  text-align: center;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
$(function() {
    var phoneStorage = localStorage.getItem("phoneStorage") || "{}";
    phoneStorage = JSON.parse(phoneStorage);

    function timeOver(index) {
        var time = 10000; //10сек заменить на 24 * 60 * 60 * 1000
        return phoneStorage[index] && Date.now() < phoneStorage[index] + time
    }
    $(".phone").each(function(index, element) {
        $(element).click(function() {
            phoneStorage[index] = Date.now();
            localStorage.setItem("phoneStorage", JSON.stringify(phoneStorage));
            $(element).hide().next().show()
        });
        timeOver(index) && $(element).hide().next().show()
    })
});
  </script>
</head>

<body>

<div class="phone">+380XX XXX XX XX</div>
<div class="phone2">Номер<br /> Имя</div>
<div class="phone">+380XX XXX XX XX</div>
<div class="phone2">Номер<br /> Имя</div>
<div class="phone">+380XX XXX XX XX</div>
<div class="phone2">Номер<br /> Имя</div>
</body>

</html>
Ответить с цитированием