JavaScript的三种弹出框

最新推荐文章于 2024-05-10 09:56:17 发布

康康Sir

最新推荐文章于 2024-05-10 09:56:17 发布

阅读量2.9k

点赞数

文章标签： javascript 弹出框

本文链接：https://blog.csdn.net/u014361822/article/details/50965115

版权

下面我们来总结一下js的弹出框：

1. alert弹出框

具体写法：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script language="JavaScript" type="text/JavaScript">
  function tanchu(){
	alert("你点击了按钮");
  }
  </script>
 </head>
 <body>
  <input type="button" value="点我" οnclick="tanchu();"/>
 </body>
</html>

alert弹出框的优点是简单，易操作，可以用来粗略的调试js代码。

2. confirm弹出框

具体写法：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script language="JavaScript" type="text/JavaScript">
  function tanchu(){
	if(confirm("你确定要这样吗？")){
		alert("你点击了确定按钮");
	}else{
		alert("你点击了取消按钮");
	}
  }
  </script>
 </head>
 <body>
  <input type="button" value="点我" οnclick="tanchu();"/>
 </body>
</html>

confirm弹出框的优点是可以获取用户的选择信息，比如在删除操作时加入这个弹出框，可以使用户有一个确认删除的操作，防止误删，用户体验也会好很多。

3. prompt弹出框

具体写法：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script language="JavaScript" type="text/JavaScript">
  function tanchu(){
        age = prompt("请输入你的年龄:","20");
	if (age != null){
	   alert("你今年" + age +"岁了!");
	}else{
	   alert("你按了[取消]按钮");
	}
  }
  </script>
 </head>
 <body>
  <input type="button" value="点我" οnclick="tanchu();"/>
 </body>
</html>

prompt弹出框可以获取用户的输入，是一种很简单的获取用户输入数据的弹出框。