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

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

1.创意广告牌

.billboard {
  position: relative;
  background-color: #8e6534;
  color: #fff;
  padding: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  background-size: cover;
  /* TODO:待补充代码  设置圆角 10px,背景图片为woodiness.jpg  */
  background-image: url(../images/woodiness.jpg);
  border-radius: 10px;
}
.top-sign {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #a87f4a;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  /* TODO:待补充代码   上面两个角是圆角 15px,下面两个角是直角  元素 x 轴倾斜 20度*/
 border-radius: 15px 15px 0px 0px ;
 transform: skewX(-20deg);

}

2原子化 css

/* TODO: 实现原子化 flex */
div {
  display: flex;
  flex-direction: column;
}

3神秘咒语 

4. 朋友圈

document.addEventListener("DOMContentLoaded", function() {
  // TODO: 请在此补充页面加载时缓存检查的代码

  const savedText = localStorage.getItem('savedText');
    // if (savedText!=null&&savedText!=undefined) {
    //   document.getElementById('text').value = savedText;
    // }
});

// 当文本框输入内容改变时,动态地设置localStorage缓存,并根据有没有文本改变按钮状态
// 此处使用了防抖函数,避免太过频繁地更新缓存
document.getElementById("text").addEventListener(
  "input",
  debounce(function() {

     // 提示正在保存中
     document.getElementById("prompt").textContent = "正在保存中...";
     
    // TODO: 请在此补充用户输入时设置缓存和调整按钮状态的代码
    const text = this.value;
    localStorage.setItem('savedText', text);

    // TODO-END

   
    // 过一段时间后提示保存完成,模拟上传数据至后台的效果
    setTimeout(function() {
      document.getElementById("prompt").textContent = "内容已保存";
    }, 750);
  }, 200)
);

document.getElementById("post").addEventListener("click", function() {
  const content = document.getElementById("text").value;
  const element = createContent(content);
  document.querySelector(".contents").appendChild(element);
  document.getElementById("prompt").textContent = "";

  // TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
  // 清空输入框中的内容
  document.getElementById('text').value = '';
    
  // 移除 localStorage 内缓存的文本数据
  localStorage.removeItem('savedText');
  if(!document.getElementById("text").value){
    // 禁用按钮
    document.getElementById("post").disabled=true
  }else{
    document.getElementById("post").disabled=false
  }
});

// 防抖工具函数
/**
 * @param  {function} fn  - 回调函数
 * @param  {string} delay - 函数执行延迟,单位为ms
 */
function debounce(fn, delay) {
  //return fn; // 这一行是为了确保页面正常运行,可以去掉

  // TODO: 请实现函数防抖的功能
  let timeoutId;
  clearTimeout(timeoutId);
  timeoutId=setTimeout(()=>{
    fn.apply()
  },delay)
}

// 用户点击“发表”后,创建一条新信息的DOM元素
function createContent(content) {
  const div = document.createElement("div");
  const d = new Date();
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "删除";
  deleteBtn.addEventListener("click", function() {
    div.remove();
  });
  div.innerHTML = `<div><span class="content">${content}</span><span class="date">${d.toLocaleString()}</span></div>`;
  div.appendChild(deleteBtn);
  return div;
}

5. 美食蛋白质揭秘 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同食物的蛋白质占比</title>
    <script src="./lib/vue3.global.js"></script>
    <script src="./lib/echarts.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <h2>不同食物的蛋白质占比</h2>
        <div class="protein-container" >
            <!-- TODO:待补充代码,渲染获取的数据 -->
            <div class="protein-container">
                <div class="protein-item" v-for="item in datasource">鸡胸肉 30 {{datasource.name datasource.value}}</div> 
              </div>
        </div>
        <div class="echarts" id="main"></div>
    </div>
    <script>
        const { ref, onMounted } = Vue;
        const  MockURL =  './mock/data.json'
        const app = {
            setup() {
                let datasource
                function echartsInit(data) {
                    const main = document.getElementById("main");
                    const myChart = echarts.init(main);
                    myChart.setOption({
                        legend: {  
                            data:data,
                            orient: "vertical",
                            top: "26%",
                            right: "2%",
                            icon: "circle",
                            textStyle: {
                                fontSize: 20,
                                rich: {
                                    one: {
                                        width: 80,
                                    },
                                    two: {
                                        width: 80,
                                    },
                                    three: {
                                        width: 80,

                                    },
                                },
                            },
                            formatter: (name) => {
                                var total = 0;
                                var target;
                                let formateData = data;
                                for (var i = 0; i < formateData.length; i++) {
                                    if (formateData[i].value) {
                                        total += formateData[i].value;
                                        if (formateData[i].name === name) {
                                            target = formateData[i].value;
                                        }
                                    }
                                }
                                var v = ((target / total) * 100).toFixed(2);
                                let row;
                                if (name === '表头') row = `食物      含量       占比`;
                                else row = `{one|${name}} {two|${target}} {three|${v}%}`;
                                return row;
                            },
                        },
                        color: ["#baf", "#bfa", "#cde",'#f90',"#0c9"],
                        series: [
                            {
                                type: "pie",
                                radius: ["30%", "50%"], 
                                center: ["32%", "40%"], 
                                data: data
                            },
                        ],
                    });
                }

                async function fetchData() {
                    // TODO:待补充代码 
                    var xhr = new XMLHttpRequest();
                     xhr.open('GET', MockURL, true);
                     xhr.onreadystatechange = function () {
                   if (xhr.readyState === 4 && xhr.status === 200) {
                    datasource = JSON.parse(xhr.responseText);
                     renderProteinData(datasource);
                     }
                   };
                 xhr.send();
                 console.log(datasource);
                }
            
                return {
                    echartsInit,
                    datasource
                };
            },
        };
        const vm = Vue.createApp(app);
        const mountedApp = vm.mount("#app");
    </script>
</body>

</html>

6. 营业状态切换

 function useToggle(state) {
            // TODO:待补充代码
            // const [state, setState] = useState(initialState);
            // return true
            const toggle = () => {
            setState(!state);
         };
  
       // 返回状态和切换状态函数的数组
           return [state, toggle];
        }

        const app = Vue.createApp({
            setup() {
                const [isWorking, toggleWorking] = useToggle(false) // 使用自定义的useToggle函数创建状态和切换函数
                const workImage = './images/open.jpg' // 营业状态的图片路径
                const restImage = './images/close.jpg' // 打烊状态的图片路径
                return {
                    isWorking,
                    toggleWorking,
                    workImage,
                    restImage
                }
            }
        });

转载请说明出处内容投诉
CSS教程_站长资源网 » 第十五届蓝桥杯(Web 应用开发)模拟赛 3 期-大学组

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买