数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在图标上显示通知数量？
概述
通知图标是每个应用程序中常见的特性。使用基本的JavaScript知识，就可以计算通知数量并在图标上显示。因此，要构建此功能，我们应该预先了解HTML文档对象模型(DOM)、CSS和Bootstrap。
方法
要开始构建此功能，首先我们必须将一些内容分发网络 (CDN) 链接链接到我们的HTML页面。
Font Awesome CDN链接 −
<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" />
Bootstrap CDN链接 −
<link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
算法
步骤 1 − 创建一个HTML页面，并在页面的head标签中链接以上内容分发网络 (CDN) 链接。
步骤 2 − 通过添加Bootstrap的徽章组件来创建此功能的框架，将组件内写入的文本替换为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组件创建通知部分，并添加值为“notis”的id属性。
<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 − 现在，在script标签内实现此功能。创建一个空数组，其中包含所有即将到来的通知。
var Notifications = [ "News Article added", "User login Failed", "Article was sucessfully propmted", "Device was found at 127.0.0.1", "New login alert" ];
步骤 6 − 使用document.getElementById()访问其id为“notis”的通知部分，并遍历包含所有通知的数组“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()属性获取数字类型的数值。使用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()属性获取数字类型的数值。使用数组对象的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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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()函数，并将通知部分的样式更改为block，所有通知都将呈现到屏幕上。呈现所有通知后，我们还可以使用“移除通知”按钮移除通知；当单击该按钮时，将触发clearAll()函数并从该部分移除通知。
当移除所有通知后点击“移除通知”按钮时，您将收到一条“未找到通知”的警告消息。
结论
要在带有通知图标的实时项目中工作，我们可以调用应用程序编程接口 (API) 来获取通知。我们可以将通知存储在数组中，并可以使用任何循环或map函数遍历该数组，并在我们的应用程序中显示通知。我们还可以为通知面板添加动画和通知声音，以便当通知到达时，它会发出到达声音并带有良好的动画效果。
浏览量：1000+
