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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
bootstrap表单示例代码分享
May 18 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
this.$toast() 了解一下?
Apr 18 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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 clearstatcache()函数详解
2010/03/02 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
理解javascript async的用法
2017/08/22 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python ETL工具 pyetl
2020/06/07 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
详解Python中下划线的5种含义
2021/07/15 Python