JavaScript弹窗事件

最新推荐文章于 2025-04-11 10:27:42 发布

酷尔。

最新推荐文章于 2025-04-11 10:27:42 发布

阅读量2.9k

点赞数 17

分类专栏：网页前端高级编程从入门到精通文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/apple_51931783/article/details/122774038

版权

网页前端高级编程从入门到精通专栏收录该内容

59 篇文章

订阅专栏

本文详细介绍了JavaScript中三种常见的弹窗事件：警告框、选择框和信息录入框。通过实例代码展示了如何实现这些功能，包括点击按钮弹出警告信息、确认对话框以及用户输入信息的对话框。这些弹窗方法简单易用，有助于在网页交互中提供用户提示和数据收集。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

主要介绍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>