js实现手机端顶部消息提示

<div id="notification" class="notification"></div>

.notification {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #28a745; /* 成功颜色 */
  color: white;
  text-align: center;
  padding: 10px 0;
  display: none;
  z-index: 1000;
}

.notification.error {
  background-color: #dc3545; /* 错误颜色 */
}

function showNotification(message, type = 'success') {
  const notification = document.getElementById('notification');
  notification.textContent = message;
  notification.className = `notification ${type}`;
  notification.style.display = 'block';

  setTimeout(() => {
    notification.style.display = 'none';
  }, 3000); // 3秒后自动隐藏
}

// 使用示例
showNotification('操作成功！'); // 显示成功提示
showNotification('发生错误，请重试。', 'error'); // 显示错误提示