JavaScript弹窗|极客笔记

JavaScript弹窗

JavaScript是一种广泛应用于网页开发中的脚本语言，通过JavaScript可以实现网页的动态效果和交互功能。其中，弹窗是JavaScript中常用的功能之一，可以通过弹窗向用户展示信息或者进行交互。本文将详细介绍如何使用JavaScript来创建各种类型的弹窗。

1. alert弹窗

alert弹窗是最简单的一种弹窗，用于向用户展示一条消息，并要求用户点击“确定”按钮才能关闭。下面是一个简单的alert弹窗示例：

<!DOCTYPE html>
<html>
<head>
    <title>Alert弹窗示例</title>
</head>
<body>
    <button onclick="showAlert()">点击我显示alert弹窗</button>
    <script>
        function showAlert() {
            alert("JavaScript is enabled.");
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会弹出一个包含消息“JavaScript is enabled.”的alert弹窗。

2. confirm弹窗

confirm弹窗用于向用户展示一条消息，并要求用户点击“确定”或“取消”按钮进行选择。下面是一个简单的confirm弹窗示例：

<!DOCTYPE html>
<html>
<head>
    <title>Confirm弹窗示例</title>
</head>
<body>
    <button onclick="showConfirm()">点击我显示confirm弹窗</button>
    <script>
        function showConfirm() {
            var result = confirm("是否继续操作？");
            if (result) {
                alert("用户点击了确定按钮");
            } else {
                alert("用户点击了取消按钮");
            }
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会弹出一个包含消息“是否继续操作？”的confirm弹窗，用户点击确定或取消按钮后会分别弹出相应的消息。

3. prompt弹窗

prompt弹窗用于向用户展示一条消息，并要求用户输入内容。下面是一个简单的prompt弹窗示例：

<!DOCTYPE html>
<html>
<head>
    <title>Prompt弹窗示例</title>
</head>
<body>
    <button onclick="showPrompt()">点击我显示prompt弹窗</button>
    <script>
        function showPrompt() {
            var result = prompt("请输入您的姓名：", "张三");
            if (result != null) {
                alert("您输入的姓名是：" + result);
            }
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会弹出一个包含消息“请输入您的姓名：”和输入框的prompt弹窗，用户输入姓名后点击确定按钮会弹出包含输入姓名的消息。

4. 自定义样式的弹窗

除了使用默认样式的弹窗外，还可以通过CSS样式来自定义弹窗的外观。下面是一个使用自定义样式的弹窗示例：

<!DOCTYPE html>
<html>
<head>
    <title>自定义样式的弹窗示例</title>
    <style>
        .custom-alert {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <button onclick="showCustomAlert()">点击我显示自定义样式的弹窗</button>
    <script>
        function showCustomAlert() {
            var div = document.createElement("div");
            div.className = "custom-alert";
            div.innerHTML = "JavaScript is enabled.";
            document.body.appendChild(div);
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会在页面中动态创建一个包含消息“JavaScript is enabled.”的自定义样式的弹窗。

5. 延时弹窗

有时候需要延时显示弹窗，可以使用setTimeout函数来实现。下面是一个延时弹窗示例：

<!DOCTYPE html>
<html>
<head>
    <title>延时弹窗示例</title>
</head>
<body>
    <button onclick="showDelayedAlert()">点击我延时显示alert弹窗</button>
    <script>
        function showDelayedAlert() {
            setTimeout(function() {
                alert("JavaScript is enabled.");
            }, 2000);
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会延时2秒后显示包含消息“JavaScript is enabled.”的alert弹窗。

6. 多次弹窗

有时候需要多次弹出弹窗，可以使用递归调用函数来实现。下面是一个多次弹窗示例：

<!DOCTYPE html>
<html>
<head>
    <title>多次弹窗示例</title>
</head>
<body>
    <button onclick="showMultipleAlert(5)">点击我多次显示alert弹窗</button>
    <script>
        function showMultipleAlert(count) {
            if (count > 0) {
                alert("JavaScript is enabled.");
                count--;
                setTimeout(function() {
                    showMultipleAlert(count);
                }, 1000);
            }
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会连续5次弹出包含消息“JavaScript is enabled.”的alert弹窗。

7. 弹窗关闭后执行操作

有时候需要在弹窗关闭后执行一些操作，可以使用回调函数来实现。下面是一个弹窗关闭后执行操作的示例：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗关闭后执行操作示例</title>
</head>
<body>
    <button onclick="showAlertWithCallback()">点击我显示alert弹窗</button>
    <script>
        function showAlertWithCallback() {
            alert("JavaScript is enabled.");
            setTimeout(function() {
                alert("弹窗已关闭，执行其他操作。");
            }, 1000);
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会弹出包含消息“JavaScript is enabled.”的alert弹窗，1秒后会弹出包含消息“弹窗已关闭，执行其他操作。”的alert弹窗。

8. 弹窗输入验证

有时候需要对用户输入进行验证，可以在弹窗中进行验证。下面是一个弹窗输入验证的示例：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗输入验证示例</title>
</head>
<body>
    <button onclick="showPromptWithValidation()">点击我显示带验证的prompt弹窗</button>
    <script>
        function showPromptWithValidation() {
            var result = prompt("请输入一个包含deepinout.com的字符串：", "");
            if (result != null && result.includes("deepinout.com")) {
                alert("输入验证通过！");
            } else {
                alert("输入验证未通过，请重新输入。");
            }
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会弹出一个包含消息“请输入一个包含deepinout.com的字符串：”和输入框的prompt弹窗，用户输入包含deepinout.com的字符串后点击确定按钮会弹出“输入验证通过！”的消息，## 9. 弹窗输入长度限制

有时候需要对用户输入的长度进行限制，可以在弹窗中进行长度验证。下面是一个弹窗输入长度限制的示例：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗输入长度限制示例</title>
</head>
<body>
    <button onclick="showPromptWithLengthLimit()">点击我显示带长度限制的prompt弹窗</button>
    <script>
        function showPromptWithLengthLimit() {
            var result = prompt("请输入不超过10个字符的字符串：", "");
            if (result != null && result.length <= 10) {
                alert("输入长度符合要求！");
            } else {
                alert("输入长度超过限制，请重新输入。");
            }
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗

点击按钮后，会弹出一个包含消息“请输入不超过10个字符的字符串：”和输入框的prompt弹窗，用户输入不超过10个字符的字符串后点击确定按钮会弹出“输入长度符合要求！”的消息，否则会弹出“输入长度超过限制，请重新输入。”的消息。

10. 弹窗定时关闭

有时候需要在一定时间后自动关闭弹窗，可以使用setTimeout函数来实现。下面是一个弹窗定时关闭的示例：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗定时关闭示例</title>
</head>
<body>
    <button onclick="showAlertWithAutoClose()">点击我显示自动关闭的alert弹窗</button>
    <script>
        function showAlertWithAutoClose() {
            var alertBox = alert("JavaScript is enabled.");
            setTimeout(function() {
                alertBox.close();
            }, 2000);
        }
    </script>
</body>
</html>

Output:

JavaScript弹窗