Блог

Главная - Вопросы по программированию - Отображать Div, устанавливать тайм-аут, скрывать Div

Отображать Div, устанавливать тайм-аут, скрывать Div

#javascript #css #function #position #display

#javascript #css #функция #позиция #отображать

Вопрос:

При нажатии на div должно появиться изображение, которое снова исчезнет через 3 секунды. Первая строка функции выводит его на экран, но если я добавлю тайм-аут, при нажатии на изображение ничего не произойдет. Как мне это исправить?

(кроме того, если кто-нибудь может указать, как я могу заставить сердце появиться в центре на #stickycat div, пожалуйста, сделайте это!)

 function heart() {
    document.getElementById("heart").style.display = "block"
    setTimeout(fn(){ document.getElementById("heart").style.display = "none"}, 3000)
}  
 #stickycat {
    position: fixed;
    bottom:10px;
    right: 10px;
    width:100px;
    height:100px;
    border-radius:50%;
    border: solid 4px rgba(54, 215, 183, 1);
    background-color:white;
    text-align:center;
    box-shadow: 1px 1px 10px rgba(54, 215, 183, 1), -1px 1px 10px rgba(54, 215, 183, 1), -1px -1px 10px rgba(54, 215, 183, 1), 1px -1px 10px rgba(54, 215, 183, 1);
}
#stickycat img {
    max-width:100%;
    max-height:100%;
    z-index:2;
    border-radius:50%;
}
#heart {
    animation: pulse 2s linear infinite;
    position:absolute;
    width:50px;
    height:50px;
    display:none;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}  
 <div id="stickycat" onclick="heart()">
<img src="https://i.pinimg.com/originals/9d/b1/3f/9db13f4f06bfa1600e970fd32f1851db.gif">
<img id="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_corazón.svg/1200px-Heart_corazón.svg.png">
</div>

Комментарии:

1. Вы должны проверить консоль вашего браузера на наличие ошибок. fn() это не то, как объявляется функция.

Ответ №1:

Прежде всего, fn() это не способ объявить функцию. Вы можете объявить анонимную функцию с помощью function() ключевого слова.

Для position свойства heart установлено значение absolute . Таким образом, частью центрирования можно управлять с помощью свойств top и left css.

Ниже приведен рабочий пример.

 function heart() {
    document.getElementById("heart").style.display = "block"
    setTimeout(function(){ document.getElementById("heart").style.display = "none"}, 3000);
}  
   #stickycat {
    position: fixed;
    bottom:10px;
    right: 10px;
    width:100px;
    height:100px;
    border-radius:50%;
    border: solid 4px rgba(54, 215, 183, 1);
    background-color:white;
    text-align:center;
    box-shadow: 1px 1px 10px rgba(54, 215, 183, 1), -1px 1px 10px rgba(54, 215, 183, 1), -1px -1px 10px rgba(54, 215, 183, 1), 1px -1px 10px rgba(54, 215, 183, 1);
  }
  #stickycat img {
    max-width:100%;
    max-height:100%;
    z-index:2;
    border-radius:50%;
  }
  #heart {
    animation: pulse 2s linear infinite;
    position:absolute;
    top: 25px;
    left: 25px;
    width:50px;
    height:50px;
    display:none;
  }
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
  }  
 <div id="stickycat" onclick="heart()">
  <img src="https://i.pinimg.com/originals/9d/b1/3f/9db13f4f06bfa1600e970fd32f1851db.gif">
  <img id="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_corazón.svg/1200px-Heart_corazón.svg.png">
</div>