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

How Can I Display a Message Box That Has No Buttons, and That Disappears After a Specified Period of Time?

本文关键字：时间段 定时间 消失 消息 何显示 显示 按钮      更新时间：2023-09-26

我有一个简短的代码：

<!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>

有没有办法让信息在一段时间后消失？我希望每次用户点击"添加到购物车"时都能显示消息，然后在一段时间后消失，而不必担心按下按钮会让它消失。。。有办法做到这一点吗？非常感谢！

设置一个超时函数，然后从元素中删除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，而不是隐藏元素，可以更容易地在下次单击时重用它（如果你计划这样做的话）——只需重新设置内容，而不是重新设置内容和可见性。

使用以下代码。使用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，那么使用下面的代码。参见演示

 <!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>

使用JavaScript函数setTimeout（）

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

或者，如果你想使用jquery，试试这个

$( "#demo" ).delay( 3000 ).hide(0);
相关文章：