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

1 个答案: