【Web前端】楼赛第27期-CSDN博客

本文链接：https://blog.csdn.net/qq_62837899/article/details/129835078

前言

本章内容主要讲解【Web前端】楼赛第27期，题目只有三题，也比较的简单。

文章目录

第一题：修复网站显示问题

题目要求：修复网站显示问题

我的思路：

①如上图，打开index页面发现内容都可以正常显示唯独css失效了。所以我们首先要考虑的就是css文件是否正确引入。如下图，查看代码，发现css文件路径引用错误，修改为正确的就可以了。

我的答案：

<link rel="stylesheet" href="./css/style.css" />

第二题：封装函数实现简易计算器

题目要求：

我的思路：

①计算事件中传入的三个参数，通过打印发现它们分别代表num1为一个输入框的值，num2为第二个输入框的值，type是符号类型0表示+号，1表示-号，2表示*号，3表示/号。

②所以我们根据传入的类型来判断数据应该进行什么操作。可以用if写，也可以用switch……case写。

我的答案：

function cal(num1, num2, type) {
    // TODO: 在此处补充代码
    switch (type)
    {
    /*类型为0，数据做相加操作*/
    case 0:
        return num1+num2;
        break;
    /*类型为1，数据做相减操作*/
    case 1:
        return num1-num2;
        break;
    /*类型为2，数据做相乘操作*/
    case 2:
        return num1*num2;
        break;
    /*类型为3，数据做相除操作 注意：除数是不能为0的，由于页面中已经判断了，所以这里就不用再写了*/
    case 3:
        return num1/num2;
        break;
    }
}
module.exports = cal; //请勿删除

第三题：实现用户登录功能

题目要求：

我的思路：

①调用接口，获取到数据库中登入数据。然后遍历数据库中存在的登入数据与当前输入的用户名和密码进行对比，如果用户名和密码都相等就显示成功的提示(就是为id=“tip1”的标签删除fade类，为id=“tip2”的标签添加fade类)

②定义一个参数，用于记录数据库中存在的用户登入数据与输入的用户名和密码不相等的次数。如果等于接口数据长度那么就表示输入的用户名和密码不存在，则显示失败的提示(就是为id=“tip2”的标签删除fade类，为id=“tip1”的标签添加fade类)。

我的答案：

function login(username, password) {
    //Todo:补充代码
    /*请求接口*/
    $.ajax({
        url:'https://labfile.oss.aliyuncs.com/courses/4450/userlist.json',
        success:function(res){
            /*在成功的回调中保存接口的登入数据*/
            let userlist=res.userlist;
            /*用于计算不相等次数的*/
            var sum=0;
            /*遍历*/
            userlist.forEach(element => {
                /*如果用户名密码都相等*/
                if(username===element.username && password===element.password){
                    $('#tip1').removeClass('fade');
                    $('#tip2').addClass('fade');
                }else{
                    /*不相等就次数加1*/
                    sum++;
                }
                /*如果不相等次数等于接口登录数组长度了，就说明当前输入的用户名或密码不存在*/
                if(sum===userlist.length){
                    $('#tip2').removeClass('fade');
                    $('#tip1').addClass('fade');
                }
            });
        }
    })
}