0
0

第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组And职业组

1、创意广告牌 代码：

  1. .billboard {
  2.   position: relative;
  3.   background-color: #8e6534;
  4.   color: #fff;
  5.   padding: 20px;
  6.   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  7.   background-size: cover;
  8.   border-radius: 10px; /* 设置圆角为 10px */
  9.   background-image: url('../images/woodiness.jpg'); /* 设置背景图片为 woodiness.jpg */
  10. }
  12. .top-sign {
  13.   position: relative;
  14.   width: 200px;
  15.   height: 100px;
  16.   background-color: #a87f4a;
  17.   display: flex;
  18.   justify-content: center;
  19.   align-items: center;
  20.   font-size: 1rem;
  21.   border-top-left-radius: 15px; /* 设置上左角为圆角 15px */
  22.   border-top-right-radius: 15px; /* 设置上右角为圆角 15px */
  23.   transform: skewX(-20deg); /* 在 x 轴方向倾斜元素 20度 */
  24. }

2、原子化CSS 的代码

直接在css下面加个flex弹性布局的操作，然后竖着。

  1. /* TODO: 实现原子化 flex */
  2. div {
  3.   display: flex;
  4.   flex-direction: column;
  5. }

3、神秘咒语

简单的token操作，axios知识点，请求的时候在请求头带上token，就可以顺利请求访问到。

  1. // TODO：新增或者修改以下代码
  2. let token = '2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7';
  3. key1Button.addEventListener('click', async () => {
  4.     // 从后台请求钥匙1的咒语部分
  5.     key1Button.disabled = true;
  6.     let {data} =  await axios.get('/spellone', {headers: {'Authorization': token}})
  7.     spell1.innerHTML = data;
  8.     tryOpenTreasureBox();
  9. });
  11. key2Button.addEventListener('click', async () => {
  12.     // 从后台请求钥匙2的咒语部分
  13.     key2Button.disabled = true;
  14.     let {data} =  await axios.get('/spelltwo', {headers: {'Authorization': token}})
  15.     spell2.innerHTML = data;
  16.     tryOpenTreasureBox();
  17. });

4、朋友圈 代码：

防抖考了，会不会在真题的时候考节流。。。

JS练习题

  1. document.addEventListener("DOMContentLoaded", function() {
  2.   let textContent = localStorage.getItem('savedText');
  3.   document.getElementById('text').value = textContent;
  4.   show()
  5. });
  7. document.getElementById("text").addEventListener(
  8.   "input",
  9.   debounce(function() {
  10.     document.getElementById("prompt").textContent = "正在保存中...";
  11.     let textContent = document.getElementById('text').value;
  13.     localStorage.setItem('savedText', textContent);
  15.     show()
  16.     setTimeout(function() {
  17.       document.getElementById("prompt").textContent = "内容已保存";
  18.     }, 750);
  19.   }, 200)
  20. );
  22. document.getElementById("post").addEventListener("click", function() {
  23.   const content = document.getElementById("text").value;
  24.   // 假设 createContent 是一个已定义的函数，用于创建表示内容的DOM元素
  25.   const element = createContent(content);
  26.   document.querySelector(".contents").appendChild(element);
  27.   document.getElementById("prompt").textContent = "发表成功！";
  28.   document.getElementById("text").value = '';
  29.   localStorage.removeItem('savedText');
  30.   show()
  31. });
  33. // 防抖工具函数
  34. /**
  35.  * @param  {function} fn  - 回调函数
  36.  * @param  {string} delay - 函数执行延迟，单位为ms
  37.  */
  38. function debounce(fn, delay) {
  39.   // return fn; // 这一行是为了确保页面正常运行，可以去掉
  40.   let timer = null;
  41.   return function () {
  42.     if (timer) {
  43.       clearTimeout(timer);
  44.     }
  45.     timer = setTimeout(() => {
  46.       fn();
  47.     }, delay);
  48.   }
  50.   // TODO: 请实现函数防抖的功能
  51. }
  53. function show(){
  55.   if (document.getElementById("text").value !== '') {
  56.     document.getElementById("post").removeAttribute('disabled');
  57.   } else {
  58.     document.getElementById("post").setAttribute('disabled', 'disabled');
  59.   }
  60. }
  62. // 用户点击“发表”后，创建一条新信息的DOM元素
  63. function createContent(content) {
  64.   const div = document.createElement("div");
  65.   const d = new Date();
  66.   const deleteBtn = document.createElement("button");
  67.   deleteBtn.textContent = "删除";
  68.   deleteBtn.addEventListener("click", function() {
  69.     div.remove();
  70.   });
  71.   div.innerHTML = `<div><span class="content">${content}</span><span class="date">${d.toLocaleString()}</span></div>`;
  72.   div.appendChild(deleteBtn);
  73.   return div;
  74. }

5、美食蛋白质揭秘 代码：

JS原生ajax请求 ）xhr = new XMLHttpRequest();

open("请求方式","请求路径“)；

用onload加载一次就行了，补充一个就是

  • onreadystatechange
  • 当 readyState 属性发生变化时，调用的事件处理器。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>不同食物的蛋白质占比</title>
  7.     <script src="./lib/vue3.global.js"></script>
  8.     <script src="./lib/echarts.min.js"></script>
  9.     <link rel="stylesheet" href="css/style.css" />
  10.   </head>
  11.   <body>
  12.     <div id="app">
  13.       <h2>不同食物的蛋白质占比</h2>
  14.       <div class="protein-container">
  15.         <!-- TODO:待补充代码，渲染获取的数据 -->
  16.       </div>
  17.       <div class="echarts" id="main"></div>
  18.     </div>
  19.     <script>
  20.       const { ref, onMounted } = Vue;
  21.       const MockURL = "./mock/data.json";
  22.       const app = {
  23.         setup() {
  24.           function echartsInit(data) {
  25.             const main = document.getElementById("main");
  26.             const myChart = echarts.init(main);
  27.             myChart.setOption({
  28.               legend: {
  29.                 data: data,
  30.                 orient: "vertical",
  31.                 top: "26%",
  32.                 right: "2%",
  33.                 icon: "circle",
  34.                 textStyle: {
  35.                   fontSize: 20,
  36.                   rich: {
  37.                     one: {
  38.                       width: 80,
  39.                     },
  40.                     two: {
  41.                       width: 80,
  42.                     },
  43.                     three: {
  44.                       width: 80,
  45.                     },
  46.                   },
  47.                 },
  48.                 formatter: (name) => {
  49.                   var total = 0;
  50.                   var target;
  51.                   let formateData = data;
  52.                   for (var i = 0; i < formateData.length; i++) {
  53.                     if (formateData[i].value) {
  54.                       total += formateData[i].value;
  55.                       if (formateData[i].name === name) {
  56.                         target = formateData[i].value;
  57.                       }
  58.                     }
  59.                   }
  60.                   var v = ((target / total) * 100).toFixed(2);
  61.                   let row;
  62.                   if (name === "表头") row = `食物      含量       占比`;
  63.                   else row = `{one|${name}} {two|${target}} {three|${v}%}`;
  64.                   return row;
  65.                 },
  66.               },
  67.               color: ["#baf", "#bfa", "#cde", "#f90", "#0c9"],
  68.               series: [
  69.                 {
  70.                   type: "pie",
  71.                   radius: ["30%", "50%"],
  72.                   center: ["32%", "40%"],
  73.                   data: data,
  74.                 },
  75.               ],
  76.             });
  77.           }
  79.           async function fetchData() {
  80.             // TODO:待补充代码
  81.             let FoodArray = [];
  82.             let xhr = new XMLHttpRequest();
  84.             xhr.open("GET", MockURL);
  86.             xhr.onload = function () {
  87.               if (this.status == 200) {
  88.                 FoodArray = JSON.parse(this.responseText); //这个需要转换一下 因为是JSON格式转换为js对象
  89.                 let NewFoodArray = [
  90.                     { name: "表头", icon: "none" },
  91.                 ]
  92.                 for (const item of FoodArray) {
  93.                     NewFoodArray.push(item)
  94.                 }
  95.                 // console.log(NewFoodArray);
  96.                 echartsInit(NewFoodArray) //直接在里面调用就行了
  97.                 for (const item of FoodArray) {
  98.                   let div = document.createElement("div");
  99.                   div.innerHTML = `${item.name} ${item.value}`;
  100.                   div.className= 'protein-item'
  101.                   let content =
  102.                   document.getElementsByClassName("protein-container")[0];
  103.                   content.appendChild(div);
  104.                 }
  105.               } else {
  106.                 console.log("请求失败：" + this.status);
  107.               }
  108.             };
  109.             xhr.send();
  110.           }
  111.           fetchData();
  112.           return {
  113.             echartsInit,
  114.           };
  115.         },
  116.       };
  117.       const vm = Vue.createApp(app);
  118.       const mountedApp = vm.mount("#app");
  119.     </script>
  120.   </body>
  121. </html>

6、营业状态切换

其实就是 自定义一个东西 只不过这里的返回是需要对应上，要记得；

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>营业状态切换</title>
  6.     <script src="./lib/vue.global.js"></script>
  7.     <!-- 引入Vue.js库 -->
  8.     <link rel="stylesheet" href="./css/style.css" />
  9.     <!-- 引入样式表 -->
  10.   </head>
  12.   <body>
  13.     <div id="app">
  14.       <div class="header">
  15.         <h1>营业状态切换</h1>
  16.         <!-- 页面标题 -->
  17.       </div>
  18.       <!-- 显示店铺状态 -->
  19.       <p>当前店铺状况: {{ isWorking ? '营业中' : '已打烊' }}</p>
  20.       <!-- 根据状态显示相应的图片 -->
  21.       <img :src="isWorking ? workImage : restImage" alt="Status Image" />
  22.       <!-- 切换店铺状态的开关按钮 -->
  23.       <div
  24.         class="switch"
  25.         @click="toggleWorking"
  26.         :class="{ 'switch-on': isWorking }"
  27.       >
  28.         <span class="switch-inner"></span>
  29.       </div>
  30.     </div>
  31.     <script setup>
  32.       const { ref } = Vue; // 引入Vue中的ref函数
  34.       function useToggle(state) {
  35.         // TODO:待补充代码
  36.         let s1 = ref(state);
  37.         function s2() {
  38.           //调用这里的函数 返回 isWorking 为true 就得到workImage
  39.           s1.value = !s1.value;
  40.         }
  42.         return [s1, s2]; //如果报错 那么就是返回值的问题了
  43.       }
  45.       const app = Vue.createApp({
  46.         setup() {
  47.           const [isWorking, toggleWorking] = useToggle(false); // 使用自定义的useToggle函数创建状态和切换函数
  48.           const workImage = "./images/open.jpg"; // 营业状态的图片路径
  49.           const restImage = "./images/close.jpg"; // 打烊状态的图片路径
  50.           return {
  51.             isWorking,
  52.             toggleWorking,
  53.             workImage,
  54.             restImage,
  55.           };
  56.         },
  57.       });
  59.       app.mount("#app"); // 将Vue应用挂载到id为app的元素上
  60.     </script>
  61.   </body>
  62. </html>

7、嘟嘟购物 ：

这里就是vue3的练习，职业组的一道题，大学组的是一道node题。

就是Pinia和vue3。WatchEffect监听 只要里面的响应式发生变化就会调用一次，还有在页面开始也会调用一次，至于Pinia，直接调用就行了，这里是非工程文件，已经有script引入了Pinia

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="./css/element-plus@2.3.7/index.css" />
  7.     <link rel="stylesheet" href="./css/index.css" />
  8.     <script src="./lib/vue.min.js"></script>
  9.     <script src="./css/element-plus@2.3.7/index.full.js"></script>
  10.     <script src="./lib/axios.js"></script>
  11.     <script src="./lib/vueDemi.js"></script>
  12.     <script src="./lib/pinia.min.js"></script>
  13.     <script src="./js/store.js"></script>
  14.     <title>嘟嘟购物</title>
  15.   </head>
  16.   <body>
  17.     <div id="app">
  18.       <div class="c-container">
  19.         <div class="w">
  20.           <div class="cart-filter-bar">
  21.             <em>全部商品</em>
  22.           </div>
  23.           <!-- 购物车主要核心区域 -->
  24.           <div class="cart-warp">
  25.             <div class="cart-thead">
  26.               <div class="t-checkbox"></div>
  27.               <div class="t-goods">商品</div>
  28.               <div class="t-price">单价</div>
  29.               <div class="t-num">数量</div>
  30.               <div class="t-sum">小计</div>
  31.               <div class="t-action">操作</div>
  32.             </div>
  33.             <!-- 商品详细模块 -->
  34.             <div class="cart-item-list">
  35.               <div
  36.                 class="cart-item check-cart-item"
  37.                 v-for="(item,index) in goodsArray"
  38.                 :key="item.id"
  39.               >
  40.                 <div class="p-checkbox">
  41.                   <input
  42.                     type="checkbox"
  43.                     name=""
  44.                     id=""
  45.                     class="j-checkbox"
  46.                     @change="updateCheckedState($event,index)"
  47.                   />
  48.                 </div>
  49.                 <div class="p-goods">
  50.                   <div class="p-img">
  51.                     <img :src="item.image" alt="" />
  52.                   </div>
  53.                   <div class="p-msg">{{item.name}}</div>
  54.                 </div>
  55.                 <div class="p-price">{{item.price}}</div>
  56.                 <div class="p-num">
  57.                   <div class="quantity-form">
  58.                     <a
  59.                       href="javascript:;"
  60.                       class="decrement"
  61.                       @click="decrement(index)"
  62.                       >-</a
  63.                     >
  64.                     <input type="text" class="itxt" :value="item.priceCount" />
  65.                     <a href="javascript:;" class="increment" @click="add(index)"
  66.                       >+</a
  67.                     >
  68.                   </div>
  69.                 </div>
  70.                 <div class="p-sum">
  71.                   {{(item.price * item.priceCount).toFixed(2)}}
  72.                 </div>
  73.                 <div class="p-action"><a href="javascript:;">删除</a></div>
  74.               </div>
  75.             </div>
  76.             <!-- 结算模块 -->
  77.             <div class="cart-floatbar">
  78.               <div class="select-all"></div>
  79.               <div class="toolbar-right">
  80.                 <div class="amount-sum">
  81.                   已经选<em>{{ selectdItemCount }}</em>件商品
  82.                 </div>
  83.                 <div class="price-sum">
  84.                   总价： <em>￥{{ totalItemPrice }}</em>
  85.                 </div>
  86.                 <div class="btn-area" @click="submit">去结算</div>
  87.               </div>
  88.             </div>
  89.           </div>
  90.         </div>
  91.       </div>
  92.     </div>
  93.   </body>
  94.   <script type="module">
  95.     const { createApp, onMounted, watchEffect } = Vue;
  96.     const { createPinia } = Pinia;
  97.     const { ElMessage, ElNotification } = ElementPlus;
  98.     const app = Vue.createApp({
  99.       setup() {
  100.         // TODO:补充代码，实现目标效果
  101.         const goodsStock = Array.from(useGoodsStore().store);
  102.         const goodId = [];
  103.         const goodsArray = ref([]);
  104.         const priceCount = ref(1);
  105.         for (const item of goodsStock) {
  106.           //这个是判断有没有货的操作
  107.           if (item.stock !== 0) {
  108.             goodId.push(item.id);
  109.           } else {
  110.             goodId.push(-1);
  111.           }
  112.         }
  114.         const getGoods = () => {
  115.           axios.get("./js/goods.json").then((res) => {
  116.             const tempArray = [];
  117.             // console.log(goodId); //有货的id 没货的id为 -1
  118.             for (let i = 0; i < res.data.length; i++) {
  119.               if (res.data[i].id === goodId[i]) {
  120.                 tempArray.push(res.data[i]);
  121.               }
  122.             }
  123.             goodsArray.value = tempArray;
  124.             for (const item of goodsArray.value) {
  125.               item.priceCount = 1; //默认为1
  126.               item.checked = false; //checked按钮默认为false
  127.             }
  128.             
  129.             console.log(goodsArray.value);
  130.           });
  131.         };
  133.         const add = (index) => {
  134.           goodsArray.value[index].priceCount++;
  135.         };
  136.         const decrement = (index) => {
  137.           if (goodsArray.value[index].priceCount === 1) {
  138.             return;
  139.           }
  140.           goodsArray.value[index].priceCount--;
  141.         };
  143.         const updateCheckedState = (event, index) => {
  144.           //给到响应式数组里面
  145.           goodsArray.value[index].checked = event.target.checked;
  146.         };
  148.         const selectdItemCount = ref(0);
  149.         const totalItemPrice = ref(0);
  150.         watchEffect(() => {
  151.           //就是这里面的响应式发生变化 就会触发watchEffect()
  152.           selectdItemCount.value = 0;
  153.           totalItemPrice.value = 0;
  154.           for (const item of goodsArray.value) {
  155.             if (item.checked === true) {
  156.               selectdItemCount.value += item.priceCount;
  157.               totalItemPrice.value += item.priceCount * item.price;
  158.             }
  159.           }
  160.           totalItemPrice.value = totalItemPrice.value.toFixed(2);
  161.         });
  163.         //若没有选择商品
  164.         const shopNoSelect = () => {
  165.           for (const item of goodsArray.value) {
  166.             if (item.checked === true) {
  167.               return true;
  168.             }
  169.           }
  170.           return false; //如果没有一个true就返回false
  171.         };
  173.         const submit = async () => {
  174.           //提交结算
  175.           try {
  176.             if (!shopNoSelect()) {
  177.               //则提示警告信息:
  178.               ElMessage({
  179.                 message: "请至少选择一件商品",
  180.                 type: "warning",
  181.               });
  182.             }
  183.             for (const item of goodsArray.value) {
  184.               console.log(item.priceCount);
  185.               if (item.checked === true) {
  186.                 let goodsNamePriceCount = await useGoodsStore().fetchInventory(
  187.                   item.name
  188.                 );
  189.                 console.log(goodsNamePriceCount);
  191.                 if (item.priceCount > goodsNamePriceCount) {
  192.                   ElMessage.error(`结算失败，${item.name}库存不足`);
  193.                   return;
  194.                 }
  195.               }
  196.             }
  197.             ElMessage({
  198.               message: "结算成功",
  199.               type: "success",
  200.             });
  201.           } catch (error) {
  202.             ElMessage.error(`结算失败，${请求返回的错误信息}`);
  203.           }
  204.         };
  206.         onMounted(() => {
  207.           //页面渲染之后，直接调用
  208.           getGoods(); //调用
  209.         });
  210.         return {
  211.           //在这个非工程文件当中的vue3 都是需要return一下的
  212.           goodsArray,
  213.           priceCount,
  214.           add,
  215.           decrement,
  216.           selectdItemCount,
  217.           totalItemPrice,
  218.           updateCheckedState,
  219.           submit,
  220.         };
  221.         // TODOEnd
  222.       },
  223.     });
  224.     app.use(ElementPlus);
  225.     app.use(createPinia());
  226.     app.mount("#app");
  227.   </script>
  228. </html>

8、冰岛人：

我这种方法是比较简单的 其实还可以用map集合或者 递归 他这里说五代人 并不包含第五代人。

  1. /**
  2.  * @description 通过输入的两个人的姓名返回相应的字符串
  3.  * @param {array} data 当地的人口信息
  4.  * @param {string} name1 要查询的两人名字之一
  5.  * @param {string} name2 要查询的两人名字之一
  6.  * @return {string} 根据被查询两人的名字返回对应的字符串
  7.  * */
  8. function marry(data, name1, name2) {
  9.   // TODO:补充代码，实现目标效果
  10.   console.log(data); //和NameAll是对应的
  11.   let data2 = deepCopy(data);
  12.   console.log(data2);
  14.   const NameAll = [];
  15.   for (let i = 0; i < data2.length; i++) {
  16.     NameAll.push(`${data2[i].givenName} ${removeSuffix(data2[i].familyName)}`);
  17.   }
  19.   console.log(NameAll); // 和data是对应，就是去掉了后面的尾缀
  20.   //查询其中一人是否在名单中
  21.   const person1 = NameAll.findIndex((name) => name == name1);
  22.   const person2 = NameAll.findIndex((name) => name == name2);
  23.   console.log(person1);
  24.   console.log(person2);
  25.   if (person1 == -1 || person2 == -1) {
  26.     return "NA";
  27.   }
  28.   //直接判断性别
  29.   const gender1 = getGender(data2[person1].familyName);
  30.   const gender2 = getGender(data2[person2].familyName);
  31.   if (gender1 === gender2) {
  32.     return "Whatever";
  33.   }
  35.   let nameObj1 = data2[person1];
  36.   let nameObj2 = data2[person2];
  37.   //前面的代码都已经拦截完毕了，现在开始直接进入查找就行了
  39.   //april mikesdottir 和 steve billsson 是no
  40.   //april mike 和 steve bill 是 no
  41.   if (hasCommonAncestor(data2, nameObj1, nameObj2)) {
  42.     return "No";
  43.   } else {
  44.     return "Yes";
  45.   }
  46. }
  48. //深拷贝
  49. function deepCopy(obj) {
  50.   if (typeof obj !== 'object' || obj === null) {
  51.     return obj;
  52.   }
  53.   
  54.   let copy = Array.isArray(obj) ? [] : {};
  55.   
  56.   for (let key in obj) {
  57.     if (Object.prototype.hasOwnProperty.call(obj, key)) {
  58.       copy[key] = deepCopy(obj[key]);
  59.     }
  60.   }
  61.   
  62.   return copy;
  63. }
  65. function hasCommonAncestor(data, name1, name2) {
  66.   const ancestors1 = computeAncestors(data, name1);
  67.   const ancestors2 = computeAncestors(data, name2);
  69.   if (ancestors1 == ancestors2) {
  70.     return true;
  71.   }
  72.   return false;
  73. }
  74. //找到最后的祖先
  75. function computeAncestors(data, name) {
  76.   //先切割掉 sson和sdottir 不要割掉 m 和 f 知道是祖宗
  77.   for (let i = 0; i < data.length; i++) {
  78.     data[i].familyName = removeSuffix2(data[i].familyName);
  79.   }
  81.   let ancestor = null; //设置祖先变量
  83. // console.log(name.familyName == data[7].givenName);
  85.   for (let i = 0; i < data.length; i++) {
  86.     if (data[i].givenName == name.familyName) {
  87.       if (data[i].familyName.charAt(data[i].familyName.length - 1) == 'm') {
  88.         ancestor = data[i].givenName;
  89.         break;
  90.       }
  91.       for (let j = 0; j < data.length; j++) {
  92.         if (data[j].givenName == data[i].familyName) {
  93.           if (data[j].familyName.charAt(data[j].familyName.length - 1) == 'm') {
  94.             ancestor = data[j].givenName;
  95.             break;
  96.           }
  97.           for (let k = 0; k < data.length; k++) {
  98.             if (data[k].givenName == data[j].familyName) {
  99.                   ancestor = data[k].givenName;
  100.             }
  101.           }
  102.         }
  103.       }
  104.     }
  105.   }
  106.   console.log(ancestor);
  107.   return ancestor
  108. }
  110. //递归
  112. /**
  113.  * 查询冰岛人名的性别的函数
  114.  * @param {String} name 传递进来的冰岛人名
  115.  * @return {String} 返回男是 male 女的是female
  116.  */
  117. function getGender(name) {
  118.   if (name.endsWith("sson") || name.endsWith("m")) {
  119.     return "male"; //男
  120.   } else if (name.endsWith("sdottir") || name.endsWith("f")) {
  121.     return "female"; //女
  122.   }
  123. }
  124. // 使用正则表达式匹配字符串结尾的 'sson'、'sdottir'、'm' 或 'f' 并替换为 ''
  125. function removeSuffix(name) {
  126.   return name.replace(/(sson|sdottir|m|f)$/, "");
  127. }
  128. // 使用正则表达式匹配字符串结尾的 'sson'、'sdottir'并替换为 ''
  129. function removeSuffix2(name) {
  130.   return name.replace(/(sson|sdottir)$/, "");
  131. }
  133. module.exports = marry;

9、这是一个“浏览器”

也是纯粹的JS题，功能是实现了，但是不知为啥过不了检测。

  1. "use strict";
  2. class Tab {
  3.   // 构造方法
  4.   constructor(id) {
  5.     // 获取元素
  6.     this.main = document.querySelector(id);
  7.     this.add = this.main.querySelector(".tabadd");
  8.     this.ul = this.main.querySelector(".fisrstnav ul");
  9.     this.fsection = this.main.querySelector(".tabscon"); //content页面
  10.     this.init();
  11.   }
  12.   // 初始化
  13.   init() {
  14.     this.updateNode();
  15.     // init初始化操作让相关元素绑定事件
  16.     
  17.     this.add.onclick = this.addTab.bind(this.add, this);
  18.     for (var i = 0; i < this.lis.length; i++) {
  19.       this.lis[i].index = i;
  20.       this.lis[i].onclick = this.toggleTab.bind(this.lis[i], this);
  21.       this.remove[i].onclick = this.removeTab.bind(this.remove[i], this);
  22.       this.spans[i].ondblclick = this.editTab;
  23.       this.sections[i].ondblclick = this.editTab;
  24.     }
  25.   }
  26.   // 更新所有的li和section
  27.   updateNode() {
  28.     this.lis = this.main.querySelectorAll("li");
  29.     this.remove = this.main.querySelectorAll(".icon-guanbi");
  30.     this.sections = this.main.querySelectorAll("section");
  31.     this.spans = this.main.querySelectorAll(".content");
  32.   }
  33.   // 1.切换功能
  34.   toggleTab(event) {
  35.     // TODO: 添加代码，点击标签页，切换到对应标签页的功能
  36.     var num = this.getAttribute("num");
  37.     if (num != null && !(this.classList.contains("liactive"))) return; //阻止冒泡
  38.     event.clearClass(); //this.clearClass不行 因为指向的是元素
  39.     this.className = 'liactive'
  40.     event.sections[this.index].className = 'conactive'
  41.       // TODO结束
  42.   }
  43.   // 2.清空所有标签页及其内容页类名
  44.   clearClass() {
  45.     for (var i = 0; i < this.lis.length; i++) {
  46.       this.lis[i].className = "";
  47.       this.sections[i].className = "";
  48.     }
  49.   }
  50.   // 3.添加标签页
  51.   addTab(event) {
  52.     // TODO：添加代码，当点击加号，添加新的标签页（对应的内容页也应一并添加）
  53.     event.clearClass(); //清除一下
  54.     let newTab = document.createElement('li');
  55.     let lengthTab = event.lis.length + 1
  56.     newTab.className = 'liactive'
  57.     newTab.innerHTML = `<span class="content">标签页${lengthTab}</span>
  58.     <span class="iconfont icon-guanbi">
  59.         <span class="glyphicon glyphicon-remove">
  60.         </span>
  61.     </span>`
  62.     event.ul.appendChild(newTab);
  63.     //添加section内容
  64.     let newTabScon = document.createElement('section');
  65.     newTabScon.className = 'conactive';
  66.     newTabScon.innerHTML = `标签页${lengthTab}的内容`;
  67.     event.fsection.appendChild(newTabScon);
  68.     event.updateNode(); //需要更新一下节点
  69.     event.init();
  70.     // TODO结束
  71.   }
  72.   // 4.删除功能
  73. removeTab(event) {
  74.   let index = Array.from(event.remove).indexOf(this); // 获取点击的删除按钮在数组中的索引
  75.   var lis = document.getElementsByTagName("li");
  77.   for (let index = 0; index < lis.length; index++) {
  78.     if (lis[index] == this.parentElement) {
  79.         this.parentElement.setAttribute('num', index);
  80.     }
  81. }
  83.   if (event.lis[index].classList.contains('liactive')) { // 如果要删除的标签页是当前选中的标签页
  84.       if (index < event.lis.length - 1) { // 不是最后一个标签页
  85.           event.lis[index + 1].click(); // 选中临近的下一个标签页
  86.       } else if (index > 0) { // 是最后一个标签页
  87.           event.lis[index - 1].click(); // 选中临近的上一个标签页
  88.       }
  89.   }
  91.   event.ul.removeChild(event.lis[index]); // 从页面中删除对应的标签页
  92.   event.fsection.removeChild(event.sections[index]); // 从页面中删除对应的内容页
  93.   event.updateNode(); // 更新节点
  94. }
  96.   // 5.修改功能
  97.   editTab() {
  98.     var str = this.innerHTML;
  99.     window.getSelection
  100.       ? window.getSelection().removeAllRanges()
  101.       : document.Selection.empty();
  102.     this.innerHTML = '<input type="text" />';
  103.     var input = this.children[0];
  104.     input.value = str;
  105.     input.select(); //让文本框里的文字处于选定状态
  106.     // TODO：实现双击修改内容，当文本框失焦时，把修改的值赋给被双击的对象，并作上已修改的标记
  107.     let li = this;
  108.     input.onblur = function () {
  109.       li.innerHTML = this.value
  110.     }
  111.     // TODO结束
  112.   }
  113. }
  114. var tab = new Tab("#tab");
标签： 前端 蓝桥杯 javascript
本文转载自: https://blog.csdn.net/m0_56646930/article/details/136558163
版权归原作者 Stolen 遗憾 所有， 如有侵权，请联系我们删除。
登录后发布评论

“第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组And职业组”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。