如何在通知菜单中自动添加通知计数答案

【问题标题】：How to add notification count in notification menu automatically如何在通知菜单中自动添加通知计数
【发布时间】：2020-07-13 17:08:33
【问题描述】：

我想在收到新通知时在通知选项卡中显示通知计数。就像这张照片一样。请指导我。如果您知道 html 和 css 代码，请提供帮助。谢谢你们。祝你有美好的一天。

如果我添加此代码

<span class="badge" style="background-color: #f0ad4e">1</span></a></li>

在导航栏之后安抚它。但它每次都会显示，无论是否有新通知。有没有办法解决这个问题？

这里是代码

<li  class="active" ><a href="/notification"> Notification <span class="badge" style="background-color: #f0ad4e">1</span></a></li>

徽章CSS

    .nav-bottom .nav .dropdown li a .badge {
        position: absolute;
        right: 8px;
        top: 13px;
        padding: 3px 7px;
        font-size: 10px;
    }

【问题讨论】：

您是否希望收到来自后端的通知？还是 JavaScript？如果是，是什么触发了通知？
我希望收到来自 javascript 的通知
什么触发它？

标签： css json ajax push-notification notifications

【解决方案1】：

我不知道您选择如何更新通知计数，所以我只是为您提供了一种非常基本的更新通知的方法。您可以使用一个简单的 JavaScript DOM 脚本来执行某些操作，您可以在其中触发 notificationCounter() 函数。我也更新了您的 HTML 代码（见下文）。请务必将其包含在 .js 文件中，并将其加载到 HTML 文档的页脚中。

Javascript：

function notificationCounter() {
    counter += 1;
    document.getElementById("NotificationBadge").innerHTML = counter;
}

const counter = 0;

HTML：

...
<li  class="active" ><a href="/notification"> Notification <span id="NotificationBadge" class="badge" style="background-color: #f0ad4e">1</span></a></li>
...

CSS：保持原样。

【讨论】：

很高兴能帮上忙！请务必将此标记为已回答。