正文

小孩也能懂：JS confirm确认框怎么用？实用案例教你轻松掌握！

/0 浏览量
0424

JavaScript（简称JS）是一门强大的编程语言，它可以让网页变得更加生动和互动。今天，我们要来聊聊JS中的一个有趣的功能——confirm确认框。别看它名字听起来有点严肃，其实它就像一个可爱的“小问号”，可以帮助我们在网页上做一些简单的决策。

什么是confirm确认框？

confirm确认框是一个弹出的对话框，它通常会显示一个消息和一个“确定”按钮，有时候还有一个“取消”按钮。当用户点击“确定”时，我们就可以执行一些操作；如果用户点击“取消”，那么我们可以选择不做任何操作或者执行一些其他的代码。

怎么用confirm确认框？

使用confirm确认框非常简单，只需要调用confirm()函数，并传入一个字符串作为参数。这个字符串将会显示在确认框中。下面是一个简单的例子：

// 弹出一个confirm确认框
var userConfirmed = confirm("你确定要删除这个文件吗？");

// 根据用户的点击选择执行不同的操作
if (userConfirmed) {
    // 用户点击了“确定”
    console.log("文件已删除。");
} else {
    // 用户点击了“取消”
    console.log("文件未被删除。");
}

在上面的代码中，当用户点击“确定”时，控制台会输出“文件已删除。”；如果用户点击“取消”，则输出“文件未被删除。”

实用案例：制作一个简单的“删除确认”功能

现在，我们来做一个实用的案例：制作一个网页上的“删除确认”功能。当用户点击一个按钮时，会弹出一个confirm确认框，让用户确认是否删除某个项目。

1. HTML部分

首先，我们需要一些HTML元素来构建我们的界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除确认案例</title>
</head>
<body>
    <h1>删除确认案例</h1>
    <button id="deleteButton">删除项目</button>

    <script src="script.js"></script>
</body>
</html>

2. CSS部分（可选）

为了让界面看起来更美观，我们可以添加一些CSS样式：

#deleteButton {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#deleteButton:hover {
    background-color: #d32f2f;
}

3. JavaScript部分

接下来，我们需要编写JavaScript代码来实现删除确认功能：

// 当网页加载完毕后，绑定按钮点击事件
document.addEventListener("DOMContentLoaded", function() {
    var deleteButton = document.getElementById("deleteButton");

    // 绑定点击事件
    deleteButton.addEventListener("click", function() {
        // 弹出confirm确认框
        var userConfirmed = confirm("你确定要删除这个项目吗？");

        // 根据用户的点击选择执行不同的操作
        if (userConfirmed) {
            // 用户点击了“确定”，执行删除操作
            // 这里我们只是打印一个消息，实际操作可能需要删除数据库中的数据等
            console.log("项目已删除。");
        } else {
            // 用户点击了“取消”，不执行任何操作
            console.log("项目未被删除。");
        }
    });
});

4. 代码整合

最后，我们将HTML、CSS和JavaScript代码整合到一个文件中，例如index.html。当用户打开这个文件时，就可以看到我们的“删除确认”功能了。

总结

通过上面的学习，我们知道了如何使用JavaScript的confirm确认框来与用户进行简单的交互。这个功能虽然简单，但非常实用，可以帮助我们在网页上实现各种有趣的交互效果。希望这个案例能够帮助你更好地理解confirm确认框的使用方法。

-- 展开阅读全文 --