web前端Javascript学习之了解JavaScript弹出框

news2024/11/30 2:30:56

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

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

一、警告框

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

window.alert()

语法:

window.alert(“msg”)

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

项目

单击按钮以显示警告弹出框:

alert

单击按钮以显示警告弹出框:
IMG_256
二、确认框

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

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

window.confirm()

语法:

window.confirm(“msg”)

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

项目

点击按钮显示确认框:

点我试试

![IMG_257](https://img-blog.csdnimg.cn/213cf7f116a54521a3d6a229f3d82b3c.png) 三、提示框

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

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

语法:

window.prompt(“msg”, “defaultText”)

  1. window.prompt()

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

项目

单击按钮以显示提示框:

点击我

![在这里插入图片描述](https://img-blog.csdnimg.cn/aed6d87d7465422dbda2339920245ca4.png) 注意:

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

  1. 对话框中显示换行符

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

项目

点击按钮,弹出警告框

alert

![IMG_260](https://img-blog.csdnimg.cn/50d07fc5ca2e428a943176c969c1d162.png) 三、总结

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

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

文章来源:网络 版权归原作者所有

上文内容不用于商业目的,如涉及知识产权问题,请权利人联系小编,我们将立即处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/87702.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

巧用Github Action 自动推送docker镜像,白piao github服务器资源,还省时又省力

对于个人开发者来说如果不想再自己电脑上搭建CI/DI系统(毕竟吃资源),Github Action是一个不二的选择。 本文我们来通过 Github Action 实现 SpringBoot 项目的自动编译、制作doceker镜像,最后推送到docker hub 仓库。 Github Acti…

亿华通通过上市聆讯:第三季营收降53% 净亏3457万

雷递网 雷建平 12月13日北京亿华通科技股份有限公司(简称:“亿华通”)日前通过聆讯,准备在香港上市。这之前,亿华通是2020年8月在科创板上市,发行价为76.65元,发行17,630,523股,募集…

技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)

Vue.js 是一套用于构建用户界面的渐进式框架,在目前的前端开放中比较流行的前端框架。 Vue 被设计成自底向上的逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或已有项目整合。但是学习 Vue.js 需要一定的 HTML、CSS、和…

09、SpringBoot中集成SSM及其他插件

1、创建spring Boot项目导入如下基础依赖 <!-- 打包方式 jar 包 --> <packaging>jar</packaging><!-- 指定父工程 --> <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</art…

[附源码]Node.js计算机毕业设计房屋中介管理信息系统Express

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…

[附源码]Python计算机毕业设计SSM基于web的图书借阅管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

常规设置Apache服务器实例

常规设置Apache服务器实例 1&#xff0e;设置文档根目录和首页文件的实例 【例1】默认情况下&#xff0c;网站的文档根目录保存在/var/www/html中&#xff0c;如果想把保存网站文档的根目录修改为/home/wwwroot&#xff0c;并且将首页文件修改为myweb.html&#xff0c;那么该如…

CPU一级缓存L1 D-cache\L1 I-cache与二级缓存L2 cache深度分析

CPU缓存&#xff1a;通过优化的的读取机制&#xff0c;可以使CPU读取缓存的命中率非常高&#xff08;大多数CPU可达90%左右&#xff09;&#xff0c; 也就是说CPU下一次要读取的数据90%都在缓存(SRAM)中&#xff1b; 只有大约10%需要从内存&#xff08;DRAM、DDR等&#xff0…

MATLAB抽样定理实验

目录 一、实验目的 二、实验原理 三、实验要求 四、实验内容 1、连续时间信号时域波形及其幅度谱 2、信号进行抽样 3、频谱分析 4、由各抽样信号恢复出连续时间信号&#xff0c;计算并画出误差函数 一、实验目的 1、掌握抽样定理工作原理 2、练习使用Matlab编程进行抽…

非零基础自学Golang 第2章 安装和运行Go 2.5 安装开发工具

非零基础自学Golang 第2章 安装和运行Go 2.5 安装开发工具 互联网有很多可用的开发工具&#xff08;IDE&#xff09;&#xff0c;对于Go开发者来说&#xff0c;选一款最好用的工具&#xff0c;可以更高效地编码和构建项目。 GoLand是一款由JetBrains公司&#xff08;一家技…

【面试题】三面 面试官:运行 npm run xxx 的时候发生了什么?

大厂面试题分享 面试题库 前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 事情是这样的&#xff0c;直接开讲 面试官&#xff1a;npm run xxx的时候&#xff0c;发生了什么&#xff1f;讲的越详细越好。 我&am…

智能家居DIY之智能插座

WiFi智能插座对于新手接触智能家居产品更加友好&#xff0c;不需要额外购买网关设备 很多智能小配件也给我们得生活带来极大的便捷&#xff0c;智能插座就是其中之一&#xff0c;比如外出忘记关空调&#xff0c;可以拿起手机远程关闭。 简单说就是&#xff1a;插座可以连接wi…

深度学习的初学者用哪本书比较好的?

先推荐一本从基本概念和理论入手的深度学习书&#xff1a; 深度学习&#xff1a;从基础到实践&#xff08;上、下册&#xff09; 本书从基本概念和理论入手&#xff0c;通过近千张图和简单的例子由浅入深地讲解深度学习的相关知识&#xff0c;且不涉及复杂的数学内容。 本书分…

交叉梯度函数的MATLAB实现及代码分享01

交叉梯度函数的MATLAB实现及代码分享01 交叉梯度函数可用于反演成像中。作为一个连接不同物性参数的桥梁&#xff0c;交叉梯度函数可以实现不同物性参数的联合反演成像。 文章目录交叉梯度函数的MATLAB实现及代码分享01一、交叉梯度函数的定义二、交叉梯度函数的性质三、模型算…

14:30面试,14:38就出来了 ,问的实在是太...

从外包出来&#xff0c;没想到算法死在另一家厂子&#xff0c;自从加入这家公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以也就忍了。没想到8月一纸通知&#xff0c;所有人不许加班&#xff0c;薪资直降30%&#xff0c;顿时有吃不起饭的赶脚。 好在有…

考虑特性分布的储能电站接入的电网多时间尺度源储荷协调调度策略(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

为什么mac电脑识别不出来u盘?macbook识别不了u盘的解决办法

为什么mac电脑识别不出来u盘&#xff1f;关于U盘插入Mac电脑无反应的情况有很多种&#xff0c;是电脑无法识别U盘&#xff1f;电脑上面没有U盘的图标&#xff1f;还是插入后无法对U盘进行写入&#xff1f;针对不同的情况&#xff0c;解决的方法也是不一样的。现在&#xff0c;我…

电脑重装系统一启动就黑屏了该怎么办

相信很多用户都遇到过电脑一开机就黑屏了的问题&#xff0c;对于这个问题很多用户不知道怎么去排查问题&#xff0c;这里就和大家简单聊聊遇到电脑开机黑屏这种情况都有什么原因&#xff0c;又该如何解决吧。下面一起来看看解决方法吧&#xff01; 电脑一启动就黑屏的问题该如何…

一场没有先例的自动驾驶算法大赛,出结果了

贾浩楠 发自 凹非寺量子位 | 公众号 QbitAI自动驾驶领域没有先例的一场挑战赛&#xff0c;刚刚出结果。1067支队伍&#xff0c;整3个月时间主要在自动驾驶卡车、干线物流和自动驾驶轿车、城市道路双赛道场景下角逐。这也或是国内首次有干线物流赛道入赛&#xff0c;覆盖AEB紧急…

引擎入门 | Unity UI简介–第2部分(8)

本期我们继续为大家进行Unity UI简介&#xff08;第二部分&#xff09;的后续教程 本篇内容 14.静音功能 15.使用滑块来调节音量 16.更改AudioSource组件的音量 文章末尾可免费获取教程源代码 本篇本篇Unity UI简介&#xff08;第二部分&#xff09;篇幅较长&#xff0c;…