js 显示提示信息

在JavaScript中显示提示信息，通常会使用alert()、confirm()和prompt()这三个内置的函数。

一、基础概念

1. alert()函数
   • 作用：用于在浏览器中弹出一个警告框，显示一条消息给用户。这个警告框只有一个“确定”按钮。
   • 示例代码：
   • 示例代码：

• confirm()函数
  • 作用：弹出一个带有“确定”和“取消”按钮的确认框，用于获取用户的一个简单二值选择（是或否）。
  • 示例代码：
  • 示例代码：
• prompt()函数
  • 作用：弹出一个带有输入框的提示框，用于获取用户输入的文本信息。
  • 示例代码：
  • 示例代码：

二、优势

1. 简单易用
   • 不需要额外的库或者复杂的代码结构就可以实现基本的用户交互提示功能。

• 即时反馈
  • 能够快速地向用户展示重要信息或者获取用户的简单反馈，提高用户体验。

三、应用场景

1. alert()的应用场景
   • 当发生错误时向用户显示错误消息，例如在表单验证失败时（如密码长度不符合要求），可以用alert()提示用户具体的错误原因。

• confirm()的应用场景
  • 在执行一些可能对用户数据有重大影响的操作之前，如删除文件或者清空数据库中的数据时，使用confirm()让用户确认是否真的要执行该操作。
• prompt()的应用场景
  • 当需要获取用户的一些基本信息时，如登录页面获取用户名或者注册页面获取用户的初始设置等。

四、可能遇到的问题及解决方法

1. 样式不统一
   • 问题：这些内置函数的提示框样式在不同的浏览器中可能会有细微差别，并且难以进行自定义样式修改。
   • 解决方法：可以使用HTML、CSS和JavaScript自己构建自定义的提示框。例如，创建一个div元素，通过CSS设置样式，再用JavaScript控制其显示和隐藏。
   • 示例代码：
   • 示例代码：

• 阻塞问题（在某些情况下）
  • 问题：alert()、confirm()和prompt()函数在执行时会阻塞JavaScript代码的执行，直到用户做出响应。在一些对响应速度要求较高的单页应用（SPA）场景下可能会有不好的体验。
  • 解决方法：尽量减少使用这三个函数，采用非阻塞式的用户交互方式，如自定义的模态框（上面示例中的自定义提示框），并且可以通过异步操作来处理用户的交互逻辑。