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

基础概念

手机端顶部消息提示通常用于向用户显示重要信息或通知，这些信息可能包括操作成功、错误警告或其他重要提示。这类提示通常会在屏幕顶部短暂显示，然后自动消失。

类型

成功提示：操作成功后的正面反馈。
错误提示：操作失败或输入错误时的警告信息。
警告提示：提醒用户某些可能影响操作的信息。
信息提示：一般性通知或信息更新。

应用场景

表单提交：提交成功或失败的即时反馈。
数据加载：数据加载完成或加载中的提示。
权限请求：请求用户授权时的提示信息。
系统通知：系统更新或维护的通知。

实现方法

以下是一个简单的JavaScript实现，使用HTML和CSS来创建一个顶部消息提示框。

HTML

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

CSS

.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; /* 错误颜色 */
}

JavaScript

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'); // 显示错误提示