前言
功能实现类，是考察的重要一部分。我们要分析好功能点，才能逻辑清晰的去实现它，当然这离不开扎实的基础。
一、蓝桥杯是什么？🤔
蓝桥杯一般指蓝桥杯全国软件和信息技术专业人才大赛。
二、功能实现类题目
1.封装函数实现个人所得税计算器⭐
解决方案：该题通过简单的 if…else 条件判断即可实现
function cal(salary) { // TODO: 在此处补充代码 if(salary <= 5000){ return 0 }else if(salary > 5000 && salary <= 9000){ return (salary - 5000) * 0.03 }else if(salary > 9000 && salary <= 15000){ return (salary - 5000) * 0.05 }else{ return (salary - 5000) * 0.1 } }
2.封装简易计算器⭐
解决方案：使用 if…else 语句，进行相应的操作
if(type==0){ return num1 + num2 }else if(type==1){ return num1 - num2 }else if(type==2){ return num1 * num2 }else if(type==3){ return num1 / num2 }
3.关于你的欢迎语⭐
解决方案：
- 用 ES5 的
''和+进行拼接 - 使用 ES6 的模板字符串
//ES5 result = "欢迎用户" + subject.value + "在" + event2.value + "学习" + event1.value + "课程！"
//ES6 result = `欢迎用户${subject.value}在${event2.value}学习${event1.value}课程！`
4.echarts柱形图⭐
解决方案：由图可以看出，姓名数据呈现在 x 轴，并非 y 轴。所以我们把原本写在 y 轴的数据写入 x轴，并把 y轴 中的数据删除即可
// x轴 xAxis:{ data: ['张三', '李四', '王五', '贺八', '杨七', '陈九'] }, // y轴 yAxis: { }
5.折叠手风琴⭐⭐
解决方案：该题目使用了 jQuery。每个 div 都绑定了 option 类属性。可以使用 $('.option') 获取到 div ，然后给它添加点击事件。对被点击到的 div 进行添加 active 属性，给其兄弟节点（不包含自己）移出 active 属性。
增加删除样式参考链接
兄弟节点参考链接
注意点：
$(this) 不需要加 ''
addClass()：增加样式
removeClass()：删除样式
siblings()：兄弟节点（不包括自己）
$(function(){ $('.option').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') }) })
6.新年贺卡⭐⭐⭐
解决方案：通过生成随机数的值作为 greetings 数组的下标，然后再 show() 中呈现出随机获取的数组内容。
注意：
获取的随机数要用 [] 包裹着，作为 greetings 数组的下标
function writeGreeting() { return greetings[(Math.floor(Math.random()*5))] } function show(greetingDisplay) { greetingDisplay.innerHTML = writeGreeting() }
7.搜一搜呀⭐⭐⭐
解决方案：该题运用了 vue 的知识，实现了用户输入关键字，通过双向数据绑定从而实现模糊查询。我们可以使用 filter() 方法，对数组进行过滤（它并不会改变原始数组）。然后通过 includes() 方法匹配要查的数据是否在数组里。
数组常用方法参考链接
字符串常用方法参考链接
filteredList() { return this.postList.filter(item => { return item.title.includes(this.search) }) }
8.卡片化标签页⭐⭐⭐⭐
解决方案：该题目，通过点击上方标签，实现下方内容也相应改变的联动。
获取到所有上面的按钮（div） 和 下面的内容（div）
对按钮遍历，给按钮绑定点击事件，点击按钮，先把所有的样式去掉，然后给当前被点击的按钮设置样式。
设置 btns 索引，给下面呈现的内容使用
获取到自定义的 index
通过对下面的 div 进行遍历，同样先把所有的样式去掉，然后给当前呈现的内容设置样式。
注意：
- 绑定样式：className
- 点击的是谁，就给谁设置索引，供被动改变的使用
- 定义：btns[i].setAttribute('index',i)
- 获取：var index = this.getAttribute('index'
)
像这种联动的问题，需要通过给主动方设置索引，然后供被动方获取并使用，从而达到目标
function init() { var btns = document.querySelectorAll('.tabs div') var divs = document.querySelectorAll('#content div') for(var i=0;i<btns.length;i++){ btns[i].setAttribute('index',i) btns[i].onclick = function(){ for(var i=0;i<btns.length;i++){ btns[i].className = '' } this.className = 'active' var index = this.getAttribute('index') for(var i=0;i<divs.length;i++){ divs[i].className = '' } divs[index].className = 'active' } } }
9.时间管理大师⭐⭐⭐⭐⭐
解题方案：该题目主要考察vue的基本知识。逻辑要清晰，一步一步的实现功能。
一、实现添加功能
在 data 中初始化数组 todos:[]，里面存放输入的数据。
在 data 中初始化用户输入的内容 content = ''，并在输入框进行双向数据绑定 v-model="content"
在 methods 里创建 addTodo 方法，用于添加计划内容。当用户输入为空时，提示不能为空，当不为空时，通过 push() 方法把数据存入 todos 数组。并把文本框设置为空。
给确认按钮绑定点击事件，@click='addTodo'。
删除多余的<li></li>，对呈现内容的 <li></li> 进行 v-for 渲染，通过插值语法 {{}} 把数据呈
现在相应位置。
二、实现对任意行的删除功能
在 methods 里创建 deleteTodo(index){} 方法，通过 this.todos.splice(index，1) 实现对当前索引内容的删除。
在删除按钮上绑定点击事件，@click = "deleteTodo"
三、实现清除所有内容
在 methods 里创建 clearAll() 方法，通过 this.todos = [] 实现对数据的清空。
在清空按钮上绑定点击事件，@click = "clearAll"
四、隐藏
通过 v-if 条件渲染，在暂无数据的 <li> 上添加判断 v-if="todos.length==0"，即当数组的长度为 0 时，呈现。
在总数和清除的 <li> 上添加 v-if="todos.length >0 "，即当数组长度大于 0 时，呈现。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>任务管理器</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head> <body> <div id="box"> <div class="head"> <h2>Todos</h2> <p>罗列日常计划，做一个时间管理大师！</p> <div class="input"> <span>内容</span> <input type="text" placeholder="请输入你要做的事" v-model="content"/> <span id='add' @click="addTodo">确认</span> </div> </div> <ul class="list"> <li v-if="todos.length==0"> 暂无数据 </li> <li v-for="(todo,index) in todos"> <!-- 前面的序号 --> <span class="xh">{{index+1}}</span> <!-- 列表内容 --> <span>{{todo}}</span> <!-- 删除按钮 --> <span class="qc" @click="deleteTodo"></span> </li> <li v-if="todos.length >0 "> <b> 总数：{{todos.length}} </b> <b id='clear' @click="clearAll">清除</b> </li> </ul> </div> <script src="js/vue.js"></script> <script> var top= new Vue({ el:"#box", // 在此处补全代码，实现所需功能 data:{ todos:[], content:'' }, methods:{ addTodo(){ if(!this.content.trim()){ alert('内容不能为空') }else{ this.todos.push(this.content) this.content = '' } }, deleteTodo(index){ this.todos.splice(index,1) }, clearAll(){ this.todos = [] } } }) </script> </body> </html>
总结
功能实现的难点在于如何利用所学知识，实现相应功能。第一次做可能做不出来，但要注意培养这方面的处理能力，对于典型的例子进行 深度钻研 和 理解。
不积跬步无以至千里🌕 ，不积小流无以成江海🌊。
道阻且长，一起加油，与君共勉！😉
不积跬步无以至千里 不积小流无以成江海
