第十三届蓝桥杯(Web 应用开发)线上模拟赛【第八题】(实现卡号绑定功能)
2021/12/22 23:49:37
本文主要是介绍第十三届蓝桥杯(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 应用开发)线上模拟赛【第八题】(实现卡号绑定功能)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南
- 2024-09-30Dnd-Kit学习:新手快速入门指南