时间戳

首页 > 解决方案 > 如何在网页中的按钮上有一个突出显示的小图标来显示新的更新？

javascript - 如何在网页中的按钮上有一个突出显示的小图标来显示新的更新？

问题描述

我目前制作了一个 Java Web 应用程序。它有一个服务器（MyServer）和客户端（网页）。客户端向 MyServer 发出请求以获取一些信息。MyServer 现在向 Confluence API 服务器发出请求，以从我们 Confluence 空间中最新的 Confluence 页面获取信息。

当我们点击“What's New”按钮（在我们的客户端 - 网站中）时 - 我们的 Confluence 空间中的最新页面显示在 What's New Web 小部件中。用户可以点击 What's New 按钮，Confluence 页面的最新页面就会显示出来。

我现在想做的是——

  1. 每次进行新的更新时（无论是在同一个 Confluence 页面/或创建新的 Confluence 页面中的更改），我的“新增功能”按钮上都会显示一个突出显示的小图标。（请在附件中找到所需的示例图片 - 就像在任何聊天应用程序中一样{Whats app、FbMessanger 等收到新消息时}）。
  2. 一旦我的特定用户看到新的更新，那个突出显示的小图标就会为该特定用户消失。
  3. 如果所有登录用户尚未打开新更新，则应首次向所有登录用户显示突出显示的小图标。如果 user1 打开它 - 该 user1 的突出显示的小图标应该消失（并且“What's New”按钮应该成为普通的非突出显示按钮）但是，如果 user2 没有打开这个突出显示的小图标，则应该保留它。
  4. 然后，如果我们在 Confluence 页面中进行新的更改并且 user1 还没有看到这个新的更新 - 突出显示的小图标应该再次为 user1 显示。

我应该怎么做？谢谢您的帮助。 在此处输入图像描述

标签： javascriptjavajsonjspservlets

解决方案

关于您的问题的通用解决方案，

  1. 您需要实现 websockets 以获取来自后端的实时聊天通知

  2. 您可以编写 JavaScript 代码来定位元素，在本例中是通知图标。考虑它的 ID 是#notifIcon

    隐藏

    document.getElementbyId('notifIcon').style.display = 'none'

    以显示

    document.getElementbyId('notifIcon').style.display = 'block'

  3. 为了保持用户特定，您可以从数据库模式中获取数据并相应更新

  4. 再次使用 websockets 更新您的数据

推荐阅读