devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组_第十五届蓝桥杯(web 应用开发)模拟赛3期-大学组

作者：很楠不爱3 | 2024-03-06 20:20:16

赞

踩

第十五届蓝桥杯(web 应用开发)模拟赛3期-大学组

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.   /* TODO：待补充代码  设置圆角 10px，背景图片为woodiness.jpg  */
  9.   background-image: url(../images/woodiness.jpg);
  10.   border-radius: 10px;
  11. }
  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.   /* TODO：待补充代码   上面两个角是圆角 15px，下面两个角是直角  元素 x 轴倾斜 20度*/
  22.  border-radius: 15px 15px 0px 0px ;
  23.  transform: skewX(-20deg);
  24.  
  25. }

2原子化 CSS

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

3神秘咒语 

4. 朋友圈

  1. document.addEventListener("DOMContentLoaded", function() {
  2.   // TODO: 请在此补充页面加载时缓存检查的代码
  3.  
  4.   const savedText = localStorage.getItem('savedText');
  5.     // if (savedText!=null&&savedText!=undefined) {
  6.     //   document.getElementById('text').value = savedText;
  7.     // }
  8. });
  9.  
  10. // 当文本框输入内容改变时，动态地设置localStorage缓存，并根据有没有文本改变按钮状态
  11. // 此处使用了防抖函数，避免太过频繁地更新缓存
  12. document.getElementById("text").addEventListener(
  13.   "input",
  14.   debounce(function() {
  15.  
  16.      // 提示正在保存中
  17.      document.getElementById("prompt").textContent = "正在保存中...";
  18.      
  19.     // TODO: 请在此补充用户输入时设置缓存和调整按钮状态的代码
  20.     const text = this.value;
  21.     localStorage.setItem('savedText', text);
  22.  
  23.     // TODO-END
  24.  
  25.    
  26.     // 过一段时间后提示保存完成，模拟上传数据至后台的效果
  27.     setTimeout(function() {
  28.       document.getElementById("prompt").textContent = "内容已保存";
  29.     }, 750);
  30.   }, 200)
  31. );
  32.  
  33. document.getElementById("post").addEventListener("click", function() {
  34.   const content = document.getElementById("text").value;
  35.   const element = createContent(content);
  36.   document.querySelector(".contents").appendChild(element);
  37.   document.getElementById("prompt").textContent = "";
  38.  
  39.   // TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
  40.   // 清空输入框中的内容
  41.   document.getElementById('text').value = '';
  42.     
  43.   // 移除 localStorage 内缓存的文本数据
  44.   localStorage.removeItem('savedText');
  45.   if(!document.getElementById("text").value){
  46.     // 禁用按钮
  47.     document.getElementById("post").disabled=true
  48.   }else{
  49.     document.getElementById("post").disabled=false
  50.   }
  51. });
  52.  
  53. // 防抖工具函数
  54. /**
  55.  * @param  {function} fn  - 回调函数
  56.  * @param  {string} delay - 函数执行延迟，单位为ms
  57.  */
  58. function debounce(fn, delay) {
  59.   //return fn; // 这一行是为了确保页面正常运行，可以去掉
  60.  
  61.   // TODO: 请实现函数防抖的功能
  62.   let timeoutId;
  63.   clearTimeout(timeoutId);
  64.   timeoutId=setTimeout(()=>{
  65.     fn.apply()
  66.   },delay)
  67. }
  68.  
  69. // 用户点击“发表”后，创建一条新信息的DOM元素
  70. function createContent(content) {
  71.   const div = document.createElement("div");
  72.   const d = new Date();
  73.   const deleteBtn = document.createElement("button");
  74.   deleteBtn.textContent = "删除";
  75.   deleteBtn.addEventListener("click", function() {
  76.     div.remove();
  77.   });
  78.   div.innerHTML = `<div><span class="content">${content}</span><span class="date">${d.toLocaleString()}</span></div>`;
  79.   div.appendChild(deleteBtn);
  80.   return div;
  81. }

5. 美食蛋白质揭秘 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>不同食物的蛋白质占比</title>
  8.     <script src="./lib/vue3.global.js"></script>
  9.     <script src="./lib/echarts.min.js"></script>
  10.   <link rel="stylesheet" href="css/style.css">
  11. </head>
  12. <body>
  13.     <div id="app">
  14.         <h2>不同食物的蛋白质占比</h2>
  15.         <div class="protein-container" >
  16.             <!-- TODO:待补充代码，渲染获取的数据 -->
  17.             <div class="protein-container">
  18.                 <div class="protein-item" v-for="item in datasource">鸡胸肉 30 {{datasource.name datasource.value}}</div> 
  19.               </div>
  20.         </div>
  21.         <div class="echarts" id="main"></div>
  22.     </div>
  23.     <script>
  24.         const { ref, onMounted } = Vue;
  25.         const  MockURL =  './mock/data.json'
  26.         const app = {
  27.             setup() {
  28.                 let datasource
  29.                 function echartsInit(data) {
  30.                     const main = document.getElementById("main");
  31.                     const myChart = echarts.init(main);
  32.                     myChart.setOption({
  33.                         legend: {  
  34.                             data:data,
  35.                             orient: "vertical",
  36.                             top: "26%",
  37.                             right: "2%",
  38.                             icon: "circle",
  39.                             textStyle: {
  40.                                 fontSize: 20,
  41.                                 rich: {
  42.                                     one: {
  43.                                         width: 80,
  44.                                     },
  45.                                     two: {
  46.                                         width: 80,
  47.                                     },
  48.                                     three: {
  49.                                         width: 80,
  50.  
  51.                                     },
  52.                                 },
  53.                             },
  54.                             formatter: (name) => {
  55.                                 var total = 0;
  56.                                 var target;
  57.                                 let formateData = data;
  58.                                 for (var i = 0; i < formateData.length; i++) {
  59.                                     if (formateData[i].value) {
  60.                                         total += formateData[i].value;
  61.                                         if (formateData[i].name === name) {
  62.                                             target = formateData[i].value;
  63.                                         }
  64.                                     }
  65.                                 }
  66.                                 var v = ((target / total) * 100).toFixed(2);
  67.                                 let row;
  68.                                 if (name === '表头') row = `食物      含量       占比`;
  69.                                 else row = `{one|${name}} {two|${target}} {three|${v}%}`;
  70.                                 return row;
  71.                             },
  72.                         },
  73.                         color: ["#baf", "#bfa", "#cde",'#f90',"#0c9"],
  74.                         series: [
  75.                             {
  76.                                 type: "pie",
  77.                                 radius: ["30%", "50%"], 
  78.                                 center: ["32%", "40%"], 
  79.                                 data: data
  80.                             },
  81.                         ],
  82.                     });
  83.                 }
  84.  
  85.                 async function fetchData() {
  86.                     // TODO:待补充代码 
  87.                     var xhr = new XMLHttpRequest();
  88.                      xhr.open('GET', MockURL, true);
  89.                      xhr.onreadystatechange = function () {
  90.                    if (xhr.readyState === 4 && xhr.status === 200) {
  91.                     datasource = JSON.parse(xhr.responseText);
  92.                      renderProteinData(datasource);
  93.                      }
  94.                    };
  95.                  xhr.send();
  96.                  console.log(datasource);
  97.                 }
  98.             
  99.                 return {
  100.                     echartsInit,
  101.                     datasource
  102.                 };
  103.             },
  104.         };
  105.         const vm = Vue.createApp(app);
  106.         const mountedApp = vm.mount("#app");
  107.     </script>
  108. </body>
  109.  
  110. </html>

6. 营业状态切换

  1.  function useToggle(state) {
  2.             // TODO:待补充代码
  3.             // const [state, setState] = useState(initialState);
  4.             // return true
  5.             const toggle = () => {
  6.             setState(!state);
  7.          };
  8.   
  9.        // 返回状态和切换状态函数的数组
  10.            return [state, toggle];
  11.         }
  12.  
  13.         const app = Vue.createApp({
  14.             setup() {
  15.                 const [isWorking, toggleWorking] = useToggle(false) // 使用自定义的useToggle函数创建状态和切换函数
  16.                 const workImage = './images/open.jpg' // 营业状态的图片路径
  17.                 const restImage = './images/close.jpg' // 打烊状态的图片路径
  18.                 return {
  19.                     isWorking,
  20.                     toggleWorking,
  21.                     workImage,
  22.                     restImage
  23.                 }
  24.             }
  25.         });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/201306
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号