国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【藍(lán)橋杯Web】第十五屆藍(lán)橋杯(Web 應(yīng)用開(kāi)發(fā))模擬賽 2 期 | 全部題解

這篇具有很好參考價(jià)值的文章主要介紹了【藍(lán)橋杯Web】第十五屆藍(lán)橋杯(Web 應(yīng)用開(kāi)發(fā))模擬賽 2 期 | 全部題解。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

【藍(lán)橋杯Web】第十五屆藍(lán)橋杯(Web 應(yīng)用開(kāi)發(fā))模擬賽 2 期 | 全部題解,藍(lán)橋杯Web,前端,javascript,藍(lán)橋杯,職場(chǎng)和發(fā)展,前端,javascript,vue.js,html

感覺(jué)藍(lán)橋杯的模擬賽一次比一次難了??

制作不易,代碼都是純手敲,覺(jué)得有幫助的伙伴們記得點(diǎn)個(gè)贊評(píng)論一下,謝謝大家支持??

話不多說(shuō)直接上答案

目錄

1、想不相等

2、三行情書(shū)

3、電影院在線訂票

4、老虎機(jī)

5、星際通訊

6、藍(lán)橋杯排位賽

7、拼出一個(gè)未來(lái)

8、超能英雄聯(lián)盟

HeroList.js

TeamList.js

9、萬(wàn)能合成臺(tái)

10、賬戶驗(yàn)證


1、想不相等

這里有個(gè)坑,題意說(shuō)如果不符合要求要拋出錯(cuò)誤'...',實(shí)際上只需要return即可,不需要用到throw語(yǔ)句,當(dāng)時(shí)這里卡了有一會(huì)

/**
 * @param {string} val
 * @return {Object}
 */
var expectFn = function(val) {
  // TODO
  return{
    toBe(_val){
      return val === _val || 'Not Equal'
    },
    notToBe(_val){
      return val !== _val || 'Equal'
    }
  }
};


// console.log(expectFn(5).toBe(5)); // true
// console.log(expectFn(5).notToBe(5)); // "Equal"
// 檢測(cè)需要,請(qǐng)勿刪除
module.exports = expectFn;

2、三行情書(shū)

這題要注意的是,span標(biāo)簽原本為行內(nèi)元素,無(wú)法設(shè)置寬高,需要將span轉(zhuǎn)換為塊級(jí)元素

span {
    font-size: 20px;
    color: #837362;
    /* TODO:補(bǔ)充下面的代碼 */
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
p {
    color: #837362;
    /* TODO:補(bǔ)充下面的代碼 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;

}

3、電影院在線訂票

/* TODO: 
      1. 完成數(shù)據(jù)請(qǐng)求,生成電影名,價(jià)格以及座位情況
      2. 綁定點(diǎn)擊事件,實(shí)現(xiàn)訂票功能
 */

// 獲取座位區(qū)域節(jié)點(diǎn)
const seatAreaNode = document.getElementById("seat-area");
// 獲取電影名節(jié)點(diǎn)
const movieNameNode = document.getElementById("movie-name");
// 獲取電影票價(jià)節(jié)點(diǎn)
const moviePriceNode = document.getElementById("movie-price");
// 獲取已訂電影票數(shù)量節(jié)點(diǎn)
const count = document.getElementById("count");
// 獲取已訂電影票總價(jià)節(jié)點(diǎn)
const total = document.getElementById("total");

axios('./data.json').then(res=>{
      let {data} = res
      console.log(data);
      movieNameNode.innerText = data.name
      moviePriceNode.innerText = data.price
      let tpl = ``
      data.seats.map(item=>{
            tpl+=`<div class="row">{{replace}}</div>`
            let _tpl = ''
            item.map(_item=>{
                  _tpl+=_item?`
                  <div class="seat occupied"></div>                
                  `:`<div class="seat"></div>`
            })
            tpl = tpl.replace('{{replace}}',_tpl)
      })
      seatAreaNode.innerHTML = tpl
      ;[...document.getElementsByClassName('seat')].map(node=>{
            if(![...node.classList].includes('occupied')){
                  node.onclick=function(){
                        if([...node.classList].includes('selected')){
                              node.classList.remove('selected')
                              count.innerHTML = parseInt(count.innerHTML) - 1
                              total.innerHTML = parseInt(total.innerHTML) - 20
                        }else{
                              node.classList.add('selected')
                              count.innerHTML = parseInt(count.innerHTML) + 1
                              total.innerHTML = parseInt(total.innerHTML) + 20
                        }
                  }
            }
      })
})

4、老虎機(jī)

這題如果讀懂題意還是很簡(jiǎn)單的,要r1、r2和r3減1即可

  // GetResult 中獎(jiǎng)結(jié)果函數(shù),r1,r2,r3 為最后圖片停留位置,以第一列為例,最終顯示的元素是 sevenFirst 下的第 r 個(gè) li 元素。
  GetResult(r1, r2, r3) {
    // TODO 待補(bǔ)充代碼
    let o1 = document.getElementById('sevenFirst').getElementsByTagName('li'),
    o2 = document.getElementById('sevenSecond').getElementsByTagName('li'),
    o3 = document.getElementById('sevenThird').getElementsByTagName('li'),
    oTip = document.getElementsByClassName('textPanel')[0]
    if(o1[r1-1].dataset.point == o2[r2-1].dataset.point == o3[r3-1].dataset.point){
      oTip.innerHTML ='恭喜你,中獎(jiǎng)了'
    }else{
      oTip.innerHTML ='很遺憾,未中獎(jiǎng)'
    }
  }
}

5、星際通訊

這題難度還是比較簡(jiǎn)單的,因?yàn)閏odonTable里的key都是三位數(shù)的

/**
 * @param {string} alienMessage 外星人的密文
 * @return {string}  翻譯結(jié)果
 */
const translate = (alienMessage) => {
  // TODO:待補(bǔ)充代碼
  if(!alienMessage)return ""
  if(alienMessage.length%3!=0)return"無(wú)效密語(yǔ)"
  let strArr = [],
  _str = '',
  result = ''
  for(let strIdx in alienMessage){
    _str+=alienMessage[strIdx]
    if(_str == 'XXI')break
    if(_str.length == 3){
      strArr.push(_str)
      _str = ''
    }
  }
  result+=(strArr.map(item=>codonTable[item])+'').replaceAll(',','')
  if(result=='undefined' || !result)return "無(wú)效密語(yǔ)"
  return result
};

6、藍(lán)橋杯排位賽

考察的是echart,直接上答案

const { createApp, ref, onMounted } = Vue;
const app = createApp({
  setup() {
    const chartsData = ref([]);
    onMounted(() => {
      // TODO:待補(bǔ)充代碼 請(qǐng)求數(shù)據(jù),并正確渲染柱形圖和地圖
      fetch('./mock/map.json').then(res=>res.json()).then(res=>{
        let schoolList = []
        res.map(item=>{
          item.school_power.map((item,idx)=>schoolList.push(item))
        })
        schoolList.sort((a,b)=>b.power-a.power)
        schoolList.length = 10
        showChartBar(schoolList);
        showChinaMap(res);
      })
    });

    // 展示柱狀圖
    const showChartBar = (schoolList) => {
      const myChart = echarts.init(document.getElementById('chart'));

      let data = chartsData.value.map((item, index) => {
        return item.school_power;
      });
      let result = data.flat(1).sort((a, z) => {
        return z.power - a.power;
      });
      let arr = result.slice(0, 10);
      let school = arr.map((item) => {
        return item.name;
      });
      let power = arr.map((item) => {
        return item.power;
      });

      // 指定配置和數(shù)據(jù)
      const option = {
        xAxis: {
          type: 'category',
          axisLabel: { interval: 0, rotate: 40 },
          // TODO:待修改  柱狀圖 x 軸數(shù)據(jù) -> 前 10 學(xué)校名稱
          data: schoolList.map(item=>item.name),
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        series: [
          {
            // TODO:待修改   柱狀圖 y 軸數(shù)據(jù)->學(xué)校戰(zhàn)力值
            data: schoolList.map(item=>item.power),
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
            itemStyle: {
              color: '#8c7ae6',
            },
          },
        ],
      };

      // 把配置給實(shí)例對(duì)象
      myChart.setOption(option);
      // 根據(jù)瀏覽器大小切換圖表尺寸
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    };

    // 展示地圖
    const showChinaMap = (data) => {
      const chinaMap = echarts.init(document.getElementById('chinaMap'));

      // 進(jìn)行相關(guān)配置
      const mapOption = {
        tooltip: [
          {
            backgroundColor: '#fff',
            subtext: 'aaa',
            borderColor: '#ccc',
            padding: 15,
            formatter: (params) => {
              return (
                params.name +
                '熱度值:' +
                params.value +
                '<br>' +
                params.data.school_count +
                '所學(xué)校已加入備賽'
              );
            },
            textStyle: {
              fontSize: 18,
              fontWeight: 'bold',
              color: '#464646',
            },
            subtextStyle: {
              fontSize: 12,
              color: '#6E7079',
            },
          },
        ],
        geo: {
          // 這個(gè)是重點(diǎn)配置區(qū)
          map: 'china', // 表示中國(guó)地圖
          label: {
            normal: {
              show: false, // 是否顯示對(duì)應(yīng)地名
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgb(38,63,168)',
              borderWidth: '0.4',
              areaColor: '#fff',
            },
            emphasis: {
              //鼠標(biāo)移入的效果
              areaColor: 'rgb(255,158,0)',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        visualMap: {
          show: true,
          left: 'center',
          top: 'bottom',
          type: 'piecewise',
          align: 'bottom',
          orient: 'horizontal',
          pieces: [
            {
              gte: 80000,
              color: 'rgb(140,122,230)',
            },
            {
              min: 50000,
              max: 79999,
              color: 'rgba(140,122,230,.8)',
            },
            {
              min: 30000,
              max: 49999,
              color: 'rgba(140,122,230,.6)',
            },
            {
              min: 10000,
              max: 29999,
              color: 'rgba(140,122,230,.4)',
            },
            {
              min: 1,
              max: 9999,
              color: 'rgba(140,122,230,.2)',
            },
          ],
          textStyle: {
            color: '#000',
            fontSize: '11px',
          },
        },
        series: [
          {
            type: 'map',
            geoIndex: 0,
            // TODO:待修改 地圖對(duì)應(yīng)數(shù)據(jù)
            data,
          },
        ],
      };

      // 把配置給實(shí)例對(duì)象
      chinaMap.setOption(mapOption);
    };

    return {
      chartsData,
      showChartBar,
      showChinaMap,
    };
  },
});

app.mount('#app');

7、拼出一個(gè)未來(lái)

// 定義拖放事件的處理函數(shù)
function drop(event) {
    // 檢查是否拖動(dòng)的拼圖塊不是當(dāng)前目標(biāo)拼圖塊
    // draggedPiece 被拖動(dòng)的拼圖塊元素。this 目標(biāo)位置的拼圖塊元素。
    if (draggedPiece !== this) {
       // TODO:待補(bǔ)充代碼 
       let saveArr = [
            [draggedPiece.children[0].src,draggedPiece.children[0].dataset.id]
            ,[this.children[0].src,this.children[0].dataset.id]
        ]
        draggedPiece.children[0].src = saveArr[1][0]
        draggedPiece.children[0].dataset.id = saveArr[1][1]
        this.children[0].src = saveArr[0][0]
        this.children[0].dataset.id = saveArr[0][1]
        let imgDataIdList = [...document.getElementById('puzzle-container').getElementsByTagName('img')].map(item=>item.dataset.id)
        console.log(imgDataIdList);
        if(imgDataIdList == '1,2,3,4,5,6,7,8,9'){
            document.getElementById('success-message').classList.remove('hide')
            document.getElementById('success-message').classList.add('show')
        }else{
            document.getElementById('success-message').classList.remove('show')
            document.getElementById('success-message').classList.add('hide')
        }
    }

    // 重置正在拖動(dòng)的拼圖塊
    draggedPiece = null;
}

8、超能英雄聯(lián)盟

這里我只改動(dòng)了兩個(gè)地方

HeroList.js

// TODO:補(bǔ)全代碼,實(shí)現(xiàn)目標(biāo)效果
const HeroList = {
  template: `
  <div class="hero-list">
    <h2>可選英雄</h2>
    <ul>
      <li class="hero-item" v-for="(item,idx) in list">
        <span>{{item.name}}</span>
        <span>{{item.ability}}</span>
        <span>{{item.strength}}</span>
        <button @click="clickEvent(idx)" disabled v-if="item.btnInfo.disabled">
        {{item.btnInfo.text}}</button>
        <button @click="clickEvent(idx)" v-else="item.btnInfo.disabled">
        {{item.btnInfo.text}}</button>
      </li>
    </ul>
  </div>
  `,
  setup() {
    let store = useHeroStore(),
    list = ref([])
    axios('./js/heroes.json').then(({data})=>{
      data.map(item=>{
        item.btnInfo = {
          text:'添加至隊(duì)伍',
          disabled:false
        }
      })
      list.value = data
      store.heroes = list.value
    })
    return{
      list,
      clickEvent(idx){
        list.value[idx].btnInfo.text = '已添加'
        list.value[idx].btnInfo.disabled = true
      }
    }
  },
};
// TODOEnd

TeamList.js

// TODO:補(bǔ)全代碼,實(shí)現(xiàn)目標(biāo)效果
const TeamList = {
  template: `
  <div class="team-list">
      <h2>我的隊(duì)伍</h2>
      <ul>
        <li class="team-item" v-for="(item,idx) in list">
          <span>{{item.name}}</span>
          <span>{{item.strength}}</span>
          <button @click="removeHero(item,idx)">移除</button>
        </li>
      </ul>
      <button class="sort-button" @click="sortStrength">按實(shí)力排序</button>
      <p class="total-strength">當(dāng)前隊(duì)伍戰(zhàn)斗力:{{count}} </p>
  </div>
  `,
  setup() {
    let store = useHeroStore(),
    list = Vue.ref([]),
    count = Vue.ref(0)
    Vue.watch(()=>store.heroes,nv=>{
      count.value = 0
      list.value = nv.filter(item=>{
        if(item.btnInfo.disabled){
          count.value += item.strength
          return true
        }
      })
    },{deep:true})
    return {
      list,
      count,
      removeHero(item,idx){
        store.heroes[item.id-1].btnInfo.text = '添加至隊(duì)伍里'
        store.heroes[item.id-1].btnInfo.disabled = false
      },
      sortStrength(){
        list.value.sort((a,b)=>b.strength - a.strength)
      },
    }
  },
};
// TODOEnd

9、萬(wàn)能合成臺(tái)

這題的含金量還是比較高,考察了很多方面的知識(shí)點(diǎn)

這題我選擇用了字符串來(lái)解

// state 輔助記錄當(dāng)前合成欄內(nèi)容的全局變量
let state = [
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
];

let targetItemName = ''; //輔助記錄當(dāng)前合成欄的可能目標(biāo)合成物品每次 onPickItem 執(zhí)行后,前端界面會(huì)根據(jù)此全局變量的值更改圖標(biāo) 

/** 檢查當(dāng)前的合成配方是否能夠合成某個(gè)物品。如果配方合法,返回一個(gè)合成的目標(biāo)物品名,否則返回一個(gè)空字符串。
 * @param {*} map 為一個(gè) 3*3 的二維數(shù)組,第一維為物品的每一橫行,第二維為每一橫行物品下的每個(gè)縱列
 */ 

function checkRecipe(map) {
  // TODO:待補(bǔ)充代碼
  let rule = structuredClone(window.recipes)
  //用字符串來(lái)玩這道題
  let rMap = map.map(item=>{
    return (item+'').replaceAll(',',' ').trim()
  }),
  rRule = {},
  result = ''
  for (let key in rule) {
    rRule[key] = []
    for (let idx in rule[key]) {
      rRule[key][idx] = rule[key][idx].map(item=>(item+'').replaceAll(',',' ').trim())
    }
  }
  for(let key in rRule){
    for (const item of rRule[key]) {
      let _itemStr = ''
      //判斷縱向是否擁有空位
      if((rMap+'')[0]==','){
        _itemStr = ','+item
      }else if((rMap+'')[(rMap+'').length-1]==','){
        _itemStr = item+','
      }else{
        _itemStr = item+''
      }
      if(_itemStr == rMap)result = key
    }
  }
  return result
}

/** 更新 state 中的物品位置
 * @param {string} name  為此次修改為的物品,可能為空字符串(通過(guò)右下角清空),也可能為物品
 * @param {Array<Number>} pos 為一個(gè)兩個(gè)元素的數(shù)字?jǐn)?shù)組,分別指示物品的所在橫行與所在縱列
 */
function onPickItem(name, pos) {
  // TODO:待補(bǔ)充代碼
  state[pos[0]-1][pos[1]-1] = name
  
  targetItemName = checkRecipe(state) || '';
}

10、賬戶驗(yàn)證

這題有個(gè)坑,最后清空了輸入框的值依舊不給過(guò),然后換了一種思路就可以了,上代碼:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-754217.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>賬戶驗(yàn)證</title>
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
  <link rel="stylesheet" href="./css/element-plus@2.3.7/index.css">
  <script src="./js/vue3.global.js"></script>
  <script src="./css/element-plus@2.3.7/index.full.js"></script>
  <script type="importmap">
      {
        "imports":{
          "vue-demi":"./js/index.mjs",
          "vue":"./js/vue.esm-browser.prod.js",
          "pinia":"./js/pinia.esm-browser.js"
        }
      }
  </script>
  <script src="./js/pinia.esm-browser.js" type="module"></script>
</head>

<body>
  <!-- app根組件開(kāi)始 -->
  <div id="app">
    <div class="header">
      <img class="back-btn" src="images/arrow.png" />
      <span id="main_title">使用手機(jī)號(hào)登錄</span>
      <span class="blank"></span>
    </div>
    <component :is="showName"></component>
  </div>
  <!-- app根組件結(jié)束 -->

  <!-- phone組件開(kāi)始 -->
  <template id="phone">
    <div>
      <ul class="phone">
        <span>輸入手機(jī)號(hào)碼</span>
        <li>
          <input type="text" v-model="phoneVal" autofocus id="numberInput" />
        </li>
        <li>
          <input type="checkbox" v-model="isSure" name="" id="checkbox" />
          <span>已閱讀并同意
            <a href="javascript:;">服務(wù)協(xié)議</a>
            和
            <a href="javascript:;">隱私保護(hù)指引</a>
          </span>
        </li>
        <button id="btn" @click="nextStep">下一步</button>
      </ul>
    </div>
  </template>
  <!-- phone組件結(jié)束 -->

  <!-- check組件開(kāi)始 -->
  <template id="check">
    <ul class="number">
      <span>輸入短信驗(yàn)證碼</span>
      <li class="hassend">已向
        <i>{{handlePhoneVal}}</i>
        發(fā)送驗(yàn)證碼
      </li>
      <li class="code-container">
        <input type="number" class="code" min="0" max="9" required>
        <input type="number" class="code" min="0" max="9" required>
        <input type="number" class="code" min="0" max="9" required>
        <input type="number" class="code" min="0" max="9" required>
        <input type="number" class="code" min="0" max="9" required>
        <input type="number" class="code" min="0" max="9" required>
      </li>
      <a href="javascript:;" id="resend" @click="resentCode">重新發(fā)送</a>
    </ul>
  </template>
  <!-- check組件結(jié)束 -->

  <!-- success組件開(kāi)始 -->
  <template id="success">
    <div class="success">
      <ul>
        <div>驗(yàn)證成功!</div>
        <div>5s后將自動(dòng)跳轉(zhuǎn)</div>
      </ul>
    </div>
  </template>
  <!-- success組件結(jié)束 -->
</body>
<script type="module">
  import { createPinia, defineStore } from 'pinia'
  const { createApp, reactive, toRefs,provide,inject,ref,watch } = Vue
  const { ElNotification } = ElementPlus

  const app = createApp({
    setup() {
      let data = reactive({
        showName: "phone"
      })
      // TODO:補(bǔ)全代碼實(shí)現(xiàn)目標(biāo)需求
      //定義全局通信數(shù)據(jù)池
      const code = ref([])
      const phoneVal = ref('')
      const createCode = function(){    //隨機(jī)生成二維碼
        let res = ''
        function *_create(){
          let count = 0
          while(++count <= 6){
            yield Math.floor(Math.random()*10)
          }
        }
        for (const iterator of _create()) {
          res+=iterator
        }
        return res
      }
      const handlePhone = num =>{
        let res = ''
        for(let idx in num){
          if(idx>2 && idx<num.length-2){
            res+='*'
          }else{
            res+=num[idx]
          }
        }
        return res
      }
      //將通信數(shù)據(jù)派發(fā)滲透到子組件樹(shù)
      provide('code',code)
      provide('phoneVal',phoneVal)
      provide('createCode',createCode)
      provide('data',data)
      provide('handlePhone',handlePhone)


      return {
        ...toRefs(data)
      }
    }
  })
  app.use(ElementPlus)
  app.use(createPinia())

  app.component("phone", {
    template: "#phone",
    setup() {
      // TODO:補(bǔ)全代碼實(shí)現(xiàn)目標(biāo)需求
      let isSure = ref('')
      let phoneVal = inject('phoneVal')
      let code = inject('code')
      let createCode = inject('createCode')
      let data = inject('data')

      //驗(yàn)證手機(jī)
      function verifyPhone(num){
        if(num.length!=11)return false
        return ((num[0]==1) && num[1]==8)
      }

      return {
        isSure,
        phoneVal,
        nextStep(){
          if(!isSure.value)
            return ElNotification({
              title: '發(fā)送失敗',
              message: '請(qǐng)先閱讀并同意下方協(xié)議',
              type: 'error',
            })
          if(!verifyPhone(phoneVal.value))
            return ElNotification({
              title: '發(fā)送失敗',
              message: '無(wú)效的手機(jī)號(hào)碼',
              type: 'error',
            })
          code.value = createCode()
          ElNotification({
            title: '發(fā)送成功',
            message: '您在驗(yàn)證碼為'+code.value,
            type: 'success',
          })
          data.showName = 'check'
        }
      }
    }
  })
  app.component("check", {
    template: "#check",
    setup() {
      // TODO:補(bǔ)全代碼實(shí)現(xiàn)目標(biāo)需求
    let phoneVal = inject('phoneVal'),
      handlePhoneVal = inject('handlePhone')(phoneVal.value),
      data = inject('data'),
      code = inject('code'),
      createCode = inject('createCode'),
      rVal = ''
      setTimeout(()=>{    //將代碼放入宏隊(duì)列以此獲取dom,用onMounted也行

        let oCodeIptList = [...document.getElementsByClassName('code')]
        
        oCodeIptList[0].focus() //第一個(gè)默認(rèn)聚焦

        oCodeIptList.map(item=>{
          item.oninput=function(){
            if(item.value){   //如果輸入了值就聚焦下一個(gè),否則聚焦上一個(gè) 
              item?.nextElementSibling && item?.nextElementSibling.focus()
            }else{
              item?.previousElementSibling && item?.previousElementSibling.focus()
            }
            rVal = (oCodeIptList.map(item=>item.value)+'').replaceAll(',','')  //這里很關(guān)鍵,之前我用了這種方式之后,清空六個(gè)輸入框的檢測(cè)就給通過(guò)了
            trackVal(rVal)
          }
        })
        
        function trackVal(val){
          if(val.length>=6){
            if(val == code.value){
              ElNotification({
                title: '驗(yàn)證成功',
                message: "歡迎回來(lái)",
                type: 'success',
              })
              data.showName = 'success'
            }else{
              ElNotification({
                title: '驗(yàn)證失敗',
                message: "您輸入的驗(yàn)證碼有誤",
                type: 'error',
              })
              ;[...document.getElementsByClassName('code')].map(item=>item.value = '') //清空輸入框
              ;[...document.getElementsByClassName('code')][0].focus() //重新聚焦第一個(gè)
            }
          }
        }
      })

      return {
        handlePhoneVal,
        resentCode(){
          code.value = createCode()
          ElNotification({
            title: '發(fā)送成功',
            message: '您在驗(yàn)證碼為'+code.value,
            type: 'success',
          })
        }
      }
    }
  })
  app.component("success", {
    template: "#success"
  })
  app.mount('#app')

</script>

</html>

到了這里,關(guān)于【藍(lán)橋杯Web】第十五屆藍(lán)橋杯(Web 應(yīng)用開(kāi)發(fā))模擬賽 2 期 | 全部題解的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 第十五屆藍(lán)橋杯模擬賽(第一期)

    第十五屆藍(lán)橋杯模擬賽(第一期)

    大家好,我是晴天學(xué)長(zhǎng),本次分享,制作不易,需要的小伙伴可以點(diǎn)贊關(guān)注評(píng)論一波哦!后續(xù)會(huì)繼續(xù)更新第二期第三期的。?????? 問(wèn)題描述 請(qǐng)找到一個(gè)大于 2022 的最小數(shù),這個(gè)數(shù)轉(zhuǎn)換成十六進(jìn)制之后,所有的數(shù)位(不含前導(dǎo) 0)都為字母(A 到 F)。 請(qǐng)將這個(gè)數(shù)的十進(jìn)制形

    2024年02月04日
    瀏覽(90)
  • 第十五屆藍(lán)橋杯模擬賽(第一期 C++)

    問(wèn)題描述 請(qǐng)找到一個(gè)大于 2022 的最小數(shù),這個(gè)數(shù)轉(zhuǎn)換成十六進(jìn)制之后,所有的數(shù)位(不含前導(dǎo) 0)都為字母(A 到 F)。請(qǐng)將這個(gè)數(shù)的十進(jìn)制形式作為答案提交。? ? 答案: 2730 思路分析: 直接暴力秒了 問(wèn)題描述 在 Excel 中,列的名稱使用英文字母的組合。前 26 列用一個(gè)字母

    2024年02月05日
    瀏覽(94)
  • 第十五屆藍(lán)橋杯模擬賽(第二期)JAVA

    (做的時(shí)候忘記小題截圖了,沒(méi)有題目,個(gè)人答案,可能會(huì)有問(wèn)題) 1. 108 2.608 3.4169 4.901440 5.541(有問(wèn)題,看錯(cuò)題目了) 6. 問(wèn)題描述 給定一個(gè)正好六位的正整數(shù) x,請(qǐng)將 x 循環(huán)左移一位后輸出。 所謂循環(huán)左移一位,是指將原來(lái)的十萬(wàn)位變?yōu)閭€(gè)位,原來(lái)的萬(wàn)位到個(gè)位向左移動(dòng)依

    2024年02月04日
    瀏覽(90)
  • 第十五屆藍(lán)橋杯模擬賽(第一期)Python

    創(chuàng)作不易,歡迎小伙伴們關(guān)注、點(diǎn)贊+收藏! 問(wèn)題描述 請(qǐng)找到一個(gè)大于 2022 的最小數(shù),這個(gè)數(shù)轉(zhuǎn)換成十六進(jìn)制之后,所有的數(shù)位(不含前導(dǎo) 0)都為字母(A 到 F)。 請(qǐng)將這個(gè)數(shù)的十進(jìn)制形式作為答案提交。 答案提交 這是一道結(jié)果填空的題,你只需要算出結(jié)果后提交即可。本

    2024年02月05日
    瀏覽(229)
  • 第十五屆藍(lán)橋杯 模擬賽第二期java組題解

    一、 問(wèn)題描述 小藍(lán)要在屏幕上放置一行文字,每個(gè)字的寬度相同。 小藍(lán)發(fā)現(xiàn),如果每個(gè)字的寬為 36 像素,一行正好放下 30 個(gè)字,字符之間和前后都沒(méi) 有任何空隙。 請(qǐng)問(wèn),如果每個(gè)字寬為 10 像素,字符之間不包含空隙,一行可以放下多少個(gè)字? 答案提交 這是一道結(jié)果填空

    2024年02月03日
    瀏覽(91)
  • 第十五屆藍(lán)橋杯模擬賽B組(第二期)C++

    第十五屆藍(lán)橋杯模擬賽B組(第二期)C++

    前言: 第一次做藍(lán)橋模擬賽的博客記錄,可能有很多不足的地方,現(xiàn)在將第十五屆藍(lán)橋杯模擬賽B組(第二期)的題目與代碼與大家進(jìn)行分享,我是用C++做的,有好幾道算法題當(dāng)時(shí)自己做的也是一臉懵,所以有好個(gè)別幾道也是請(qǐng)教了其他大佬才分享出來(lái)的。 目錄 ?編輯 一、

    2024年02月05日
    瀏覽(96)
  • 第十五屆藍(lán)橋杯模擬賽(第二期)第5題(Python)

    最難的才有挑戰(zhàn)性,才值得學(xué)習(xí)! 小藍(lán)有一個(gè)01矩陣。他打算將第一行第一列的 0 變?yōu)?2 。變化過(guò)程有傳染性,每次 2 的上下左右四個(gè)相鄰的位置中的 0 都會(huì)變成 2 。直到最后每個(gè) 2 的周?chē)际?1 或 2 結(jié)束。 請(qǐng)問(wèn),最終矩陣中有多少個(gè) 2 ? 以下是小藍(lán)的矩陣,共 30 行 40 列。

    2024年02月04日
    瀏覽(85)
  • 【藍(lán)橋杯 第十五屆模擬賽 Java B組】訓(xùn)練題(A - I)

    【藍(lán)橋杯 第十五屆模擬賽 Java B組】訓(xùn)練題(A - I)

    ?目錄 A、求全是字母的最小十六進(jìn)制數(shù) B、Excel表格組合 C、求滿足條件的日期 D、 取數(shù)字 - 二分 (1)暴力 (2)二分 E、最大連通塊 - bfs F、哪一天? G、信號(hào)覆蓋 - bfs (1)bfs(60%) (2)暴力 H、清理水域 - 暴力(弱智版) 可以差分 I、滑行?- dfs + dp (1)dfs(30%) (2)

    2024年02月05日
    瀏覽(87)
  • 第十五屆藍(lán)橋杯單片機(jī)組備賽——中斷系統(tǒng)與外部中斷應(yīng)用

    第十五屆藍(lán)橋杯單片機(jī)組備賽——中斷系統(tǒng)與外部中斷應(yīng)用

    ??內(nèi)核與外設(shè)之間的主要交互方式有兩種: 輪詢 和 中斷 。 ??輪詢的方式貌似公平,但實(shí)際工作效率很低,且不能及時(shí)響應(yīng)緊急事件; ??中斷系統(tǒng)使得內(nèi)核具備了應(yīng)對(duì)突發(fā)事件的能力。在執(zhí)行CPU當(dāng)前程序時(shí),由于系統(tǒng)中出現(xiàn)了某種急需處理的情況,CPU暫停正在執(zhí)行的程

    2024年01月17日
    瀏覽(28)
  • 【藍(lán)橋杯Web】第十三屆藍(lán)橋杯(Web 應(yīng)用開(kāi)發(fā))省賽真題

    【藍(lán)橋杯Web】第十三屆藍(lán)橋杯(Web 應(yīng)用開(kāi)發(fā))省賽真題

    第十三屆藍(lán)橋杯全國(guó)軟件和信息技術(shù)專業(yè)人才大賽(軟件類(lèi))新開(kāi)了Web應(yīng)用開(kāi)發(fā)比賽,本文介紹第十三屆藍(lán)橋杯Web應(yīng)用開(kāi)發(fā)的省賽題目以及解析。 題目描述:使用Flex屬性快速完成布局。 題目分析:主要涉及的是Flex彈性布局的知識(shí),主要包括主軸方向和是否換行。 題目代碼:

    2023年04月10日
    瀏覽(26)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包