单击按钮时输出消息，然后在一段时间后自动消失

编程问答 2022-05-31

问题描述

我想在单击按钮后输出文本，但也要让它在特定时间范围内自动消失。目前，我已经编写了 PHP 代码，以便在单击按钮时显示消息，但我不确定如何使其在给定的时间范围内自动消失。以下是我的PHP代码：

var userId = _userManager.GetUserId(context.User);
var BranchId = _context.Users
                        .Include(a => a.StaffBranch)
                        .Where(u => u.Id == userId)
                        .Select(a => a.StaffBranch.StaffBranchId)
                        .FirstOrDefault();

$_SESSION['msg] 取自另一个文件，代码如下：

     <?PHP if (isset($_SESSION['msg'])): ?>
   <div class="msg">
     <?PHP

         echo $_SESSION['msg'];
         unset($_SESSION['msg']);
     ?>
   </div>
 <?PHP endif ?>

解决方法

使用 jQuery 实现这一目标的最佳方式。

在您的应用中包含 Jquery

创建一个消息 div，样式 display:none 默认。

在按钮上单击添加单击功能以使用您的消息更改该 div 的内容，您可以使用 ajax request 从 PHP 检索该消息。

更改内容后，使用javascript方法在间隔后显示和隐藏

$('#messagediv).show().delay(1000).fadeOut();

有关详细信息，请参阅 this。

, 
setTimeout(()=>{ $('.msg').hide(1000); },3000);

隐藏类 msg 并在 3 秒内显示 1 秒动画。假设您使用的是 jquery 库。

buttonbuttonbuttonhtmlisset