Java教程

第十三届蓝桥杯(Web 应用开发)线上模拟赛【第八题】(实现卡号绑定功能)

本文主要是介绍第十三届蓝桥杯(Web 应用开发)线上模拟赛【第八题】(实现卡号绑定功能),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

第十三届蓝桥杯(Web 应用开发)线上模拟赛参考答案全集

考试需求

补全 index.js 中空缺代码,实现用户输入完卡号与密码后,与 ajax 请求到的卡号数据进行比对,当卡号和密码匹配成功时,则提示绑卡成功,效果如下所示。(需要注意:控制提示信息显示与隐藏要求使用 Bootstrap 提供的 class fade 与 show , 无需重新编写 css 样式)

解决办法

先用ajax请求js目录下的cardnolist.json,再进行遍历比较,再用jQuery对元素样式进行改变(bootstrap的显示和隐藏)

参考代码

js/index.js

 function bind(cardno, password) {
    //Todo:补充代码
    $.ajax('./js/cardnolist.json').then(res=>{
        
        for (const item in res.cardnolist) {
            if (res.cardnolist.hasOwnProperty(item)) {
                const element = res.cardnolist[item];
                
                if (cardno === element.cardno && password === element.password) {
                    // 卡号密码正确
                    $("#tip2").attr('class', "alert alert-warning alert-dismissible fade");
                    $("#tip1").attr('class', "alert alert-primary alert-dismissible show");
                    return;
                }
            }
        }
        // 最终未能匹配
        $("#tip1").attr('class', "alert alert-primary alert-dismissible fade");
        $("#tip2").attr('class', "alert alert-warning alert-dismissible show");

    })

 
}
$(document).ready(function() {
    $("#btnsubmit").click(function() {
        //卡号
        let cardno = $("#exampleInputCardno").val();
        //密码
        let password = $("#exampleInputPassword").val();
        bind(cardno, password);
    });
});
这篇关于第十三届蓝桥杯(Web 应用开发)线上模拟赛【第八题】(实现卡号绑定功能)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!