<1>搜一搜呀——filter
目标
请完善 index.html 文件，让页面具有如下所示的效果：
题解
computed: {
filteredList() {
// TODO: 请补充代码
return this.postList.filter(post=>{
return post.title.match(this.search)
})
},
},过滤器filter
定义和用法
filter用于对数组进行过滤。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
语法
array.filter(function(currentValue,index,arr), thisValue) 
实例1. 对数组进行过滤，筛选出年龄大于 18岁的数据
const arr = [
{
name: 'tom1',
age: 23
},
{
name: 'tom2',
age: 42
},
{
name: 'tom3',
age: 17
},
{
name: 'tom4',
age: 13
},
]
const res = arr.filter(item => item.age > 18);
console.log(res); //[{name: 'tom1',age: 23},{name: 'tom2',age: 42}]
console.log(arr);
(2)关于你的欢迎语
目标
请修复 index.js 文件中存在的 bug，修复完成后，在表单的对应输入框中输入以下内容：
页面效果如下所示：
result = `欢迎用户${subject.value}在${event2.value}学习${event1.value}课程！`;
document.getElementById("result").value = result;(3)卡片化标签页——排他思想
目标
请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。
页面效果如下所示：
题解
// 实现选项卡功能
function init() {
// TODO 待补充代码
let tabs=document.querySelectorAll('.tabs div')
let contents=document.querySelectorAll('#content div')
console.log(contents);
for(let i=0;i<tabs.length;i++){
tabs[i].addEventListener('click',function(){
for(let j=0;j<tabs.length;j++){
tabs[j].classList.remove('active')
contents[j].classList.remove('active')
}
tabs[i].classList.add('active')
contents[i].classList.add('active')
})
}
}
init();
（4）水果摆盘
考试要求
提示
align-self 值 ：
flex-start flex-end center baseline stretch
order:<整数>(... -1, 0 (default), 1, ..)
在需要修改部分的代码有相关提示，请仔细阅读之后，使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码， 把对应的水果放在对应的盘子里面，最终效果如下
题解
/* 菠萝 TODO 待补充代码 */
.yellow {
align-self: flex-end;
order: 1;
}
（5）新年贺卡——生成随机数
目标
请仔细阅读需要完善代码部分的提示，之后完善 index.js 样式文件中的 TODO 部分，点击书写贺卡，卡片随机展示已经写好的祝福语：
题解
// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
// TODO 带补充代码
let ran = Math.floor(Math.random()*5);
console.log(ran);
return greetings[ran]
}
/*
* @param {*} greetingDisplay 要显示内容的dom元素
*/
// show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
// TODO 待补充代码
// greetingDisplay.innerHTML=greetings
greetingDisplay.innerText = writeGreeting();
}（6）让时钟转起来
测试效果
可通过如下步骤测试效果：
- 右键
01/index.html，选择Open with Live Server。 - 点击右侧的 Web 服务。
具体操作参考下图：
上述操作会在浏览器中打开新的标签页，如下图所示，请点击 01 文件夹：
之后，你将看到如下效果：
请根据下述挑战要求，通过修改 01/index.js 文件，达到让秒针转动起来的效果。
挑战需求
- 秒针的旋转方向应为顺时针。
- 秒针每次旋转的角度为
6deg，且需与当前时间对应。 - 切勿改动源代码中已写好的部分。
题解
oHoure.style.transform="rotate("+ (nowHoure * 30+houreDeg) + "deg)";
oMinute.style.transform="rotate("+ (nowMinute * 6+ minuteDeg) + "deg)";
// 请勿删除上方代码
// 请在下方补充代码，使得时钟的秒针可以转动起来
oSecond.style.transform="rotate("+ (nowSecond * 6+ minuteDeg) + "deg)";（7）由文本溢出引发的“不友好体验”
测试效果
可通过如下步骤测试效果：
- 右键
03/index.html，选择Open with Live Server。 - 点击右侧的 Web 服务。
具体操作参考下图：
上述操作会在浏览器中打开新的标签页，如下图所示，请点击 03 文件夹：
之后，你将看到如下效果：
请通过下述挑战要求，修改 03/index.html 文件，解决文本溢出的问题，最终达到如下效果：
挑战需求
请打开 03/index.html 文件，该文件中有一段代码需要你补充，用以处理文本超出溢出的情况。
- 本节挑战需使用 CSS3 的处理方式解决该问题，其他方式无效。
- 要求溢出 2 行时进行处理。
- 切勿改动源代码中已写好的部分。
题解
// 请在下方补充代码，使得文本溢出 2 行时使用省略号
let item=document.querySelector('.more2_info_name')
item.style='overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;';
// item.style.textOverflow='ellipsis'
console.log(item);