Question

基本上，我想在图像的右上角添加一个“ x”，该按钮将在一段时间后使用setTimeout()出现。因此，当您单击x按钮时，它将关闭图像。我玩过<input type="image">，但这不是我想要的，因为它使图像可点击。我看过示例，但不确定如何处理。谢谢您的帮助。

function showImage(){
    	document.getElementById('banner').style.display = 'inline-block';		
}
setTimeout(showImage,3000);

<figure class = "showBanner">
     <input type="image" id="banner" src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1" style="display:none"/>
     <script type = "text/javascript" src = "testing.js"></script>
</figure>

Answer 1

首先：<input type="image" ... />适用于想要具有背景图像的按钮的公式。据我了解，这根本不是您想要的。

另外，为您的样式使用单独的css文件！

此示例应解决您的问题：

function showButton(){

        document.getElementById('xButton').style.display = 'block';   
}

document.getElementById('xButton').addEventListener("click", function(){
    document.getElementById('banner').style.display = 'none';
    document.getElementById('xButton').style.display = 'none';   
});

setTimeout(showButton,3000);

#xButton {
  float: right;
  display: none;
}

.showBanner {
  width: 50%;
}

<figure class = "showBanner">
  <button id="xButton"> x </button>
      <img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1" id="banner" width="100%">
       
</figure>

Answer 2

您可以尝试将点击的不透明度从0更改为1，这样您也可以使用CSS过渡

import { Promise } from 'rsvp';

new Promise((resolve, reject) => {
  // stuff
});

对于按钮，您可以使用x符号

resolver

在图像上关闭按钮

2 个答案: