javascriptconfirmerannuler

La fonction de confirmation et d'annulation de Javascript signifie que lorsque l'utilisateur effectue certaines opérations sur le site Web, une boîte de dialogue apparaît pour lui demander s'il doit confirmer l'opération ou l'annuler. Cette fonction est largement utilisée dans le développement de sites Web, comme les opérations de suppression, la soumission de formulaires, etc. Cet article présentera en détail comment utiliser Javascript pour implémenter la fonction d'annulation confirmée.

1. Qu'est-ce que la fonction Confirmer Annuler ?

La fonction Confirmer Annuler (Confirmer) est une boîte de dialogue qui apparaît lorsque l'utilisateur effectue certaines opérations pour lui demander s'il est sûr d'effectuer l'opération ou de l'annuler. Il comporte généralement deux boutons, « OK » et « Annuler », et l'utilisateur peut cliquer sur l'un des boutons selon ses besoins. Le bouton OK effectuera l'opération, tandis que le bouton Annuler n'effectuera pas l'opération et fermera simplement la boîte de dialogue.

2. Comment utiliser Javascript pour implémenter la fonction de confirmation et d'annulation

La méthode de confirmation en Javascript peut implémenter la fonction de confirmation et d'annulation. Cette méthode fait apparaître une boîte de dialogue et l'utilisateur peut cliquer sur le bouton OK ou Annuler. Cette méthode renvoie vrai lorsque l'utilisateur clique sur le bouton OK et faux lorsqu'il clique sur le bouton Annuler.

Ce qui suit est un exemple de code qui utilise Javascript pour implémenter la fonction d'annulation confirmée :

<script>
function deleteBlog() {
    // 弹出对话框
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        // 用户点击了确定按钮
        // 执行删除操作
        alert("删除成功！");
    } else {
        // 用户点击了取消按钮
        // 不执行删除操作
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

Dans cet exemple de code, nous définissons une fonction appelée deleteBlog, qui est appelée lorsque le bouton est cliqué. La fonction deleteBlog affiche une boîte de dialogue demandant à l'utilisateur s'il est sûr de supprimer ce blog. Si l'utilisateur clique sur le bouton OK, la fonction effectuera l'opération de suppression ; si l'utilisateur clique sur le bouton Annuler, la fonction n'effectuera pas l'opération de suppression.

3. Personnaliser la boîte d'invite

La boîte d'invite qui apparaît dans la méthode de confirmation de Javascript est relativement simple et ne peut pas répondre à des besoins complexes. Nous pouvons obtenir une boîte d'invite plus belle et plus flexible en personnalisant la boîte d'invite.

Personnaliser la boîte de dialogue consiste en fait à définir un élément HTML, à l'afficher sur la page et à utiliser des styles CSS pour contrôler son apparence et son style sur la page. Ensuite, en Javascript, utilisez des déclencheurs d'événements pour contrôler l'affichage et le masquage de la boîte d'invite.

Par exemple, ce qui suit est une boîte de dialogue personnalisée à l'aide de CSS :

<div class="confirm" id="confirmDiv">
    <div class="confirm-title">是否确定删除？</div>
    <div class="confirm-btns">
        <button class="confirm-btn" id="okBtn">确定</button>
        <button class="confirm-btn" id="cancelBtn">取消</button>
    </div>
</div>

<script>
var confirmDiv = document.getElementById("confirmDiv");
var okBtn = document.getElementById("okBtn");
var cancelBtn = document.getElementById("cancelBtn");

function deleteBlog() {
    // 显示提示框
    confirmDiv.style.display = "block";
    
    // 取消按钮点击事件
    cancelBtn.onclick = function() {
        confirmDiv.style.display = "none";
    }
    
    // 确定按钮点击事件
    okBtn.onclick = function() {
        confirmDiv.style.display = "none";
        // 执行删除操作
        alert("删除成功！");
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

Dans cet exemple de code, nous définissons un élément DIV nommé confirmDiv pour le masquer dans la page. Lorsque l'utilisateur clique sur le bouton Supprimer le blog, nous utilisons Javascript pour contrôler l'affichage de confirmDiv. Dans le même temps, nous avons ajouté des déclencheurs d'événements correspondants aux boutons OK et Annuler, de sorte que lorsque l'utilisateur clique sur le bouton, l'opération correspondante puisse être effectuée. Il convient de noter que notre liaison d'événement pour le bouton se trouve dans la fonction deleteBlog plutôt que lorsque la page est chargée. Cela peut réduire la liaison d'événement lorsque la page est chargée et améliorer les performances de la page.

4. Fonction de rappel

La fonction de confirmation et d'annulation de Javascript est généralement synchrone, c'est-à-dire qu'une fois que l'utilisateur a cliqué sur le bouton de confirmation ou d'annulation dans la zone d'invite, l'opération sera exécutée immédiatement. Mais parfois, l'opération effectuée par l'utilisateur prend un certain temps, il faut alors utiliser la fonction de rappel.

La fonction de rappel nous permet d'exécuter des opérations de longue durée après la fermeture de la boîte de dialogue, afin de ne pas bloquer d'autres opérations sur la page. Par exemple, voici un exemple de code qui utilise une fonction de rappel pour implémenter la fonction d'annulation confirmée :

function deleteBlog(callback) {
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        setTimeout(function() {
            // 执行删除操作
            callback(true);
        }, 1000); // 延迟1秒执行删除操作
    } else {
        callback(false);
    }
}

deleteBlog(function(result) {
    if (result) {
        alert("删除成功！");
    } else {
        alert("删除失败！");
    }
});

Dans cet exemple de code, nous définissons une fonction nommée deleteBlog, qui accepte une fonction de rappel comme paramètre. Lorsque l'utilisateur clique sur le bouton OK, la fonction deleteBlog retardera l'opération de suppression d'1 seconde, appellera la fonction de rappel une fois l'opération de suppression terminée et transmettra le résultat de l'exécution à la fonction de rappel. Lorsque l'utilisateur clique sur le bouton Annuler, la fonction deleteBlog exécute directement la fonction de rappel et lui transmet le résultat de l'exécution. Dans cet exemple, nous utilisons la méthode alert pour afficher le résultat de la suppression. Bien entendu, vous pouvez également renvoyer le résultat de la suppression à l'appelant de la fonction afin qu'il puisse effectuer différentes actions en fonction du résultat de la suppression.

5. Résumé

Cet article présente en détail la méthode d'implémentation de la fonction d'annulation de confirmation de Javascript. Tout d'abord, nous avons présenté les concepts et principes de base de la fonction d'annulation confirmée, puis expliqué comment utiliser Javascript pour implémenter la fonction d'annulation confirmée et donné un exemple d'utilisation de CSS pour personnaliser la boîte d'invite. Enfin, nous avons expliqué le concept et l'utilisation des fonctions de rappel. La fonction de confirmation-annulation est largement utilisée dans le développement de sites Web. Elle peut non seulement améliorer l'expérience utilisateur, mais également protéger les données des utilisateurs et la sécurité du site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!