資料結構
網路
關係資料庫管理系統 (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" 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" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" 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/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" 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+
