使用JS构建一个通知卡，它在X秒后消失，但定时器在悬停时重置

<div id="notification-card">这是一个通知卡</div>

#notification-card {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s ease-in-out;
}

// 获取通知卡元素
const notificationCard = document.getElementById('notification-card');

// 定义定时器变量
let timer;

// 显示通知卡
function showNotificationCard() {
  notificationCard.style.opacity = 1;
  startTimer();
}

// 开始定时器
function startTimer() {
  // 设置定时器，在X秒后调用hideNotificationCard函数
  timer = setTimeout(hideNotificationCard, X * 1000);
}

// 隐藏通知卡
function hideNotificationCard() {
  notificationCard.style.opacity = 0;
}

// 重置定时器
function resetTimer() {
  clearTimeout(timer);
  startTimer();
}

// 监听鼠标悬停事件，重置定时器
notificationCard.addEventListener('mouseover', resetTimer);

// 初始化，显示通知卡
showNotificationCard();