JavaScript几种弹窗事件的使用
更新时间：2022年02月25日 08:30:47 作者：酷尔。
这篇文章主要介绍了JavaScript几种弹窗事件的使用,弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗口收集信息,不想收集可以取消隐藏,下文介绍需要的朋友可以参考一下
一、弹窗事件是什么？
弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗口收集信息,不想收集可以取消隐藏。
二、简述几种弹窗的使用
1.警告框
①效果展示
②代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function myFunction() {
alert("你好，我是一个警告框！");
}
</script>
<div id="demo2"></div>
<div id="demo1"></div>
<input type="button" value="弹窗" onclick="myFunction()">
</body>
</html>2.选择框
①效果展示：
②代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function myFunction1(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo1").innerHTML=x;
}
</script>
<div id="demo2"></div>
<div id="demo1"></div>
<input type="button" value="选择框" onclick="myFunction1()">
</body>
</html>3.信息录入框
①效果展示：
②代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function myFunction2(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo2").innerHTML=x;
}
}
</script>
<div id="demo2"></div>
<div id="demo1"></div>
<input type="button" value="填信息框" onclick="myFunction2()">
</body>
</html>总结：
这几种弹窗方法比较简单,使用盒子的隐藏与展示,自己也可以定制一个弹窗。感兴趣的小伙伴可以进行尝试。
到此这篇关于JavaScript几种弹窗事件的使用的文章就介绍到这了,更多相关JavaScript弹窗事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
可折叠的树形菜单想必大家并不陌生吧，实现方法有多种，在本文将为大家介绍下js是如何实现的，希望对大家有所帮助2013-09-09
初学js插入节点appendChild insertBefore使用方法
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。2011-07-07
JS建造者模式是一种创建型设计模式,它可以用于构建复杂对象的创建过程,将对象的构建步骤和表示分离,以便能够灵活地构建不同的对象,本文将通过代码示例给大家详细的介绍一下JS建造者模式的用法,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JavaScript三元运算符的多种使用技巧,本文讲解了普通用法、稍微聪明点的用法、甚至更变态些的用法等,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS+CSS实现淡入式焦点图片幻灯切换效果的方法,实例分析了javascript操作图片、css等元素实现幻灯片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
下面小编就为大家带来一篇JS输出空格的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了Javascript发送AJAX请求的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JS块级作用域和私有变量,结合实例形式较为详细的分析了javascript块级作用域和私有变量相关概念、原理、操作技巧,需要的朋友可以参考下2019-05-05
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。本文给大家介绍ie8 不支持 indexof 的解决方法2016-03-03
这篇文章主要介绍了js实现表单Radio切换效果的方法,涉及javascript实现页面元素的隐藏与显示及复选框的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论