跳转至

我的前端笔记

22国赛

Asxjdb/my-front-end

22国赛

1 修复网站显示问题¶

原代码

<link rel="stylesheet" href="css/index.css" />

答案：

<link rel="stylesheet" href="css/style.css" />

1 分一分¶

const splitArray = (oldArr, num) => {
  // TODO：请补充代码实现功能
  oldArr.sort((a,b)=> a-b)
  let ans=[]
  for(let index=0;index<oldArr.length;index+=num){
    ans.push(oldArr.slice(index, index+num))
  }
  return ans
};

一句话：

return oldArr.sort((a,b) => a-b).reduce((t, v) => (t[t.length-1].length !== num ? t[t.length-1].push(v) : t.push([v]), t), [[]])

return oldArr.sort((a, b) => a - b).reduce((t, v, i) => t.concat([i % num ? t.pop().concat([v]) : [v]]), [])

return oldArr.sort((a, b) => a - b).reduce((newarr, element) => {
      newarr[newarr.length - 1].length !== num
        ? newarr[newarr.length - 1].push(element)
        : newarr.push([element]);
      return newarr;
    },
    [[]]
  );

2 新鲜的蔬菜¶

.box{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
#box1 span{
  grid-area: e;
}
#box2 span:nth-child(2){
  grid-area: i;
}
#box3 span:nth-child(2){
  grid-area: e;
}
#box3 span:nth-child(3){
  grid-area: i;
}

3 水果消消乐¶

const scoreDom = document.querySelector("#score");
const imgList = document.querySelectorAll(".img-box img");
const btn = document.querySelector(".btn");
const container = document.querySelector(".container");
// TODO：请补充代码
function startGame() {
  imgList.forEach((item) => (item.style.display = "block"));
  btn.style.display = "none";
  setTimeout(() => {
    imgList.forEach((item) => (item.style.display = "none"));
  }, 500);

  let index = 0;
  let stack = [];
  let score = 0;
  container.addEventListener("click", (e) => {
    index++;
    e.target.children[0].style.display = "block";
    stack.push(e.target);

    if (index % 2 === 0) {
      if (stack[0].children[0].alt === stack[1].children[0].alt) {
        score += 2;
        scoreDom.innerText = score;
        setTimeout(() => {
          stack[0].style.visibility = "hidden";
          stack[1].style.visibility = "hidden";
        }, 500);
      } else {
        score -= 2;
        scoreDom.innerText = score;
        setTimeout(() => {
          stack[0].children[0].style.display = "none";
          stack[1].children[0].style.display = "none";
        }, 500);
      }
      setTimeout(() => {
        stack.pop();
        stack.pop();
      }, 500);
    }
  });
}

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

4 用什么来做计算A¶

// TODO：请补充代码
const calcButtons=document.querySelectorAll('.calc-button')
const formula=document.querySelector('#formula')
const result=document.querySelector('#result')

calcButtons.forEach(item=>{
    item.addEventListener('click',(e)=>{
        if(/AC|=|√/.test(e.target.innerText)) return
        formula.value+=e.target.innerText
    })
})

document.querySelector('#equal').addEventListener('click',()=>{
    let shizi=formula.value.replace('x', '*').replace('÷', '/')
    result.value=eval(shizi)
})

document.querySelector('#reset').addEventListener('click', ()=>{
    result.value=''
    formula.value=''
})
document.querySelector('#sqrt').addEventListener('click', ()=>{
    result.value=Math.sqrt(formula.value)
})

不用实现逆波兰表达式，eval()太强大了

5 开学礼物大放送¶

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>开学礼物大放送</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>

  <div class="banner">
    <div class="banner-title"></div>
  </div>
  <div class="part1">
    <img src="./images/small-left.png" alt=""><span>精品好课，助力备赛；就业辅导，直通名企</span>
    <img src="./images/small-right.png" alt="">
    <div class="content">
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
      <div>
        <img src="./images/icon1.png" alt=""><span>赛事特训</span><span>真题详解、模拟实战</span>
      </div>
    </div>
    <div class="btn">
      <img src="./images/hand.png" alt="">
    </div>
    <div class="footer">
      <img src="./images/left.png" alt="">
      <img src="./images/right.png" alt="">
    </div>
  </div>
  <div class="bottom"></div>
</body>

</html>

/*TODO：请补充代码*/
* {
    padding: 0;
    margin: 0;
}

.banner {
    background-image: url('../images/banner-bg.png');
    width: 1920px;
    height: 753px;
}

.banner-title {
    width: 640px;
    height: 440px;
    position: relative;
    left: 640px;
    top: 53px;
    background-image: url('../images/banner-title.png');
}

.part1 {
    background-image: url(../images/part1-bg.png);
    width: 1072px;
    height: 698px;
    position: relative;
    left: 424px;
    top: -75px;
}

.bottom {
    background: #2873F9;
    position: relative;
    top: -698px;
    width: 1920px;
    height: 745px;
    z-index: -2;
}

.part1>span {
    width: 380px;
    height: 28px;
    position: absolute;
    top: 103px;
    left: 346px;
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #EC6853;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
}

.part1>img:nth-child(1) {
    position: absolute;
    top: 112px;
    left: 314px;
}

.part1>img:nth-child(3) {
    position: absolute;
    top: 112px;
    left: 742px;
}

.content {
    position: absolute;
    top: 170.63px;
    left: 51px;
    display: grid;
    grid-template-columns: 187px 187px 187px 187px;
    grid-template-rows: 136px 136px;
    row-gap: 40px;
    column-gap: 74px;
}

.content div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.content div span:nth-child(2) {
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
}

.content div span:nth-child(3) {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #666666;
    letter-spacing: 0;
    text-align: center;
    line-height: 24px;
    font-weight: 400;
}

.btn{
    background-image: url(../images/btn1.png);
    width: 579px;
    height: 95px;
    position: absolute;
    top: 543px;
    left: 247px;
    background-position: -11px;
}


.footer img:nth-child(1){
    position: relative;
    top: 572.47px;
    right: 186px;
    z-index: -1;
}


.footer img:nth-child(2){
    position: relative;
    top: 572.47px;
    left: 780px;
    z-index: -1;
}

.btn img{
    position: absolute;
    top: 74px;
    left: 271px;
}

6 权限管理¶

7 一起会议吧¶

8 天气趋势A¶

mounted: function () {
  this.$nextTick(() => {
    this.initChart();
  });
  let html = ``
  for (let mmm of Object.values(this.monthList)) {
    html += `<li ${mmm == '1月' ? 'class="active"' : ''}>${mmm}</li>`
  }
  document.querySelector('.month ul').innerHTML = html
  axios('./js/weather.json').then(res => {
    this.chartOptions.series[0].data = Object.values(res.data[0])[0]
    // console.log(Object.values(res.data[0])[0]);
    // console.log(this.chartOptions.xAxis[0].data);
    this.chart.setOption(this.chartOptions);
    document.querySelector('.month ul').addEventListener('click', (e) => {
      if (e.target.tagName !== 'LI') return
      document.querySelector('.active').classList.remove('active')
      e.target.classList.add('active')
      let monthKey = 0
      for (const key in this.monthList) {
        if (e.target.innerHTML == this.monthList[key]) break
        monthKey++
      }
      this.chartOptions.series[0].data = Object.values(res.data[monthKey])[0]
      this.chart.setOption(this.chartOptions);
      if(monthKey==new Date().getMonth()){
        document.querySelector('#currentMonth').style.display='block'
      }
      else{
        document.querySelector('#currentMonth').style.display='none'
      }
    })
    document.querySelector('#currentMonth').style.display='none'
  })
},

9 JSON生成器¶

10 商城管理系统¶