javascript有哪些對話框？

本篇文章給大家介紹了javascript有哪些對話框？javascript的三種對話框分別是什么？為了大家了解對話框的作用。給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

JavaScript支持三種重要類型的對話框，分別對應(yīng)三個(gè)函數(shù)：alert()、confirm()、prompt()。這些對話框可用于發(fā)出警報(bào)，或者對任何輸入進(jìn)行確認(rèn)或從用戶那里獲得一種輸入。下面我們將逐一討論每個(gè)對話框。

警報(bào)對話框：alert()

alert()主要用于向用戶發(fā)出警告消息。例如，如果一個(gè)輸入字段需要輸入一些文本但用戶不提供任何輸入，那么作為驗(yàn)證的一部分，您可以使用警告框來發(fā)出警告消息。

盡管如此，警報(bào)框仍可用于更友好的消息。警報(bào)框只提供一個(gè)“確定”按鈕來選擇并繼續(xù)。

例:

html代碼：

<p>點(diǎn)擊下面查看消息：</p>

<form>
	<input type="button" value="查看消息" onclick="message();" />
</form>

js代碼：

function message() {
	alert("這是一個(gè)警告信息！");

	document.write("<p style='text-align: center;'>這是一個(gè)警告信息！<p>");
}

運(yùn)行結(jié)果：

確認(rèn)對話框：confirm()

confirm()主要用于征得用戶對任何選項(xiàng)的同意。它顯示一個(gè)帶有兩個(gè)按鈕的對話框：確定、取消。

如果用戶單擊“確定”按鈕，則窗口方法confirm（）將返回true。如果用戶單擊“取消”按鈕，則confirm（）返回false。你可以使用如下確認(rèn)對話框。

例（html代碼一樣）：

html代碼：

<p>點(diǎn)擊下面查看結(jié)果：</p>

<form>
	<input type="button" value="查看消息" onclick="getConfirmation();" />
</form>

js代碼：

function getConfirmation() {
	var retVal = confirm("你想繼續(xù)嗎？");
	if(retVal == true) {
		document.write("<p style='text-align: center;'>用戶希望繼續(xù)！</p>");
		return true;
	} else {
		document.write("<p style='text-align: center;'>用戶不希望繼續(xù)！</p>");
		return false;
	}
}

運(yùn)行結(jié)果：

提示對話框：prompt()

prompt()：當(dāng)你想要彈出文本框以獲取用戶輸入時(shí)，提示對話框非常有用。因此，它使你能夠與用戶進(jìn)行交互。用戶需要填寫該字段，然后單擊“確定”。

prompt()方法在用戶輸入后，返回用戶輸入的字符串。它有兩個(gè)參數(shù)，分別：

1、顯示提示信息

2、顯示輸入框和默認(rèn)字符串。

prompt（）方法在用戶輸入后，返回用戶輸入的字符串。

此對話框有兩個(gè)按鈕：確定和取消。如果用戶單擊“確定”按鈕，則窗口prompt()方法將從文本框中返回輸入的值。如果用戶單擊“取消”按鈕，則窗口prompt()方法將返回null。

例：

以下示例顯示如何使用提示對話框

html代碼：

<p>點(diǎn)擊下面查看結(jié)果：</p>

<form>
	<input type="button" value="查看消息" onclick="getValue();" />
</form>

js代碼：

function getValue() {
	var retVal = prompt("輸入你的名字：", "你的名字在這里");

	if(retVal == null)
		document.write("<p style='text-align: center;'>用戶沒有輸入，值為：“" + retVal + "”</p>");
	else
		document.write("<p style='text-align: center;'>歡迎“" + retVal + "”進(jìn)入</p>");

}

運(yùn)行效果：

看完上述內(nèi)容，你們對javascript對話框大概了解了嗎？如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！