Question

我有这个简短的代码：

<!DOCTYPE html>
<html>
<body>

<button onclick="addedSuccess()">Add to Cart</button>

<p id="demo"></p>




</body>
</html>

<script>
function addedSuccess() {
    document.getElementById("demo").innerHTML = "Item added successfully in Cart";
}
</script>

有没有办法让消息在一段时间后消失？我希望每次用户点击“添加到购物车”时显示该消息，然后在一段时间后消失，而不必担心按下按钮使其消失...有没有办法做到这一点？非常感谢！

Answer 1

设置超时功能，然后从元素中删除html：

function addedSuccess() {
  document.getElementById("demo").innerHTML = "Item added successfully in Cart";
  setTimeout(function() {
    $('#demo').html('');
  }, 3000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="addedSuccess()">Add to Cart</button>

<p id="demo"></p>

删除HTML，而不是隐藏元素，可以更容易在下次点击时重复使用它（如果这是你打算做的） - 只需重新设置内容，而不是重新设置内容和可见性。

Answer 2

使用下面的代码。使用setTimeout函数。其中3000表示3秒。你可以根据你的要求改变秒数。

setTimeout（）方法在指定的毫秒数1000毫秒= 1秒后调用函数或计算表达式。

  <script>
    function addedSuccess() {
       document.getElementById("demo").style = "display:block";
       document.getElementById("demo").innerHTML = "Item added successfully in     Cart";
       setTimeout(function() {
         document.getElementById("demo").style = "display:none";
       }, 3000);
    }
 </script>

或使用以下代码清除文字

 <script>
     function addedSuccess() {
       document.getElementById("demo").innerHTML = "Item added successfully in     Cart";
       setTimeout(function() {
         document.getElementById("demo").innerHTML = "";
       }, 3000);
     }
 </script>

如果你想使用jquery，那么使用下面的代码。见DEMO

 <!DOCTYPE html>
   <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
     <script>
       $(document).ready(function(){
         $(document).on('click','#addtocart',function(){
            $('#demo').html('Item added successfully in Cart');
            $('#demo').delay( 3000 ).hide(0);
         });
      });
   </script>
   </head> 
   <html>
   <body>
    <button id="addtocart">Add to Cart</button>
    <p id="demo"></p>
   </body>
 </html>

Answer 3

使用JavaScript函数setTimeout()

setTimeout(function,milliseconds,param1,param2,...)

setTimeout(function() {
      document.getElementById("demo").style = "display:none";
}, 3000);

或者如果你想用jquery做这个

$( "#demo" ).delay( 3000 ).hide(0);

如何显示没有按钮的消息框，并在指定的时间段后消失？

3 个答案: