7. 水果摆盘 (考点 flex布局)
https://www.lanqiao.cn/problems/1767/learning/?page=1&first_category_id=2&second_category_id=11
实现目标:
提示
align-self 值 :
flex-start flex-end center baseline stretch
order:<整数>(... -1, 0 (default), 1, ..)
在需要修改部分的代码有相关提示,请仔细阅读之后,使用 flex 布局中的 align-self
和 order
完善 index.css
中的代码, 把对应的水果放在对应的盘子里面,最终效果如下:
根据提示:
/* 菠萝 TODO 待补充代码 */
.yellow {
display: flex;
align-self: flex-end;
order: 1;
}
8. 新年贺卡
https://www.lanqiao.cn/problems/1768/learning/?page=1&first_category_id=2&second_category_id=11
实现目标:
请仔细阅读需要完善代码部分的提示,之后完善 index.js
样式文件中的 TODO 部分,点击书写贺卡,卡片随机展示已经写好的祝福语:
这里会用到一个Math.random生成随机数,然后操作dom,修改他的内容
// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
// TODO 带补充代码
let i =Math.floor(Math.random()*5)
return greetings[i]
}
/*
* @param {*} greetingDisplay 要显示内容的dom元素
*/
// show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
// TODO 待补充代码
const text =writeGreeting()
greetingDisplay.innerText=text
}
Math.floor可以参考这篇文章,
Math.floor(),Math.ceil(),Math.round()三个函数的区别-CSDN博客
总结来说,floor天花板,天上,就是指向上取整,ceil地板,向下取整,round四舍五入。
10. 小兔子爬楼梯
https://www.lanqiao.cn/problems/1770/learning/?page=1&first_category_id=2&second_category_id=11
实现目标:
请完善 index.js
文件中的代码,页面显示结果如下:
不用看那么多,其实就是一个简单递归
const climbStairs = (n) => {
if(n==1){
return 1
}
else if(n==2){
return 2
}
else{
return climbStairs(n-1)+climbStairs(n-2)
}
}
module.exports = climbStairs;