
.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  */
  border-radius: 10px;
  background: url('../images/woodiness.jpg');
}
 
.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-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transform: skewX(-20deg);
}

2.原子化css

这个题目主要需要知道的是css的属性选择器，可以查文档看看就知道了，不会的话其实看看其他的css应该也能联想到哈。

代码：


/* TODO: 实现原子化 flex */
div[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

3.神秘咒语

这个考的也就是请求头携带参数，还不会的得抓紧学一下XML，fetch，axios了，这个从蓝桥杯模拟题的趋势来看，考的很频繁，甚至后面的题目发个请求就有3，5分。

代码：


const key1Button = document.getElementById('key1') // 钥匙 1
const key2Button = document.getElementById('key2') // 钥匙 2
const spell1 = document.getElementById('spell1') // 咒语 1
const spell2 = document.getElementById('spell2') //咒语 2
 
// TODO：新增或者修改以下代码
 
key1Button.addEventListener('click', async () => {
  // 从后台请求钥匙1的咒语部分
  key1Button.disabled = true
  try {
    let { data } = await axios.get('/spellone', {
      headers: {
        Authorization: 'Bearer 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7' // 添加 Authorization 字段携带 token
      }
    })
    console.log(data)
    spell1.innerHTML = data
    tryOpenTreasureBox()
  } catch (error) {
    console.error('请求钥匙1咒语失败：', error)
  }
})
 
key2Button.addEventListener('click', async () => {
  // 从后台请求钥匙2的咒语部分
  key2Button.disabled = true
  try {
    let { data } = await axios.get('/spelltwo', {
      headers: {
        Authorization: 'Bearer 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7' // 添加 Authorization 字段携带 token
      }
    })
    spell2.innerHTML = data
    tryOpenTreasureBox()
  } catch (error) {
    console.error('请求钥匙2咒语失败：', error)
  }
})
 
function tryOpenTreasureBox() {
  if (spell1.innerHTML == '星辰闪耀' && spell2.innerHTML == '众星归位') {
    const box = document.getElementById('treasureBox')
    const suceessmessage = document.getElementById('suceess-message')
    box.classList.add('opened')
    suceessmessage.style.display = 'block'
  }
}

4.朋友圈

1.防抖函数的实现

其实这个还算挺简单的，就是一个非常常规的防抖，会的自然肯定是会的，不会的可以花几分钟时间看看视频学一下，很快的。

代码：


function debounce(fn, delay) {
  let timer = null
  return function () {
    const context = this
    const args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

2.将内容存储到localStorage中

这个按照要求做就好了，需要做哪些提示，加哪些属性都有说明。


document.getElementById('text').addEventListener(
  'input',
  debounce(function () {
    // 提示正在保存中
    document.getElementById('prompt').textContent = '正在保存中...'
 
    // 设置缓存
    const text = document.getElementById('text').value
    if (text.length <= 0) {
      document.getElementById('post').setAttribute('disabled', 'disabled')
    } else {
      document.getElementById('post').removeAttribute('disabled')
    }
    localStorage.setItem('savedText', text)
 
    // 过一段时间后提示保存完成
    setTimeout(function () {
      document.getElementById('prompt').textContent = '内容已保存'
    }, 750)
  }, 200)
)

3.这个就是对页面的一些动态展示了，需要理清页面渲染的流程是怎么样的，什么时候显示什么，什么情况下该显示什么，经过一些判断后添加必要的属性，类名等就行。


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.removeItem('savedText')
  // 同时需要将按钮的 disabled 属性设置回来
  document.getElementById('post').setAttribute('disabled', 'disabled')
})

页面初次加载的缓存


document.addEventListener('DOMContentLoaded', function () {
  // 页面加载时检查 localStorage 中是否有缓存文本数据
  const savedText = localStorage.getItem('savedText')
  if (savedText) {
    document.getElementById('text').value = savedText
    // 页面加载时检查输入框内容，设置按钮状态
    if (savedText.length > 0) {
      document.getElementById('post').removeAttribute('disabled')
    } else {
      document.getElementById('post').setAttribute('disabled', 'disabled')
    }
  } else {
    // 如果没有缓存文本数据，则将按钮设置为禁用状态
    document.getElementById('post').setAttribute('disabled', 'disabled')
  }
})

5.美食蛋白揭秘

1.发请求拿到需要的数据

这里的小坑就是拿到的数据渲染出来是不对的，要去除掉多余的数据


 async function fetchData() {
                    // TODO:待补充代码 
         let data = await fetch(MockURL).then(res => res.json())
             data.unshift({
                        name: '表头',
                        icon: 'none'
                    })
             echartsInit(data)
                    //去除第一个元素
             dataList.value = data.slice(1)
                }
 
onMounted(() => {
    fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

2.渲染页面


<!-- TODO:待补充代码，渲染获取的数据 -->
<div class="protein-item" v-for="data in dataList" :key="data.name">
         {{data.name}}
         {{data.value}}
</div>

6.营业状态变更

这个题目要实现切换状态，通过观察题目可以看到，需要返回的是一个Boolean值，这个是来确定页面该如何渲染的，第二个需要返回的是一个函数，用来切换状态的。

首先我们要想要的是，返回的值肯定需要是一个ref()，响应式的值，因为我们知道啊，在页面不刷新的情况下，ref()，响应式数据发生变化，页面也会发生变化的，那么想到这个就好办了。


function useToggle(state) {
            // TODO:待补充代码
            const toggledState = ref(state)
 
            function toggle() {
                toggledState.value = !toggledState.value
            }
            return [toggledState, toggle]
        
        }

7.小说阅读器

这个题目真的是把我坑惨了，坑的我想哭。

但是我的解法可能有点粗糙哈，大佬看到了见谅。

刚开始看到这个题目的数据，在解析数据过程中还好，我用的比较笨拙的办法一步步的解析出来了，提交后也能运行，json文件中的数据也有了，可是正当我提交的时候却出错了。

这是题目描述的格式：

这是我第一次运行出来的格式：

感觉没有一点问题了，不过还是不行，就在我绞尽脑汁没想到办法，重新读了一遍题目，看到了这句话：

我就修改代码将写入格式改成这种了：空格都已经去掉了，就在我满心欢喜的提交代码时，还是出错不给过，我真的想不通到底哪里出了问题。

最后在我看了一遍txt文件后，我再想是不是标题的问题，

但是看题目描述的结果又是这样的，我抱着试试的感觉修改提交后，终于通过了

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