JavaScript几种弹窗事件的使用
作者：酷尔。 时间：2023-08-24 15:59:08
一、弹窗事件是什么？
弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗口收集信息,不想收集可以取消隐藏。
二、简述几种弹窗的使用
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>
总结：
这几种弹窗方法比较简单,使用盒子的隐藏与展示,自己也可以定制一个弹窗。感兴趣的小伙伴可以进行尝试。
来源：https://blog.csdn.net/apple_51931783/article/details/122774038
标签：JavaScript,弹窗,事件
0
投稿猜你喜欢
asp中Adodb.Stream 的使用说明
2007-09-11 13:53:00
asp如何显示SQL数据库所有表的名称？
2010-06-08 09:30:00
MySQL 基本概念
2011-09-10 16:22:34
asp将table生成excel文件(xls)
2011-03-07 11:17:00
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2023-08-12 07:44:34
如何修改Linux的下MySQL 5.0的默认连接数
2012-01-29 18:07:04
基于insertBefore制作简单的循环插空效果
2023-08-17 22:34:17
DreamweaverMX2004技巧两则
2010-09-05 21:10:00
关于INDEX SERVER+ASP建立查询引擎的一点心得
2008-03-02 15:56:00
文章关键字替换带链接需要注意的两个问题
2010-02-25 12:18:00
如何设计一个成功的网站
2007-09-07 10:33:00
如何使用postman(新手入门)
2023-06-12 14:00:31
typecho统计博客所有文章的字数实例详解
2023-06-13 07:52:36
视觉设计常见误解
2008-11-13 13:09:00
50个常用sql语句 网上流行的学生选课表的例子
2012-07-11 16:02:01
MySQL内建复制功能来优化可用性
2010-10-25 20:20:00
js金额浮点格式化控件
2008-08-01 16:52:00
开心网让人很不开心
2009-04-05 15:56:00
javascript中css的float特殊写法
2007-12-24 20:24:00
asp从Excel中筛选符合条件的记录保存至新的Excel中
2007-09-06 19:20:00