关于前端的碎碎念3-JavaScript基础6-JavaScript中的弹出框

说完css装修，我们终于要给房子打造一些功能啦~follow me~

本节介绍Javasctipt中的三种弹出框:警告(alert)、确认(confirm)以及提问(prompt)

警告(alert)

　　在访问网站的时候，你遇到过这样的情况吗？“咚”的一声，一个小窗口出现在你面前，上面写着一段警示性的文字，或是其它的提示信息。如果你不点击确定，你就不能对网页做任何的操作。没错，这个“咚”的小窗口就是alert干的。

　　下面的代码是一段使用alert的实例。

<script type="text/JavaScript">
     alert("我是菜鸟我怕谁");
</script>

　　我的个人观点是尽量少使用alert，它很不友好。甚至可能让一些方可认为你的网站很危险。

确认(confirm)

　　确认框用于让用户选择某一个问题是否符合实际情况。

　　“说！是还是不是？快回答！”

　　如果你想表达这样的意思，那么confirm再合适不过了。来看下面的代码：我们用confirm("你是菜鸟吗？")向访客提问，变量r则保存了访客的回应，它只可能有两种取值：true或false。没错，它是一个布尔值。confirm后面的语句则是我们对访客回答做出的不同回应。

<script type="text/JavaScript">
     var r=confirm("你是菜鸟吗");
     if (r==true)
     {
     document.write("彼此彼此");
     }
     else
     {
     document.write("佩服佩服");
     }
</script>

提问(prompt)

　　prompt和confirm类似，不过它允许访客随意输入回答。我们来修改一下之前switch的例子，我们根据分数来做出不同的评价，不过那段程序并不完整，它根本就没问我们分数，而是假设我得了65分。这太不公平了。现在我么就可以用prompt来向访客提问，用score存储用户输入的回答，其余的事情就都由后面的switch来完成了。

<script type="text/JavaScript">
	 var score;//分数
	 var degree;//分数等级
	 score = prompt("你的分数是多少？")
	if (score > 100){

		 degree = '耍我？100分满！';
	 }
	 else{
		 switch (parseInt(score / 10)) {
		 case 0:
		 case 1:
		 case 2:
		 case 3:
		 case 4:
		 case 5:
			degree = "恭喜你，又挂了！";
			 break;
		 case 6:
			 degree = "勉强及格";
		 break;
		 case 7:
			 degree = "凑合，凑合"
		 break;
		 case 8:
			degree = "8错，8错";
		 break;
		 case 9:
		 case 10:

			degree = "高手高手，佩服佩服";
	 }//end of switch
 }//end of else
	alert(degree);
 </script>

JavaScript 弹出框 alert例子

　　alert用于在网页中弹出警告。通常情况下尽量不要使用。

窗体顶端

　　调用alert

窗体底端

JavaScript代码

 <script type="text/javaScript">
     function message(){
         alert("我是菜鸟我怕谁!!!");
     }
 </script>

HTML代码

 <form action="#" method="post">
     <p>
     <button value="alert" onclick="message()">调用alert</button>
     </p>
 </form>

JavaScript 弹出框confirm例子

　　确认框用于让用户选择某一个问题是否符合实际情况。

窗体顶端

　　调用confirm

窗体底端

JavaScript代码

<script type="text/JavaScript">
 function isCainiao() {
     var r=confirm("你是菜鸟吗");
     if (r==true)
         {
             alert("彼此彼此");
         }
         else
         {
             alert("佩服佩服");
         } 
     }
 </script>

HTML代码

 <form action="#" method="post">
     <p>
     <button value="confirm" onclick="isCainiao()">调用confirm</button>
     </p>
 </form>

JavaScript 弹出框prompt例子

　　prompt用来让用户输入一个答案。

窗体顶端

　　点击弹出prompt

窗体底端

JavaScript代码

<script type="text/JavaScript">
 function judge() {
     var score;//分数
     var degree;//分数等级
     score = prompt("你的分数是多少？")
     if (score > 100){
         degree = '耍我？100分满！';
     }
     else{
         switch (parseInt(score / 10)) {
             case 0:
             case 1:
             case 2:
             case 3:
             case 4:
             case 5:
             degree = "恭喜你，又挂了！";
             break;
             case 6:
             degree = "勉强及格";
             break;
             case 7:
             degree = "凑合，凑合"
             break;
             case 8:
             degree = "8错，8错";
             break;
             case 9:
             case 10:
             degree = "高手高手，佩服佩服";
          }//end of switch
     }//end of else
     alert(degree);
 }
 </script>

HTML代码

<form action="#" method="post">
     <p>
     <button value="点击提交" onclick="judge()">点击提交</button>
     </p>
     <h2>&nbsp;</h2>
     <p>&nbsp;  </p>
 </form>