这段代码用 Vanilla JS 创建了一个交互式通知中心用户界面，它会根据用户操作显示通知，其中下拉按钮可切换通知的可见性。删除按钮会以滑出动画的方式删除通知，点击后 "喜欢 "按钮会变成一个 ✔ 符号，每分钟更新一次。这种交互式通知可极大的增强用户体验，只基于JS实现确保了轻量级和轻松集成，无需额外依赖。
下面介绍如何在 Vanilla JS 中创建交互式通知中心用户界面
1、首先，我们来设置 HTML 结构，这里需要一个容器元素来放置通知中心、通知项目和用户操作按钮。
/*这里仅展示部分示例代码，下载后查看完整版代码*/ <div class="phone"> <div class="phone__indicators"> <div class="time">10:02</div> <div class="phone__icons"> <div class="signal"> <svg viewBox="0 0 640 512" width="20" title="signal"> <path d="M216 288h-48c-8.84 0-16 7.16-16 16v192c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V304c0-8.84-7.16-16-16-16zM88 384H40c-8.84 0-16 7.16-16 16v96c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16v-96c0-8.84-7.16-16-16-16zm256-192h-48c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm128-96h-48c-8.84 0-16 7.16-16 16v384c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V112c0-8.84-7.16-16-16-16zM600 0h-48c-8.84 0-16 7.16-16 16v480c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16z" fill="white" /> </svg> </div> <div class="battery"> <svg viewBox="0 0 640 512" width="20" title="battery-full"> <path d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-48 96H96v128h416V192z" fill="white" /> </svg> </div> </div> </div> <div class="notification__center"> <button> <p>Recent Activity</p> <svg viewBox="0 0 448 512" width="20" title="chevron-down"> <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="#B197FC" /> </svg> </button> </div> </div>
2、使用 CSS 设置通知中心及其组件的样式，以实现所需的外观和布局。您可以根据自己的需要自定义 CSS。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
.notifications__container {
width: 100%;
margin: 1rem auto;
animation: bounce 0.5s linear forwards;
}
.notification__item {
padding: 1rem;
margin-bottom: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
font-size: 0.5rem;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--color-white);
}4、最后，添加以下 JavaScript 代码，使通知中心具有交互性。我们将处理下拉功能、删除通知和喜欢通知。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
const dropdownButton = document.querySelector(".notification__center > button");
const notificationsContainer = document.querySelector(
".notifications__container"
);
const notifications = document.querySelectorAll(".notification__item");
const deleteButton = document.getElementsByClassName("delete");
const likeButton = document.getElementsByClassName("like");
const timeElement = document.querySelector(".time");
