JavaScript中常用的3种弹出提示框(alert、confirm、prompt)


Posted in Javascript onNovember 10, 2020

三种提示框

  • alert ()
  • confirm()
  • prompt ()

alert ()

alert()方法是显示一条弹出提示消息和确认按钮的警告框。
需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来。

使用方式:

alert("想要提示的文本内容")

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			alert("这是弹出框提示文本")
		</script>
		<title></title>
	</head>
	<body>
		<p>alert是阻塞的函数</p>
		<p>这句话只有在确认弹出框的提示文本后才会显示</p>
	</body>
</html>

效果截图:

JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

confirm()

confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。
如果点击"确定"返回true,否则返回false。

使用方式:

不接收返回值:

confirm("这样写可以直接显示,不接收返回值。")

接收返回值:

var x; 
var r=confirm("请按下按钮!");
if (r==true){
	x="你按下的是\"确定\"按钮。";
}
else{
	x="你按下的是\"取消\"按钮。";
}
document.write(x)

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			// 使用方式一
			confirm("这样写可以直接显示,不接收返回值。")
			
			// 使用方式二
			var x; 
			var r=confirm("请按下按钮!");
			if (r==true){
				x="你按下的是\"确定\"按钮。";
			}
			else{
				x="你按下的是\"取消\"按钮。";
			}
			document.write(x)
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

效果截图:

JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

prompt ()

prompt()方法是显示提示用户进行输入的对话框。
这个方法返回的是用户输入的字符串。

使用方式:

不显示默认文本:

prompt("开心吗?"); // 这个显示内容也可以不写,但就没有交互的意义了。

显示默认文本:

var x; 
var name=prompt("请输入你的名字","Keafmd"); 
if (name!=null && person!=""){ 
 x="你好! " + name + "。";
 document.write(x)
}

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			//方式一
			prompt("开心吗?"); // 这个显示内容也可以不写,但就没有交互的意义了。
			
			//方式二
			var x; 
			var name=prompt("请输入你的名字","Keafmd"); //显示默认文本 "Keafmd"
			if (name!=null && name!=""){ 
			 x="你好! " + name + "。";
			 document.write(x)
			} 
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

效果截图:

JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

总结

到此这篇关于JavaScript中常用的3种弹出提示框(alert、confirm、prompt)的文章就介绍到这了,更多相关js弹出提示框(alert、confirm、prompt)内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 #Javascript
vue解决跨域问题(推荐)
Nov 10 #Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 #Javascript
如何在vue 中引入使用jquery
Nov 10 #jQuery
Vue + ts实现轮播插件的示例
Nov 10 #Javascript
vue router返回到指定的路由的场景分析
Nov 10 #Javascript
如何将Node.js中的回调转换为Promise
Nov 10 #Javascript
You might like
PHP积分兑换接口实例
2015/02/09 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
深入理解javascript中return的作用
2013/12/30 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python中hashlib模块用法示例
2017/10/30 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
将python代码和注释分离的方法
2018/04/21 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python实现手势识别的示例(入门)
2020/04/15 Python
没编程基础可以学python吗
2020/06/17 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
主治医师岗位职责
2013/12/10 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
旗帜观后感
2015/06/08 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle