【蓝桥杯】楼赛第 31 期（Web 前端）

超爱学习芸

已于 2022-04-02 20:39:46 修改

阅读量1.2k

点赞数 1

于 2022-03-13 21:59:53 首次发布

本文链接：https://blog.csdn.net/jayusmazyyolk/article/details/123467136

版权

1.【功能实现】搜一搜呀

 return this.postList.filter(item=> 
              item.title.indexOf(this.search)!==-1
            )

2.【功能实现】折叠手风琴

$('.option').on('click', function() {
    $(this).siblings().removeClass('active')
    $(this).addClass('active')
})

3.【代码改错】关于你的欢迎语

result =`欢迎用户${subject.value}在${event2.value}学习${event1.value}课程！`;

4.【功能实现】卡片化标签页

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  var tabs = document.querySelectorAll(".tabs>div");
  var content = document.querySelectorAll("#content>div");
  for(let i = 0;i<tabs.length;i++){
    tabs[i].onclick=function() {
      for(let j = 0;j<tabs.length;j++) {
        content[j].classList.remove("active")
        tabs[j].classList.remove("active")
      }
      content[i].classList.add("active")
      tabs[i].classList.add("active")

    }
  }
}
init();

5.【页面布局】个人博客

/* TODO:banner 上的文字 需要居中显示 */
.home-wrapper .banner .banner-conent .hero {
  margin-top: 3rem;
  text-align: center;
}

/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */
.main-wrapper {
  margin: 1.5rem auto 0 auto;
  max-width: 1100px;
  padding: 0 0.9rem;
  box-sizing: border-box;
  position: relative;
  display: flex;
}

/*/* TODO 宽度自适应 居左显示 */
.main-wrapper .main-left {
  width: fit-content;
}

/* 宽 245px 居右显示 */
.main-wrapper .main-right>* {
  box-sizing: border-box;
  width: 245px;
}

6.【页面布局】水果摆盘

.yellow {
    order:1;
    align-self: flex-end;
}

7.【功能实现】新年贺卡

document.addEventListener('DOMContentLoaded', function () {
	const greetingDisplay = document.getElementById("greeting-display")
	const btn = document.getElementById("btn")
	// 点击开始书写按钮
	btn.addEventListener("click", () => {
		show(greetingDisplay)
	})
})

const greetings = [
	"新年快乐!",
	"接受我新春的祝愿,祝你平安幸福",
	"祝你新年快乐,洋洋得意!",
	"新的一年,新的开始;心的祝福,新的起点!",
	"新年好!祝新年心情好,身体好,一切顺心!",
]

// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
	// TODO 带补充代码  
	let index = Math.floor(Math.random()*5);
	// console.log(index);
	return greetings[index];
}

/*
 * @param {*} greetingDisplay  要显示内容的dom元素
 */
//  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
	// TODO 待补充代码
	greetingDisplay.innerHTML = writeGreeting();
}

module.exports = { show, writeGreeting }

8.【算法题】小兔子爬楼梯

const climbStairs = (n) => {
    if(n===2||n===3){
        return n;
    }else{
        return climbStairs(n-1)+climbStairs(n-2);
    }
 
}
module.exports = climbStairs;

9.【功能实现】购物车

<!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>购物车</title>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<link rel="stylesheet" href="./css/element-ui.css">
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<div class="container" id="app">
		<h4>购物车</h4>
		<!-- 购物车列表 -->
		<div v-for="item in carlist">
			<el-card class="box-card">
				<!-- 商品图片 -->
				<img :src="item.img">
				<div>

					<span>
						{{item.name}}<!-- 商品名称 -->
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->{{item.num}}
						</el-button>
						<el-button type="text" class="button">-</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script src="./js/element-ui.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			created() {
				// 在这里使用axios 发送请求
				axios.get('./carList.json').then(res=>{
					console.log(res);
					this.carlist = res.data;
				})
			},
		})


	</script>
</body>




</html>

超爱学习芸

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【蓝桥杯】楼赛第 31 期（Web 前端）

1.【功能实现】搜一搜呀 return this.postList.filter(item=> item.title.indexOf(this.search)!==-1 )2.【功能实现】折叠手风琴$('.option').on('click', function() { $(this).siblings().removeClass('active') $(this).addClass('active')})
复制链接

扫一扫