如何统计图标上的通知数量?

htmlweb developmentfront end technology更新于 2024/1/25 1:48:17

概述

通知图标是每个应用程序中都存在的常见功能。只需具备 JavaScript 基础知识，即可统计通知数量并将其显示在图标上。因此，要构建此功能，我们需要具备一些关于 HTML 文档对象模型 (DOM)、CSS、Bootstrap 和 JavaScript 的先验知识。

方法

要开始构建此功能，首先必须将一些内容分发网络 (CDN) 链接链接到我们的 HTML 页面。

Font Awesome CDN 链接 −

<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"完整性="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Bootstrap CDN 链接 −

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

算法

步骤 1 − 创建一个 HTML 页面，并在页面的 head 标签中链接上述内容分发网络 (CDN)。
步骤 2 − 通过添加 Bootstrap 的 Badge 组件创建功能框架，将组件内部的文本替换为 Font Awesome 通知铃图标。在 span 标签内，将"99"替换为 <span id="component"> </span>。

<button type="button" class="btn btn-success position-relative m-3">
   <i class="fa fa-bell" aria-hidden="true"></i>
   <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill" id="counter">
      <span id="output" class="badge rounded-pill bg-danger">0</span>
   </span>
</button>

步骤 3 − 使用 Bootstrap List-Group 组件创建通知部分，并添加 id 属性，值为"notis"。

<ul class="list-group container" id="notis"> </ul>

步骤 4 − 创建按钮"显示通知"和"移除通知"，并分别将 onclick() 事件处理程序设置为"showNoti()"和"clearAll()"。

<button class="btn btn-success ms-3 mt-3" onclick="showNoti()" id="showNoti">
   Show Notifications
</button>
<button class="btn btn-danger mt-3" onclick="clearAll()">
   Remove Notification
</button>

步骤 5 − 现在在脚本标签内实现该功能。创建一个空数组，包含所有即将收到的通知。

var Notifications = [ "News Article added", "User login Failed", "Article was sucessfully
prompted", "Device was found at 127.0.0.1", "New login alert" ];

步骤 6 − 使用 document.getElementById() 的 ID 访问通知部分，并遍历包含所有通知的数组"arr"。将通知插入列表组中，并使用 innerHTML 连接特定通知。

var noti = document.getElementById("notis");
for (var n = 0; n < Notifications.length; n++) {
   var a = '<li class="list-group-item bg-light ms-3 my-2 rounded" id="noti">' + Notifications[n] + '</li>'
   noti.innerHTML += a;
}

步骤 7 - 创建一个 JavaScript 箭头函数"showNoti()"，访问输出徽章的内部文本。使用 parseInt() 属性获取 Number 类型的值。使用 DOM 样式属性将通知部分的样式更改为"block"。

showNoti = () => {
   var a = parseInt(document.getElementById("output").innerText);
   document.getElementById("output").style.background = "red";
   document.getElementById("output").innerText = Notifications.length;
   if (Notifications.length == 0) {
      alert("No notification found");
   }
   noti.style.display = "block";
}

步骤 8 - 创建一个 JavaScript 箭头函数"clearAll()"，访问输出徽章的内部文本。parseInt() 属性获取 Number 类型的值。使用数组对象的 pop() 方法从数组中删除元素，同时使用 DOM 的 remove() 方法删除通知元素。

clearAll = () => {
   var a = parseInt(document.getElementById("output").innerText);
   if ((Notifications.length) == 0 || (Notifications.length) == 1) {
      alert("No notification found");
   }
   Notifications.pop();
   document.getElementById("output").innerText = Notifications.length;
   document.getElementById("noti").remove();
}

步骤 9 - 现在我们的功能已准备就绪。点击"显示通知"查看所有通知，点击"移除通知"移除通知。

示例

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   <title> Count the Number of notifications on an icon </title>
</head>
   <body class="container">
      <button type="button" class="btn btn-success position-relative m-3">
         <i class="fa fa-bell" aria-hidden="true"></i>
         <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill" id="counter">
            <span id="output" class="badge rounded-pill bg-danger">0</span>
         </span>
      </button><br>
      <ul class="list-group container" style="display: none;" id="notis"></ul>
      <button class="btn btn-success ms-3 mt-3" onclick="showNoti()" id="showNoti"> Show Notifications</button>
      <button class="btn btn-danger mt-3" onclick="clearAll()">Remove Notification</button>
      <script>
         var Notifications = ["New Article added", "Login Failed", "Article was
         sucessfully propmted", "Device was found at 127.0.0.1", "New login alert"];
         var noti = document.getElementById("notis");
         for (var n = 0; n < Notifications.length; n++) {
            var a = '<li class="list-group-item bg-light ms-3 my-2 rounded" id="noti">' + Notifications[n] + '</li>' noti.innerHTML += a;
         }
         showNoti = () => {
            var a = parseInt(document.getElementById("output").innerText);
            document.getElementById("output").style.background = "red";
            document.getElementById("output").innerText = Notifications.length;
            if (Notifications.length == 0) {
               alert("No notification found");
            }
            noti.style.display = "block";
         }
         clearAll = () => {
            var a = parseInt(document.getElementById("output").innerText);
            if ((Notifications.length) == 0 || (Notifications.length) == 1) {
               alert("No notification found");
            }
            Notifications.pop();
            document.getElementById("output").innerText = Notifications.length;
            document.getElementById("noti").remove();
         }
      </script>
   </body>
</html>

说明

上述示例的输出为:当未点击任何按钮时，会显示一个通知图标，其中通知数量为"0"，因为到目前为止，数组尚未渲染到图标徽章中。

因此，当点击"显示通知"按钮时，会触发 showNoti() 函数，并将通知部分的样式更改为块状，所有通知都会渲染到屏幕上。当所有通知都渲染完成后，我们也可以使用"删除通知"按钮删除通知。当点击该按钮时，会触发 clearAll() 函数，并将通知从部分中删除。

当所有通知都被删除后，点击"删除通知"按钮，您将收到一条"未找到通知"的警告消息。

结论

要在实时项目中使用通知图标，我们可以调用通知的应用程序接口 (API)。我们可以将通知存储在一个数组中，并使用任何循环或映射函数迭代该数组，最终在应用中显示通知。我们还可以将动画添加到通知面板，并附带通知声音，这样当通知到达时，它就能以优美的动画效果发出到达声音。

有用资源

html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/

打印下一节:如何确定 HTML 中样式属性的优先级? ❯❮ 上一节:如何在 HTML5 画布上绘制 SVG 文件?

技术文章和资源

热门类别

如何统计图标上的通知数量?

概述

方法

算法

示例

说明

结论

相关文章

有用资源

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！