01 水果拼盘

题目:


题解:

本题使用 flex 布局可以快速完成,使用 flex-direction 属性将主轴方向改为 y 轴,然后使用 flex-wrap 属性使元素换行

#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

02 展开你的扇子

题目


题解

本题主要考察 css3 transform属性,使用rotate规定元素旋转角度,单位为deg,值为负时为逆时针旋转

#box:hover #item6 {
  transform: rotate(-10deg);
}
#box:hover #item5 {
  transform: rotate(-20deg);
}
#box:hover #item4 {
  transform: rotate(-30deg);
}
#box:hover #item3 {
  transform: rotate(-40deg);
}
#box:hover #item2 {
  transform: rotate(-50deg);
}
#box:hover #item1 {
  transform: rotate(-60deg);
}
#box:hover #item7 {
  transform: rotate(10deg);
}
#box:hover #item8 {
  transform: rotate(20deg);
}
#box:hover #item9 {
  transform: rotate(30deg);
}
#box:hover #item10 {
  transform: rotate(40deg);
}
#box:hover #item11 {
  transform: rotate(50deg);
}
#box:hover #item12 {
  transform: rotate(60deg);
}

03 和手机相处的时光

题目


题解

这一题主要考察 echarts 配置中的坐标轴配置

属性 说明 适用对象
value 数值轴 适用于连续数据
category 类目轴 适用于离散的类目数据
time 时间轴 适用于连续的时序数据
log 对数轴 适用于对数数据
 xAxis: {
         type: "category",
      },
      yAxis: {
         type: "value",
      },

04 灯的颜色变化

题目

题解

通过修改元素 display 属性控制显示和隐藏,然后设置计时器控制时间。

// TODO:完善此函数 显示红色颜色的灯
function red() {
  let redlight = document.querySelector("#redlight");
  let defaultlight = document.querySelector("#defaultlight");
  redlight.style.display = "inline-block";
  defaultlight.style.display = "none";
}

// TODO:完善此函数  显示绿色颜色的灯
function green() {
  let redlight = document.querySelector("#redlight");
  let greenlight = document.querySelector("#greenlight");
  redlight.style.display = "none";
  greenlight.style.display = "inline-block";
}

// TODO:完善此函数
function trafficlights() {
  setTimeout(() => {
    red();
  }, 3000);
  setTimeout(() => {
    green();
  }, 6000);
}
trafficlights();

05 冬奥大抽奖

题目

题解

思路:

  • 一共有 8 个转盘,所以用转动次数%8 就可以得到当前的元素索引
  • 当转动次数为 8 的整数倍时,设置元素索引为 8
  • 用字符串拼接方式获取当前元素的类名
let classname = `.li${time % 8}`;
if (time % 8 === 0) {
  classname = ".li8";
}
  • 给当前元素添加类名 active,其余兄弟节点移除类名 active
$(`${className}`).addClass("active").siblings().removeClass("active");
  • 转动停止后根据 active 类名获取对应的 li 元素,取其文本值赋值给#award 元素。
let text = $(`.active`).text();
$("#award").text(`恭喜您抽中了${text}!!!`);

完整代码:

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数,随机20-30次
  rolling();
});

// TODO:请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
    let classname = `.li${time % 8}`;
    if (time % 8 === 0) {
      classname = ".li8";
    }
    $(`${classname}`).addClass("active").siblings().removeClass("active");
  }, speed);

  // time > times 转动停止
  if (time > times) {
    let text = $(`.active`).text();
    $("#award").text(`恭喜您抽中了${text}!!!`);
    clearInterval(rollTime);
    time = 0;
    return;
  }
}

06 蓝桥知识网

题目

题解

本题主要考察 html 和 css 布局
可将页面分为 4 部分,分别为 header、banner、content、footer
可以使用 flex 布局以及 grid 布局快速完成页面设计
代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>蓝桥知识网</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <!--TODO:请补充代码-->
    <div class="top">
      <header>
        <div class="headerTitle">蓝桥知识网</div>
        <ul class="nav">
          <li>首页</li>
          <li>热门技术</li>
          <li>使用手册</li>
          <li>知识库</li>
          <li>练习题</li>
          <li>联系我们</li>
          <li>更多</li>
        </ul>
      </header>
      <div class="banner">
        <div class="bannerTitle">蓝桥云课</div>
        <div class="bannerText">随时随地丰富你的技术栈!</div>
        <div class="join">加入我们</div>
      </div>
    </div>
    <div class="content">
      <div class="list">
        <div class="listTitle">人工智能</div>
        <div class="listText">
          人工智能亦称智械、机器智能,指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
        </div>
      </div>
      <div class="list">
        <div class="listTitle">前端开发</div>
        <div class="listText">
          前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程,通过
          HTML,CSS 及 JavaScript
          以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。
        </div>
      </div>
      <div class="list">
        <div class="listTitle">后端开发</div>
        <div class="listText">
          后端开发是实现页面的交互逻辑,通过使用后端语言来实现页面的操作功能,例如登录、注册等。
        </div>
      </div>
      <div class="list">
        <div class="listTitle">信息安全</div>
        <div class="listText">
          ISO(国际标准化组织)的定义为:为数据处理系统建立和采用的技术、管理上的安全保护,为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
        </div>
      </div>
    </div>
    <footer>
      <div>© 蓝桥云课 2022</div>
      <div>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
    </footer>
  </body>
</html>
/*
 TODO:请补充代码
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top {
  width: 100%;
  background-color: #a6b1e1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
header {
  padding-top: 13px;
  width: 1024px;
  height: 46px;
  display: flex;
  justify-content: space-between;
}
.headerTitle {
  font-size: 18px;
  color: white;
}

.nav {
  display: flex;
  font-size: 16px;
  color: white;
}
.nav li {
  list-style: none;
  margin-right: 16px;
}
.banner {
  margin-top: 13px;
  width: 1024px;
  height: 427px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bannerTitle {
  margin-top: 30px;
  font-size: 45px;
  color: black;
}
.bannerText {
  margin-top: 62px;
  color: white;
  font-size: 21px;
  font-weight: 200;
}
.join {
  margin-top: 36px;
  color: #efbfbf;
  border-radius: 2px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: inset 0 0 0 2px #efbfbf;
}
.content {
  margin-top: 74px;
  width: 1024px;
  height: 302px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 20px;
}
.list {
  height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.listTitle {
  font-size: 30px;
  font-weight: 200;
  color: black;
}
.listText {
  font-size: 18px;
  color: #aaa;
  line-height: 1.4em;
}
footer {
  width: 1024px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #aaa;
}
footer div:nth-child(1) {
  margin-top: 30px;
}
footer div:nth-child(2) {
  margin-top: 10px;
}

07 布局切换

题目


题解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>布局切换</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script
      src="./js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- TODO:请在下面实现需求 -->
      <div class="bar">
        <a :class="{'active':active}" class="grid-icon " @click="grid()"></a>
        <a :class="{'active':!active}" class="list-icon" @click="list()"></a>
      </div>
      <!--grid 示例代码,动态渲染时可删除-->
      <ul
        :class="active?'grid':'list'"
        v-for="item in goodsList"
        :key="item.url"
      >
        <li>
          <a :href="item.url" target="_blank">
            <img :src="item.image.large"
          /></a>
          <p v-show="!active">{{item.title}}</p>
        </li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      active: true,
    },
    mounted() {
      // TODO:补全代码实现需求
      axios.get("./goodsList.json").then((res) => {
        this.goodsList = res.data;
      });
    },
    methods: {
      grid() {
        this.active = true;
      },
      list() {
        this.active = false;
      },
    },
  });
</script>

08 购物车

题目


题解

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>购物车</title>
        <script src="./js/goods.js"></script>
        <script type="text/javascript" src="./js/vue.js"></script>
        <link href="./css/index.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id="app">
            <!-- 商品列表 -->
            <h3>商品列表</h3>
            <ul id="goodsList">
                <template v-for="goods in goodsList">
        <li class="goods-item" :key="goods.id">
          <div><img :src="goods.imgUrl" /> </div>
          <div>{{goods.name}}</div>
          <div>¥ {{goods.price}} </div>
          <button @click="addToCart(goods)">加入购物车</button>
        </li>
      </template>
            </ul>
            <!-- 购物车 -->
            <template v-if="cartList.length>0">
      <h3>购物车</h3>
      <ul id="cartList">
        <template v-for="goods in cartList">
          <li class="goods-item" :key="goods.id">
            <div><img :src="goods.imgUrl" /> </div>
            <div>{{goods.name}}</div>
            <div>¥ {{goods.price}} </div>
            <div class="item-control">
              <button @click="removeGoods(goods)">-</button>
              <h4>{{goods.num}}</h4>
              <button @click="addToCart(goods)">+</button>
            </div>
          </li>
        </template>
            </ul>
            </template>
        </div>
    </body>

</html>

<script>
    new Vue({
        el: '#app',
        data: {
            cartList: [],
            goodsList: []
        },
        mounted() {
            this.goodsList = GoodsArr;
        },
        methods: {
            addToCart(goods) {
                // TODO:修改当前函数,实现购物车加入商品需求
                let itemIndex = this.cartList.findIndex(item => item.id == goods.id);
                if (itemIndex !== -1) {
                    this.cartList[itemIndex].num++
                } else {
                    goods.num = 1;
                    this.cartList.push(goods);
                }

                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            },
            removeGoods(goods) {
                // TODO:补全代码实现需求
                let itemIndex = this.cartList.findIndex(item => item.id == goods.id);
                if (this.cartList[itemIndex].num > 1) {
                    this.cartList[itemIndex].num--
                } else {
                    this.cartList.splice(itemIndex, 1)
                }
            }
        }
    });
</script>

09 寻找小狼人

题目

题解

首先看一下函数是怎么调用的

let newcardList = cardList.myarray((item) => item.category == "werewolf");

可以看到函数参数为一个回调函数,是要满足的判断条件
所以我们只需要遍历数组找到满足条件的数据存入新数组中
接着把新数组返回即可

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO:待补充代码
  let result = [];
  this.forEach((item) => {
    if (cb(item)) {
      result.push(item);
    }
  });
  return result;
};

10 课程列表

题目


题解

let pageNum = 1; // 当前页码,默认页码1
let maxPage; // 最大页数

// TODO:待补充代码
let pagination = document.getElementById("pagination");
let list = document.getElementById("list");
let arr = [];
axios.get("./js/carlist.json").then((res) => {
  arr = res.data;
  //利用ceil向上取整,获取最大页数
  maxPage = Math.ceil(res.data.length / 5);
  showDom(pageNum);
  pagination.textContent = `共${maxPage}页,当前${pageNum}页`;
});
// 将number类型转换成题目给定的货币类型
function fmoney(num) {
  if (!num) return NaN;
  num = num.toString();
  let l = num.split("");
  let i = l.length;
  l.splice(i - 2, 0, ".");
  return l.join("");
}
// 更新DOM的函数
function showDom(index) {
  // 深拷贝
  let Dom = JSON.parse(JSON.stringify(arr));
  // 截取需要展示的5条数据
  let newDom = Dom.splice((index - 1) * 5, 5);
  list.innerHTML = "";

  for (let i = 0; i < newDom.length; i++) {
    const element = newDom[i];
    list.innerHTML += `  <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${element.name}</h5>
            <small>${fmoney(element.price)}元</small>
          </div>
          <p class="mb-1">
          ${element.description}
          </p>
        </a>
      </div>`;
  }
}
let prev = document.getElementById("prev");
let next = document.getElementById("next");
// 给按钮添加禁用类disabled的函数
function isDisabled() {
  if (pageNum === 1) {
    prev.classList.add("disabled");
  } else {
    prev.classList.remove("disabled");
  }
  if (pageNum === maxPage) {
    next.classList.add("disabled");
  } else {
    next.classList.remove("disabled");
  }
}
isDisabled();
// 点击上一页
prev.onclick = function () {
  // TODO:待补充代码
  if (pageNum > 1) {
    pageNum--;
    showDom(pageNum);
  }
  isDisabled();
  pagination.textContent = `共${maxPage}页,当前${pageNum}页`;
};
// 点击下一页

next.onclick = function () {
  // TODO:待补充代码
  if (pageNum !== maxPage) {
    pageNum++;
    showDom(pageNum);
  }
  isDisabled();
  pagination.textContent = `共${maxPage}页,当前${pageNum}页`;
};

完整题目 :
https://gitee.com/Raindropp/lanqiao-topic
完整题解 :
https://gitee.com/Raindropp/lanqiao-answer

Q.E.D.


永远自由,永远热爱