显示 Div、设置超时、隐藏 Div

Question

当点击 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%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png">
</div>

Answer 1

首先，fn()不是一种声明函数的方法。您可以使用 function() 关键字声明匿名函数。

心的position属性设置为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%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png">
</div>

显示 Div、设置超时、隐藏 Div

Display Div, Set Timeout, Hide Div

javascript

css

position

function

display