目录

一、13届蓝桥真题（10）课程列表

1、获取数据

2、自定义封装渲染数据到页面的函数

​3、点击上一页/下一页切换内容，封装上一页，下一页的禁用功能函数

4、显示当前页码和总页码

5、拓展

 二、动态规划

1、例子解释

2、兔子例题解析

三、自定义CSS变量

四、小三角标

1、在开发中很常见，如下图

 2、第一种实现方法：调节背景色

3、第二种实现方法：设置边框

一、13届蓝桥真题（10）课程列表

1、获取数据

（1）axios的使用

（2）通过数据长度确定最大页数

// TODO：待补充代码
let limit = 5 // 每页的条数
let list = [] // 存放获取的数据// 获取数据
function getData(){axios.get('./js/carlist.json').then(res=>{console.log(res);list = res.dataconst listLength = list.lengthmaxPage = Math.ceil(listLength / limit)})
}getData()

2、自定义封装渲染数据到页面的函数

（1）清空数据

（2）新数据的剪切【区别slice、splice、split】

• slice：不会改变原数组，格式Array.slice(begin,end)        [begin,end)左闭右开
• splice：会改变原数组
• split：字符串的切割

// TODO：待补充代码
let limit = 5 // 每页的条数
let list = [] // 存放获取的数据
let listGroup = document.querySelector('.list-group')// 获取数据
function getData(){axios.get('./js/carlist.json').then(res=>{console.log(res);list = res.dataconst listLength = list.lengthmaxPage = Math.ceil(listLength / limit)render()  //执行下面封装的渲染页面函数})
}getData()// 渲染到页面的函数
function render(){// 清空listGroup.innerHTML=' '// 剪切当前页所需的数据const newList = list.slice((pageNum - 1) * limit,pageNum * limit)let str=''// 循环所需的数据，放到str中newList.forEach(e=>{str+=`<a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">${e.name}</h5><small>${e.price}元</small></div><p class="mb-1">${e.description}</p></a>`})listGroup.innerHTML = str
}

3、点击上一页/下一页切换内容，封装上一页，下一页的禁用功能函数

function checkBtn(){if(pageNum == 1){prev.classList.add('disabled')}else{prev.classList.remove('disabled')}if(pageNum == maxPage){next.classList.add('disabled')}else{next.classList.remove('disabled')}
}// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {// TODO：待补充代码if(pageNum > 1){pageNum--render()}checkBtn()
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {// TODO：待补充代码if(pageNum < maxPage){pageNum++render()}checkBtn()
};

4、显示当前页码和总页码

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数// TODO：待补充代码
let limit = 5 // 每页的条数
let list = [] // 存放获取的数据
let listGroup = document.querySelector('.list-group')
let pagination = document.querySelector('#pagination')// 获取数据
function getData(){axios.get('./js/carlist.json').then(res=>{console.log(res);list = res.dataconst listLength = list.lengthmaxPage = Math.ceil(listLength / limit)render()  //执行下面封装的渲染页面函数})
}getData()// 渲染到页面的函数
function render(){// 清空listGroup.innerHTML=' '// 剪切当前页所需的数据const newList = list.slice((pageNum - 1) * limit,pageNum * limit)let str=''// 循环所需的数据，放到str中newList.forEach(e=>{str+=`<a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">${e.name}</h5><small>${e.price}元</small></div><p class="mb-1">${e.description}</p></a>`})listGroup.innerHTML = str// 显示当前页码和总页码pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}// 上一页，下一页禁用状态封装函数
function checkBtn(){if(pageNum == 1){prev.classList.add('disabled')}else{prev.classList.remove('disabled')}if(pageNum == maxPage){next.classList.add('disabled')}else{next.classList.remove('disabled')}
}// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {// TODO：待补充代码if(pageNum > 1){pageNum--render()}checkBtn()
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {// TODO：待补充代码if(pageNum < maxPage){pageNum++render()}checkBtn()
};

5、拓展

正确金额的转换

// 自定义金额转换
function setPrice(params) {if(!(typeof params === 'number') ) return 'NaN'// String(params)将金额转成字符串// String(params).slice(0,String(params).length-2)取出除最后两位的数值// String(params).slice(-2)取出最后两位数值const newPrice =String(params).slice(0,String(params).length-2) + '.' + String(params).slice(-2)// console.log(newPrice);return newPrice
}

// 渲染到页面的函数
function render(){// 清空listGroup.innerHTML=' '// 剪切当前页所需的数据const newList = list.slice((pageNum - 1) * limit,pageNum * limit)let str=''// 循环所需的数据，放到str中// 调用封装的金额转换函数，动态显示正确的金额newList.forEach(e=>{str+=`<a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">${e.name}</h5><small>${setPrice(e.price)}元</small></div><p class="mb-1">${e.description}</p></a>`})listGroup.innerHTML = str// 显示当前页码和总页码pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}

 二、动态规划

1、例子解释

（1）斐波那契数列

指的是这样一个数列：1，1，2，3，5，8，13，21，34，55，89... 这个数列从第3项开始，每一项都等于前两项之和。

（2）爬楼梯

一只兔子一次只能跳1或2格，那么到每一格有多少种可能

2、兔子例题解析

（1）源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div><p id="result1"></p><p id="result2"></p><p id="result3"></p></div><script src="./js/index.js"></script><script>let r1 = document.getElementById("result1");let r2 = document.getElementById("result2");let r3 = document.getElementById("result3");r1.innerHTML = `2 阶梯子，兔子有 ${climbStairs(2)} 种跳法到达月球。`;r2.innerHTML = `3 阶梯子，兔子有 ${climbStairs(3)} 种跳法到达月球。`;r3.innerHTML = `10 阶梯子，兔子有 ${climbStairs(10)} 种跳法到达月球。`;</script></body>
</html>

const climbStairs = (n) => {// TODO：请补充代码
};
module.exports = climbStairs;

（2）递归思想

const climbStairs = (n) => {// TODO：请补充代码if(n<3 && n>0){return n}else{return climbStairs(n-1) + climbStairs(n-2)}
};
module.exports = climbStairs;

三、自定义CSS变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>:root{--main1-color:red;--main2-color:blue;--main3-color:green;}.box{width: 400px;background-color: aqua;display: flex;justify-content: space-between;}.box div:nth-of-type(1){width: 100px;height: 100px;background-color: var(--main1-color);}.box div:nth-of-type(2){width: 100px;height: 100px;background-color: var(--main2-color);}.box div:nth-of-type(3){width: 100px;height: 100px;background-color: var(--main3-color);}</style>
</head>
<body><div class="box"><div></div><div></div><div></div></div></body>
</html>

四、小三角标

1、在开发中很常见，如下图

 2、第一种实现方法：调节背景色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;padding: 0;}.box{width: 100px;height: 100px;color: transparent;/* 颜色透明 */background: linear-gradient(/* 渐变色 */45deg,/* 转角度 */red 50%,transparent 50%);margin-bottom: 10px;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

3、第二种实现方法：设置边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{display: inline-block;border-bottom: 50px solid red;border-top: 50px solid green;border-left: 50px solid blue;border-right: 50px solid yellow;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

 当需要网易云音乐的那个向上的红色小三角，可以将其他方向的边框设置透明

.box{display: inline-block;border-bottom: 50px solid red;border-top: 50px solid transparent;border-left: 50px solid transparent;border-right: 50px solid transparent;
}