这段代码用 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");