一篇文章带你了解JavaScript弹出框

Karen110 等级 647 0 0
标签: javascripthttps

在JavaScript中,可以创建对话框或弹出窗口来与用户进行交互。

JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框。

一、警告框

警告框是最简单的弹出框。它使可以向用户显示一条短消息。还包括“确定”按钮,用户必须单击此“确定”按钮才能继续。

window.alert()

语法:

window.alert("msg")

方法可以在没有窗口的前缀被写入。


<!DOCTYPE html>
<html>
<title>项目</title>
<body style="background-color: aqua;">

<p>单击按钮以显示警告弹出框:</p>

<button onclick="myFunc()">alert</button>

<script>
function myFunc() {
alert("Hello world!");
}
</script>

</body>
</html>

一篇文章带你了解JavaScript弹出框

二、确认框


如果希望用户验证或接受某些内容,通常会使用确认框。确认框看起来类似于警报框,但其中包含“取消”按钮和“确定”按钮。

如果用户单击“确定”,则该框返回true。如果用户单击“取消”,则该框返回false

window.confirm()

语法:

window.confirm("msg")

方法可以在没有窗口的前缀被写入。


<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<p>点击按钮显示确认框:</p>

<button onclick="myFunc()">点我试试</button>

<p id="output"></p>

<script>
function myFunc() {
var txt;
var r = confirm("Press a button!");

if (r == true) {
txt = "按了确定!";
} else {
txt = "按了取消!!";
}
document.getElementById("output").innerHTML = txt
}
</script>

</body>
</html>

一篇文章带你了解JavaScript弹出框

三、提示框


如果希望用户在进入页面之前输入值,通常会使用提示框。提示框包括文本输入字段,“确定”和“取消”按钮。

如果用户单击“确定”,则该框将返回输入值。如果用户单击“取消”,则该框将返回null。

语法:

window.prompt("msg", "defaultText")

1. window.prompt()

方法可以在没有窗口的前缀被写入。

<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<p>单击按钮以显示提示框:</p>

<button onclick="myFunc()">点击我</button>

<p id="output"></p>

<script>
function myFunc() {
var name = prompt("请输入你的名字", "Someone");

if (name != null && name != "") {
document.getElementById("output").innerHTML = "Hello " + name + ",你好";
} else {
document.getElementById("output").innerHTML = "用户取消了提示!";
}
}
</script>

</body>
</html>

一篇文章带你了解JavaScript弹出框

一篇文章带你了解JavaScript弹出框

注意:

prompt()方法返回的值始终是字符串。这意味着,如果用户在输入字段中输入15,则返回字符串“ 15”而不是数字15。

2. 对话框中显示换行符

要在对话框中显示换行符,请使用换行符或换行符(\n); 反斜杠后跟字符n。

<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;"

<p>点击按钮,弹出警告框</p>

<button onclick="myFunc()">alert</button>

<script>
function myFunc() {
alert("Hello\nHow are you?");
}
</script>

</body>
</html>

一篇文章带你了解JavaScript弹出框

三、总结


本文基于JavaScript基础,介绍了如何在浏览器中运用的各种弹框,警告框在实际的应用,如何自定义自己的提示框。通过用丰富的案例帮助大家更好理解。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章带你了解JavaScript弹出框

往期精彩文章推荐:

一篇文章带你了解JavaScript弹出框

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

收藏
评论区

相关推荐

14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
JS 框架整理
**(1)MVC** ---------- Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js 、 Angular.js、Canjs、Batman.js [12 款优秀的 JavaScript MVC 框架评估](https://www.oschina.net/action/GoToLink?url=h
JS弹出对话框的三种方式
JS弹出对话框的三种方式 ------------ 我们用到了alert()方法、prompt()方法、prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一、第一种:alert()方法 <html> <head> <title>编写html页面</title>
1分钟选好最合适你的JavaScript框架
Javascript框架(以下简称框架)也被称为Javascript库,是一组包含丰富功能和函数的JavaScript代码集,能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃,新的框架也层出不穷,目前流行的有:Angular、React、Vue.js和Knockout等。 面对如此丰富多样的框架,很多Web开发团队都感到难以抉择,性能、
2016.10月我看过的资料们
![](https://static.oschina.net/uploads/space/2016/1013/115940_eU4X_2444023.jpg) 《[JavaScript的三种消息框alert,confirm,prompt](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fbl
2021年及以后有关JavaScript及其框架的7大趋势
[dhtmlxSuite](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3945)是一个用JavaScript建立的富客户端开发框架。它是一个JavaScript UI库,用于建立一个完整的具有Ajax能力的前台组件。用户可以使用它建立
2021年及以后有关JavaScript及其框架的7大趋势
[dhtmlxSuite](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3945)是一个用JavaScript建立的富客户端开发框架。它是一个JavaScript UI库,用于建立一个完整的具有Ajax能力的前台组件。用户可以使用它建立
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
JavaScript 核心原理精讲【朋友圈已刷屏】
作为一名前端工程师,JavaScript 你一定每天都在用。但是,即便工作 5 年以上的前端也不一定用得非常熟,甚至很多前端对 JavaScript 的掌握程度仅仅停留在会用的层面。 而且 Vue/React 等框架的便利,更是让前端人无需苦学 JavaScript 原生,就可以快速构建一个网页。它解决了开发者短期的痛点,却为依赖框架开发的程序员埋下长期隐
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
JavaScript的popup框
JavaScript中可以创建三种消息框:警告框、确认框、提示框。 1、警告框 警告框经常用于确保用户可以得到某些信息。 当警告框出现后,用户需要点击确定按钮才能继续进行操作。 语法:alert("文本") <html> <head> <script type="text/javascript"> function disp\_aler
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
Node.js学习路线图
Node.js学习路线图 ------------ [从零开始nodejs系列文章](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.fens.me%2Fseries-nodejs%2F),将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs