14届蓝桥杯web校内模拟赛第一期（本科组）

1.数据类型的检测

传入值	返回值
‘s’	string
0	number
false	boolean
undefined	undefined
Symbol()	symbol
function fn(){}	function
123n	bigint
null	null
{}	object
[]	array
new Date	date
new Map	map
new Set	set
/a/	regexp

方法一

 if(typeof(data)=="number") return 'number'
  else if(typeof(data) == "bigint") return 'bigint'
  else if(typeof(data) == 'string') return 'string'
  else if(typeof(data) == 'boolean') return 'boolean'
  else if(typeof(data) == 'function') return 'function'
  else if(typeof(data) == 'symbol') return 'symbol'
  else if(data === undefined) return 'undefined'
  else if(data === null) return 'null'
  else if(Array.isArray(data)) return 'array'
  else if(data instanceof Date) return 'date'
  else if(data instanceof Map) return 'map'
  else if(data instanceof Set) return 'set'
  else if(data instanceof RegExp) return 'regExp'
  else return 'object'

方法二

 return Object.prototype.toString.call(data).slice(8,-1)

反思：对于方法一，需要注意点

typeof() 方法只能检测基础数据类型和 object
undefined == null 为 true
instanceof检测是否是实例化对象

2.渐变色背景生成器

let html = document.querySelector('html')
inputs.forEach(item=>{
    
    
    item.onchange = function(e){
    
    
       html.style.setProperty(`--${
      
      e.target.id}`,this.value)
    }
})

反思：

其实这到题目，考的是一种使用css自定义属性，并且提供文档，考察的是文档阅读能力
在通过js来改变css自定义属性
MDN-css自定义属性

3.水果叠叠乐

$("#card li").on("click", function (e) {
    
    
        // TODO: 待补充代码
        
        if($('#box li').length >= 7) return //当卡槽中有七个时，不在进行以下的操作

        $('#box').append($(this).clone())  //克隆点击的元素

        $(this).hide()                     //被点击的元素，进行隐藏
        this.getA
        let libs = $(`#box li[data-id=${
      
      this.getAttribute('data-id')}]`)

        if(libs.length ===3){
    
                 //判断等于3时，进行移除
          $(`#box li[data-id=${
      
      this.getAttribute('data-id')}]`).remove()
        }
      });

4.element-ui组件的第二次封装

 <el-radio v-model="currentRow" :label="scope.$index" @change="setCurrent(scope.row)">&nbsp;</el-radio>

setCurrent(row) {
    
    
	 this.currentRow = this.tableData.indexOf(row)
	 this.$refs.singleTable.setCurrentRow(row); // 设置当前选中行
},

5.http应用

const http = require('http')

http.createServer((req,res)=>{
    
    
    res.end('hello world')
}).listen(8080)

6.新课上线

<!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>
    <!-- TODO：待补充代码 -->
    <div class="top">
      <div class="top-img">
        <img src="./images/word.png" alt="">
      </div>
    </div>

    <div class="buttom">
      <div class="buttom-1">
        <div class="buttom-1-left">
          <div class="buttom-1-title">
            <img src="./images/shouzhi.png" alt="">
            <span>扫码咨询</span>
          </div>
          <div class="buttom-1-p">
            <p>购买成功后，一定要扫码添加班主任，获得<span>Java进阶资料</span>，并加入学习群，不错过直播课！</p>
          </div>
        </div>
        <div class="buttom-1-right">
          <img src="./images/erweima.png" alt="">
        </div>
      </div>
      <div class="buttom-2">
        <div class="buttom-kecheng">
          <img src="./images/left.png" alt="">
          <span>课程大纲</span>
          <img src="./images/right.png" alt="">
        </div>
      </div>
      <div class="buttom-3">

        <div class="buttom-3-top">

          <div class="buttom-3-top-left">
            <div class="table-top">
              第一天  开发原则及设计模式
              <img src="./images/bq-jichu.png" alt="">
            </div>
            <div class="table-center">
              <div class="table-center-left">
                <ul>
                  <li>第一讲</li>
                  <li>第二讲</li>
                  <li>第三讲</li>
                  <li>第四讲</li>
                </ul>
              </div>
              <div class="table-center-right">
                <ul>
                  <li>七大开发原则说明 </li>
                  <li>二十三种设计模式分类</li>
                  <li>安全懒汉&不安全懒汉&饿汉单例模式</li>
                  <li>枚举类单例&静态内部类模式</li>
                </ul>
              </div>
            </div>
            <div class="table-buttom">
              <img src="./images/tz.png" alt="">
              <span>设计一个实用单例类</span>
            </div>

          </div>

          <div class="buttom-3-top-left">
            <div class="table-top">
              第二天  实用设计模式
              <img src="./images/bq-jinjie.png" alt="">
            </div>
            <div class="table-center">
              <div class="table-center-left">
                <ul>
                  <li>第一讲</li>
                  <li>第二讲</li>
                  <li>第三讲</li>
                  <li></li>
                </ul>
              </div>
              <div class="table-center-right">
                <ul>
                  <li>工厂& 代理&静态代理模式 </li>
                  <li>简单静态& 抽象工厂</li>
                  <li> JDK动态代理模式与 spring 源码解析</li>
                  <li></li>
                </ul>
              </div>
            </div>
            <div class="table-buttom">
              <img src="./images/tz.png" alt="">
              <span>设计一个实用单例类</span>
            </div>

          </div>
        </div>

        <div class="buttom-3-buttom">
          <div class="t-top">第三天  手把手带你搞懂 “校招求职面试那些事儿” <img src="./images/bq-bys.png" alt=""></div>
          <div class="t-buttom">
            <div class="t-buttom-left">
              <ul>
                <li>第一讲</li>
                <li>第二讲</li>
              </ul>
            </div>
            <div class="t-buttom-right">
              <ul>
                <li>"设计一个工具实现Spring框架"作业点评</li>
                <li>选择比努力更重要的时代</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

/* TODO：待补充代码 */
*{
    
    
    margin: 0 ;
    padding: 0;
}
.top{
    
    
    display: flex;
    height: 500px;
    
    justify-content: center;
    align-items: center;
    background: url('../images/bg.png') no-repeat;
    background-size: 100%;
}

.top-img{
    
    
    width: 880px;
    height: 279px;
}

.buttom{
    
    
    height: 697px;
    background: #F8FAFB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    
}

.buttom-1{
    
    
    width: 1200px;
    height: 120px;
    background: url('../images/small-bg.png');
    background-size: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
   
    margin-top: -80px;
}

.buttom-1-title img{
    
    
    width: 18px;
    height: 22px;
    
}
.buttom-1-title span{
    
    
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #1E5EF5;
    line-height: 40px;
    font-weight: 600;
}

.buttom-1-p p{
    
     
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333333;
    letter-spacing: 0;
    text-align: justify;
    line-height: 18px;
    font-weight: 500;
}

.buttom-1-p span{
    
    
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #1E5EF5;
    letter-spacing: 0;
    text-align: justify;
    line-height: 18px;
    font-weight: 600;
}

.buttom-kecheng{
    
    
    display: flex;
    height: 26px;
    width: 200px;
    align-items: center;
    justify-content: space-evenly;
}

.buttom-kecheng span{
    
    
    font-family: PingFangSC-Semibold;
    font-size: 26px;
    color: #1E5EF5;
    letter-spacing: 0;
    line-height: 26px;
    font-weight: 600;
}

.buttom-kecheng img{
    
    
    width: 16px;
    height: 11px;
}

.buttom-3{
    
    
    width: 1200px;
    height: 456px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(30,94,245,0.08);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.buttom-3-top{
    
    
    height: 211px;
    width: 804px;
    display: flex;
    justify-content: space-between;
}
.buttom-3-top-left{
    
    
    width: 390px;
    height: 211px;
    background: #F5F8FF;
    border-radius: 8px;
}

.table-top{
    
    
    height: 40px;
    background: #1E5EF5;
    border-radius: 8px 8px 0px 0px;
    line-height: 40px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-indent: 16px;
    font-weight: 500;
    position: relative;
}

.table-top img{
    
    
    position: absolute;
    width: 44px;
    height: 22px;
    top: -6px;
    right: 96px;
}

.table-center{
    
    
    height: 137px;
    display: flex;
}

.table-center-left{
    
    
    width: 76.2px;
    background: #E1EAFF;
}

.table-center-left ul{
    
    
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.table-center-left ul li{
    
    
    list-style: none;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1E5EF5;
    letter-spacing: 0;
    line-height: 14px;
    font-weight: 400;
}

.table-center-right{
    
    
    width: 313.8px;

}

.table-center-right ul{
    
    
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    
}
.table-center-right ul li{
    
    
    text-indent: 12.39px;
    list-style: none;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
   
    font-weight: 400;
}

.table-buttom{
    
    
    height: 40px;
    background: #FFF7F1;
    border-radius: 0px 0px 9.5px 9.5px;
    position: relative;
}
.table-buttom img{
    
    
    position: absolute;
    width: 43px;
    height: 22px;
    left: 0;
    top: 8px;
}

.table-buttom span{
    
    
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 40px;
    font-weight: 400;
    text-indent: 88px;
}

.buttom-3-buttom{
    
    
    height: 106px;
    width: 804px;
    
}

.t-top{
    
    
    height: 40px;
    background: #1E5EF5;
    border-radius: 8px 8px 0px 0px;
    line-height: 40px;
    text-indent: 16px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    position: relative;
    font-weight: 500;
}
.t-top img{
    
    
    width: 68px;
    height: 22px;
    position: absolute;
    right: 314px;
    top: -4px;
}

.t-buttom{
    
    
    height: 69px;
    display: flex;
   
}

.t-buttom-left{
    
    
    width: 76.2px;
    background: #E1EAFF;
}

.t-buttom-left ul{
    
    
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.t-buttom-left ul li{
    
    
    list-style: none;
    text-indent: 15.99px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1E5EF5;
    letter-spacing: 0;
    line-height: 14px;
    font-weight: 400;
}

.t-buttom-right{
    
    
    width: 727.8px;

}

.t-buttom-right ul{
    
    
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

.t-buttom-right ul li{
    
    
    list-style: none;
    text-indent: 14px;

}

7.成语学习

 getSingleWord(val) {
    
    
   for(let i = 0 ; i < this.idiom.length ; i++){
    
    
     if(!this.idiom[i]){
    
    
       this.idiom[i] = val
       this.$set(this.idiom,i,val)
       break
     }
   }
 },
   confirm() {
    
    
    
  this.arr.forEach(item=>{
    
    

    if(item.tip == this.tip){
    
    

      if(item.word == this.idiom.join('')){
    
    
        this.result = true
      }else{
    
    
        this.result = false
      }
    }
  })
}

8.学海无涯

  let weekData = {
    
    
        x:[],
        y:[]
      }

      let monthData = {
    
    
        x:[],
        y:[]
      }

      //跟换数据
      function update(data){
    
    
        option.xAxis.data = data.x;
        option.series[0].data = data.y;
        myChart.setOption(option);
      }

      //请求数据
      axios({
    
    
        method:'get',
        url:'./data.json'
      }).then(res=>{
    
    
        let data = res.data.data
        
        for(let key in data){
    
    
          monthData.x.push(key)
          let monthSum = 0
          let weekSum = 0
          let weekCount = 1
          for(let i = 0 ; i < data[key].length ; i++){
    
    
            weekSum += data[key][i]
            monthSum += data[key][i]
            if((i+1) % 7 == 0 || data[key].length - 1 == i){
    
    
              weekData.y.push(weekSum)
              weekData.x.push(`${
      
      key}第${
      
      weekCount++}周`)
              weekSum = 0
            }
          }
          monthData.y.push(monthSum)
        }
        update(weekData)
       
      })
      console.log(monthData);

      //点击事件,切换数据
     let tabs =  document.querySelectorAll('.tabs input')
     for(let i = 0 ; i < tabs.length ; i++){
    
    
      tabs[i].onclick = function(e){
    
    
        if(e.target.id == 'month'){
    
    
          update(monthData)
        }else{
    
    
          update(weekData)
        }
      }
     }

9.逃离二向箔

 run() {
    
    
    // TODO：待补充代码
    let index = 0

    for(let i = 0 ; i < this.max ; i++){
    
    

      this.requestQueue[i]().then(res=>{
    
    

        this.render(res)
        next()
      }).catch(err=>{
    
    
        this.render(err)
        next()
      })

      index++
    }

    let next = ()=>{
    
    
      if(index == this.requestQueue.length) return
      this.requestQueue[index]().then(res=>{
    
    

        this.render(res)
        next()
      }).catch(err=>{
    
    
        this.render(err)
        next()
      })
      index++
    }

  }

10梅楼封的一天

const toDesensitization = (str, rule, symbol = "*", dealPhone = true) => {
    
    
    let obj = {
    
    
        "ids":[],
        "newStr":str
    }

    if(Array.isArray(rule)){
    
    
        for (const ru of rule) {
    
    
            update(obj,ru,symbol,dealPhone)
        }
    }else{
    
    
        update(obj,rule,symbol,dealPhone)
    }

    function update(obj,rule,symbol,dealPhone){
    
    
        let reg = new RegExp(rule,'g')
        obj.newStr = obj.newStr.replace(reg,(word,index)=>{
    
    
            obj.ids.push(index)
            return new Array(word.length).fill(symbol).join('')
        })

        if(dealPhone){
    
    
            let reg = /\d{11}/g
            obj.newStr = obj.newStr.replace(reg,(word)=>{
    
    
                return word.slice(0,3)+new Array(5).fill(symbol).join('')+word.slice(-3)
            })
        }
    }


    if(!str) return null
    if(str && !rule)  return str


    return obj
};

14届蓝桥杯web校内模拟赛第一期（本科组）

1.数据类型的检测

方法一

方法二

2.渐变色背景生成器

3.水果叠叠乐

4.element-ui组件的第二次封装

5.http应用

6.新课上线

7.成语学习

8.学海无涯

9.逃离二向箔

10梅楼封的一天

猜你喜欢