文章目錄

• 藍橋杯模擬賽第二場（web）
• • 1 卡片化標簽頁
  • 2 隨機數(shù)生成器
  • 3 個人博客
  • 4 學(xué)生成績統(tǒng)計
  • 5 水果擺盤
  • 6 給頁面化個妝
  • 7 小兔子爬樓梯
  • 8 時間管理大師
  • 9 購物車
  • 10 菜單樹檢索

藍橋杯模擬賽第二場（web）

1 卡片化標簽頁

題目：卡片化標簽頁
題目介紹：
選項卡功能在前端開發(fā)中特別常見，作為設(shè)置選項的模塊，每個選項卡代表一個活動的區(qū)域，點擊不同的區(qū)域，即可展現(xiàn)不同的內(nèi)容，這樣既能節(jié)約頁面的空間又能提升頁面性能。
本題需要在已提供的基礎(chǔ)項目中使用JS完成選項卡功能的編碼，最終實現(xiàn)切換選項卡可以顯示對應(yīng)內(nèi)容的效果。
目標：實現(xiàn)選項卡功能，如下圖所示。

代碼實現(xiàn)。如下所示
需要注意的是，for中的let不可省，因為let是塊級作用域，如果省略就會變成全局作用域，出現(xiàn)bug。塊級作用域與全局作用域的區(qū)別可以參考這篇文章。參考文章

var tabs = document.querySelector('.tabs').querySelectorAll('div')var contents = document.querySelector('#content').querySelectorAll('div')for(let i=0;i<tabs.length;i++){tabs[i].onclick = function(){for(let a=0;a<tabs.length;a++){tabs[a].classList.remove('active')contents[a].classList.remove('active')}tabs[i].classList.add('active')contents[i].classList.add('active')}}

2 隨機數(shù)生成器

題目：隨機數(shù)生成器
題目介紹：
實際工作中隨機數(shù)的使用特別多，比如隨機抽獎、隨機翻牌。通過隨機數(shù)還能實現(xiàn)很多有趣的效果，比如隨機改變元素的位置或顏色。
本題需要在已提供的基礎(chǔ)項目中使用JS知識封裝一個函數(shù)，該函數(shù)可以根據(jù)需要，生成指定范圍和個數(shù)的不重復(fù)的隨機數(shù)數(shù)組。
題目目標：生成隨機數(shù)。但是要注意，題目要求隨機數(shù)不可重復(fù)。

具體代碼如下所示

const getRandomNum = function (min, max, countNum) {var arr = [];var num = 0for (i = 0; i < countNum; i++) {num = parseInt(Math.random() * (max-min)) + min// console.log(num);if (arr.length == 0) {arr.push(num)}else {for (j = 0; j < arr.length; j++) {if (num == arr[j]) {i--// console.log('有重復(fù)');break}else if (j == arr.length - 1) {arr.push(num)break}}// console.log(arr);}}return arr; };

3 個人博客

題目：個人博客
題目介紹：
很多人都有自己的博客，在博客上面用自己的方式去書寫文章，用來記錄生活，分享技術(shù)等。下面是藍橋云課的博客，但是上面還缺少一些樣式，需要大家去完善。
本題比較簡單，考察flex布局。
具體代碼如下

/* TODO:banner 上的文字 需要居中顯示 */ .home-wrapper .banner .banner-conent .hero {margin-top: 3rem;text-align: center; }/* TODO: main-wrapper 通過設(shè)置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 寬度自適應(yīng) 居左顯示 */ .main-wrapper .main-left {/* float: left; */order: 0;}/* 寬 245px 居右顯示 */ .main-wrapper .main-right > * {width: 245px;/* float: right; */order: 1; }

4 學(xué)生成績統(tǒng)計

題目：學(xué)生成績統(tǒng)計
題目介紹:
隨著大數(shù)據(jù)的發(fā)展，數(shù)據(jù)統(tǒng)計在很多應(yīng)用中顯得不可或缺,echarts 作為一款基于JavaScript 的數(shù)據(jù)可視化圖表庫，也成為了前端開發(fā)的必備技能，下面我們一起來用echarts開發(fā)一個學(xué)生數(shù)據(jù)統(tǒng)計的柱形圖。
目標：修復(fù)報錯，使圖表展示出來。
具體代碼如下所示：

// TODO:待補充修改代碼，定義x軸數(shù)據(jù),并讓數(shù)據(jù)正確顯示xAxis: {data: ["張三", "李四", "王五", "賀八", "楊七", "陳九"],},// y軸yAxis: {type: 'value',min: 0,max: 100,},

頁面效果如圖所示

5 水果擺盤

題目：水果擺盤
題目介紹:
目前CSS3中新增的Flex彈性布局已經(jīng)成為前端頁面布局的首選方式，這次試題將利用Flex實現(xiàn)經(jīng)典布局效果。
本題考查flex布局，并且提示使用align-self與order
具體代碼如下

/* 菠蘿 TODO 待補充代碼 */ .yellow {display: flex; align-self: end; order: 2; }

6 給頁面化個妝

題目：給頁面化個妝
題目介紹:
各個網(wǎng)站都擁有登錄頁面，設(shè)計一個界面美觀的登錄頁面，會給用戶帶來視覺上的享受。本題中我們要完成一個登錄頁面的布局。
目標：對頁面的css樣式進行設(shè)置，使頁面美觀如樣例一樣。
具體代碼如下所示

/*TODO：請補充代碼*/ .content{margin-left: auto;margin-right: auto;margin-top: 25px;height: 600px;width: 450px;background-color: rgba(0,0,0,.45);border-radius: 10px;position: relative;text-align: center; } .content img{width: 200px;height: 200px;border-radius: 50%;position: absolute;top: -50px;left: 125px; } .content h2{ padding-top: 150px; margin-bottom: 50px;font-size: 45px;font-weight: 800; } .content button{width: 80px;height: 30px;border-color:#041c32 ;background-color: #2d4263;font-size: 16px;color: white;margin-top: 20px;margin-right: 6px;} .content input{margin-top: 10px;font-size: 20px;border-radius: 5px;width: 300px;height: 40px;font-size: 20px;color: black;text-align: center;border-radius: 5px;border-color: rgba(0,0,0,.45); } .text{margin-top: 20px;text-align: center;} .content a{color: white !important;font-size: 16px;text-decoration: none;margin-right: 5px;margin-left: 5px;}

頁面效果如下所示

7 小兔子爬樓梯

題目：小兔子爬樓梯
題目介紹:
小兔子想去月球上旅行，假設(shè)小兔子擁有一個n階梯子，當你爬完n層就可以到達月球，小兔子每次可以跳1或者2個臺階，小兔子有多少種跳法可以到達月球呢?
解答：本題采用了遞歸思想

具體代碼如下所示

const climbStairs = (n) => {// TODO：請補充代碼if(n==0){return 0 }if(n==1){return 1}if(n==2){return 2}if(n>2){return climbStairs(n-2)+climbStairs(n-1)} }; module.exports = climbStairs;

8 時間管理大師

題目：時間管理大師
題目介紹:時間管理永遠都是提升工作和學(xué)習(xí)效率的必備法門，你在平時的工作學(xué)習(xí)中是否也有做計劃和管理計劃的習(xí)慣呢?
本題需要在已提供的基礎(chǔ)項目中使用Vue.js 知識實現(xiàn)一個簡易的任務(wù)管理器。
目標：完善一個簡易功能的todolist
完整代碼如下所示

<body><div id="box"><div class="head"><h2>Todos</h2><p>羅列日常計劃，做一個時間管理大師！</p><div class="input"><span>內(nèi)容</span><input type="text" placeholder="請輸入你要做的事" v-model="list" /><span id="add" @click="addList">確認</span></div></div><ul class="list"><li v-show="arr.length==0">暫無數(shù)據(jù)</li><li v-show="arr.length!=0" v-for="list in arr"><!-- 前面的序號 --><span class="xh">{{list.id}}</span><!-- 列表內(nèi)容 --><span>{{list.name}}</span><!-- 刪除按鈕 --><span class="qc" @click="remove(list.id)"></span></li><li><b> 總數(shù)：{{arrlength}}</b><b id="clear" @click="removeAll">清除</b></li></ul></div><script src="js/vue.js"></script><script>var top = new Vue({el: "#box",// 在此處補全代碼，實現(xiàn)所需功能data: {list:'',arr: []},computed: {arrlength() {return this.arr.length}},methods:{addList(){this.arr.push({id:this.arr.length+1,name:this.list})// console.log(1);// console.log(this.arr);},remove(id){this.arr.splice(id-1,1)console.log(this.arr);for(i=0;i<this.arr.length;i++){this.arr[i].id=i+1}},removeAll(){this.arr=[]}}});</script> </body>

9 購物車

題目：購物車
題目介紹:購物車是商城類應(yīng)用里必不可少的功能，接下來，我們將使用vue實現(xiàn)一個購物車列表。
本題考查axios發(fā)請求
具體代碼如下所示

<body><div class="container" id="app"><h4>購物車</h4><!--TODO 購物車列表 --><div v-for="item in carlist" key="item.id"><div class="box-card"><!-- 商品圖片 img --><img :src="item.img"><div><span><!-- 商品名稱 name -->{{item.name}}</span><div class="bottom clearfix"><button type="text" class="button">+</button><button type="text" class="button"><!-- 商品數(shù)量 num -->{{item.num}}</button><button type="text" class="button">-</button></div></div></div></div></div></div><!-- 引入組件庫 --><script>new Vue({el: "#app",data: {carlist: [] //購物車列表},created() {//TODO 使用axios 請求購物車列表axios.get('./carList.json').then((response)=>{this.carlist = response.data})},})</script> </body>

10 菜單樹檢索

第十題參考微信名為postbilibili大佬的代碼
具體代碼如下

//HTML頁面 <style>input {width: 200px;height: 32px;padding-left: 5px;}.active{background-color: yellow;}</style> <body><!-- 需求：輸入待查找的字段，輸出包含該字段的所有菜單數(shù)據(jù)。1、若該菜單有父級菜單，則返回其父級菜單及同胞菜單。2、若該菜單有子級菜單，則返回該菜單及其下子級菜單。3、若該菜單既無父級也無子級，則返回菜單本身即可。測試字段：查詢、首頁、管理、配置、維護 --><div id="app"><input type="text" placeholder="請輸入要搜索的菜單內(nèi)容" v-model='txt'/><ul><li v-for="(item,index) in list" :key="index"><span :class="[searchHeight(item.meta.title) ? 'active':'']">{{item.meta.title}}</span><ul v-if="item.children"><li v-for="(k,v) in item.children" :key="v"><span :class="[searchHeight(k.meta.title) ? 'active':'']">{{k.meta.title}}</span></li></ul></li></ul></div> </body> const app = new Vue({el: "#app",// 在此處補全代碼，實現(xiàn)二級菜單搜索功能data: {txt: '',dataList: []},created(){axios.get('./data.json').then((res)=>{this.dataList = res.data})},methods: {filterData(data) {return data.filter(p => p.meta.title.indexOf(this.txt)!==-1)},searchHeight(item) {return this.txt === '' ? false : item.indexOf(this.txt)!==-1 ? true : false}},computed: {list: function () {let that = thislet data = that.dataListlet arr = []arr = this.filterData(data)for (let i = 0; i < data.length; i++) {data[i]?.children?.forEach(value => {if (value.meta.title.indexOf(that.txt)!==-1) {arr = new Set([...arr, data[i]])}}, {})}console.log(arr);return arr}}});

總結(jié)

以上是生活随笔為你收集整理的蓝桥杯模拟赛第二场（web）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。