JavaScript中的多个提示方法

在JavaScript中，提示用户的信息是很常见的操作。JavaScript提供了多种不同的提示方法，可以根据实际需求来选择合适的方法。

alert()

alert()方法是最常见的提示方法，它会在浏览器中弹出一个警告框，显示指定的文本信息。

alert("Hello World!");

上述代码会在浏览器中弹出一个警告框，显示文本信息"Hello World!"。

confirm()

confirm()方法也是常用的提示方法，它会显示一个确认框，让用户按确定或取消按钮来作出回应。

var result = confirm("Are you sure?");
if (result == true) {
  // 用户点击了确定按钮
} else {
  // 用户点击了取消按钮
}

上述代码会显示一个确认框，让用户按确定或取消按钮来作出回应。如果用户点击了确定按钮，result变量的值为true，否则为false。

prompt()

prompt()方法可以让用户输入文本信息，并返回该文本信息。

var name = prompt("Please enter your name:");
alert("Hello " + name);

上述代码会弹出一个提示框，让用户输入名字，并将该名字与"Hello "拼接起来，再通过alert()方法显示出来。

自定义提示框

除了使用上述内置的提示方法外，我们还可以使用一些第三方库或自定义的方式来创建自己的提示框。以下是一个简单的自定义提示框的示例：

<!-- HTML代码 -->
<div id="my-dialog">
  <div id="my-dialog-text"></div>
  <button id="my-dialog-ok">OK</button>
  <button id="my-dialog-cancel">Cancel</button>
</div>

/* CSS代码 */
#my-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid grey;
  padding: 20px;
  text-align: center;
}

#my-dialog button {
  margin-top: 10px;
}

// JavaScript代码
function showDialog(text, callback) {
  var dialog = document.getElementById("my-dialog");
  var dialogText = document.getElementById("my-dialog-text");
  var dialogOK = document.getElementById("my-dialog-ok");
  var dialogCancel = document.getElementById("my-dialog-cancel");

  dialogText.innerHTML = text;

  dialogOK.onclick = function() {
    dialog.style.display = "none";
    callback(true);
  };

  dialogCancel.onclick = function() {
    dialog.style.display = "none";
    callback(false);
  };

  dialog.style.display = "block";
}

showDialog("Are you sure?", function(result) {
  if (result == true) {
    // 用户点击了OK按钮
  } else {
    // 用户点击了Cancel按钮
  }
});

上述代码会创建一个自定义的提示框，并在JavaScript中使用showDialog()函数显示该提示框。该函数接受两个参数：提示框的文本信息和回调函数。

通过以上介绍，您可以根据实际需求来选择合适的提示方法。