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

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

2年前作者：飯啊飯°分類(lèi)：Toy博客閱讀(26)違法舉報(bào)

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

前言

第十三屆藍(lán)橋杯全國(guó)軟件和信息技術(shù)專(zhuān)業(yè)人才大賽(軟件類(lèi))新開(kāi)了Web應(yīng)用開(kāi)發(fā)比賽，本文介紹第十三屆藍(lán)橋杯Web應(yīng)用開(kāi)發(fā)的省賽題目以及解析。

一、水果拼盤(pán)

題目描述：使用Flex屬性快速完成布局。
題目分析：主要涉及的是Flex彈性布局的知識(shí)，主要包括主軸方向和是否換行。
題目代碼：

#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

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

二、展開(kāi)你的扇子

編寫(xiě)CSS文件，使卡片像扇子一樣展開(kāi)，如下圖：
題目分析：元素旋轉(zhuǎn)使用transform: rotate(); 鼠標(biāo)懸停:hover，控制子元素就直接在hover后寫(xiě)子元素即可。
題目代碼：

#box:hover #item7 {
  transform: rotate(10deg);
}

#box:hover #item8 {
  transform: rotate(20deg);
}

#box:hover #item9 {
  transform: rotate(30deg);
}

#box:hover #item10 {
  transform: rotate(40deg);
}

#box:hover #item11 {
  transform: rotate(50deg);
}

#box:hover #item12 {
  transform: rotate(60deg);
}

#box:hover #item6 {
  transform: rotate(-10deg);
}

#box:hover #item5 {
  transform: rotate(-20deg);
}

#box:hover #item4 {
  transform: rotate(-30deg);
}

#box:hover #item3 {
  transform: rotate(-40deg);
}

#box:hover #item2 {
  transform: rotate(-50deg);
}

#box:hover #item1 {
  transform: rotate(-60deg);
}

三、和手機(jī)相處的時(shí)光

題目描述：修改代碼，使Echarts展示的圖形正確。
題目分析：主要考察Echarts的用法。
題目代碼：

<script>
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  /*TODO：ECharts 的配置中存在錯(cuò)誤，請(qǐng)改正*/
  var option = {
    title: {
      text: "一周的手機(jī)使用時(shí)長(zhǎng)",
    },
    xAxis: {
      // type: "String",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      // type: "category",
    },
    series: [
      {
        data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
        type: "line",
      },
    ],
  };
  myChart.setOption(option);
</script>

四、燈的顏色變化

頁(yè)面加載完成3秒后燈的顏色變成紅色；6秒后變成綠色。
題目分析：主要涉及到j(luò)s設(shè)置css屬性的變化。
題目代碼：

// TODO：完善此函數(shù) 顯示紅色顏色的燈
function red() {
    var red = document.getElementById("redlight");
    var defaultlight = document.getElementById("defaultlight")
    defaultlight.style.display = "none";
    red.style.display = "inline";

}

// TODO：完善此函數(shù)  顯示綠色顏色的燈
function green() {
    var green = document.getElementById("greenlight");
    var defaultlight = document.getElementById("defaultlight");
    var red = document.getElementById("redlight");
    defaultlight.style.display = "none";
    green.style.display = "inline";
    red.style.display = "none";
}

// TODO：完善此函數(shù)
function trafficlights() {
    setTimeout(item => { 
        red();
    }, 3000)
    setTimeout(item => { 
        green();
    },6000)
}

五、冬奧大抽獎(jiǎng)

題目描述：利用jQuery或者JS做一個(gè)抽獎(jiǎng)活動(dòng)：
題目分析：主要使用了jQuery中的元素選擇、循環(huán)、類(lèi)操作以及排它操作。
題目代碼：

// TODO：請(qǐng)完善此函數(shù)
function rolling() {
  time++; // 轉(zhuǎn)動(dòng)次數(shù)加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 進(jìn)行遞歸動(dòng)畫(huà)
  }, speed);
  var text = "";
  switch (time % 8) {
    case 1:
      $("li").removeClass("active")
      $("li:eq(0)").addClass('active')
      text = $("li:eq(0)").text();
      break;
    case 2:
      $("li").removeClass("active")
      $("li:eq(1)").addClass('active')
      text = $("li:eq(1)").text();
      break;
    case 3:
      $("li").removeClass("active")
      $("li:eq(2)").addClass('active')
      text = $("li:eq(2)").text();
      break;
    case 4:
      $("li").removeClass("active")
      $("li:eq(5)").addClass('active')
      text = $("li:eq(5)").text();
      break;
    case 5:
      $("li").removeClass("active")
      $("li:eq(8)").addClass('active')
      text = $("li:eq(8)").text();
      break;
    case 6:
      $("li").removeClass("active")
      $("li:eq(7)").addClass('active')
      text = $("li:eq(7)").text();
      break;
    case 7:
      $("li").removeClass("active")
      $("li:eq(6)").addClass('active')
      text = $("li:eq(6)").text();
      break;
    case 0:
      $("li").removeClass("active")
      $("li:eq(3)").addClass('active')
      text = $("li:eq(3)").text();
      break;
  }

  // time > times 轉(zhuǎn)動(dòng)停止
  if (time > times) {
    $("#award").text("恭喜您抽中了"+text+"!!!")
    clearInterval(rollTime);
    time = 0;
    return;
  }
}

六、藍(lán)橋知識(shí)網(wǎng)

題目描述：完成如下的首頁(yè)布局：
題目分析：主要涉及的知識(shí)為flex布局。
題目代碼：

<body>
    <!--TODO：請(qǐng)補(bǔ)充代碼-->
    <div class="top">
      <div class="var">
        <div class="var-left">藍(lán)橋知識(shí)網(wǎng)</div>
        <div class="var-right">
          <p>首頁(yè)</p>
          <p>熱門(mén)技術(shù)</p>
          <p>技術(shù)手冊(cè)</p>
          <p>知識(shí)庫(kù)</p>
          <p>練習(xí)題</p>
          <p>聯(lián)系我們</p>
          <p>更多</p>
        </div>
      </div>
      <div class="middle">
        <h2>藍(lán)橋云課</h2>
        <h3>隨時(shí)隨地豐富你的技術(shù)棧！</h3>
        <p>加入我們</p>
      </div>
    </div>
    <div class="bottom">
      <div class="list">
        <div class="text">
          <h2>人工智能</h2>
          <p>人工智能亦稱(chēng)智械、機(jī)器智能，指由人制造出來(lái)的機(jī)器所表現(xiàn)出來(lái)的智能。通常人工智能是指通過(guò)普通計(jì)算機(jī)程序來(lái)呈現(xiàn)人類(lèi)智能的技術(shù)。</p>
        </div>
        <div class="text">
          <h2>前端開(kāi)發(fā)</h2>
          <p>前端開(kāi)發(fā)是創(chuàng)建 WEB 頁(yè)面或 APP 等前端界面呈現(xiàn)給用戶(hù)的過(guò)程，通過(guò) HTML，CSS 及 JavaScript 以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶(hù)界面交互。</p>
        </div>
        <div class="text">
          <h2>后端開(kāi)發(fā)</h2>
          <p>后端開(kāi)發(fā)是實(shí)現(xiàn)頁(yè)面的交互邏輯，通過(guò)使用后端語(yǔ)言來(lái)實(shí)現(xiàn)頁(yè)面的操作功能，例如登錄、注冊(cè)等。</p>
        </div>
        <div class="text">
          <h2>信息安全</h2>
          <p>ISO（國(guó)際標(biāo)準(zhǔn)化組織）的定義為：為數(shù)據(jù)處理系統(tǒng)建立和采用的技術(shù)、管理上的安全保護(hù)，為的是保護(hù)計(jì)算機(jī)硬件、軟件、數(shù)據(jù)不因偶然和惡意的原因而遭到破壞、更改和泄露。</p>
        </div>
      </div>
      <hr>
      <div class="footer">
        <p>? 藍(lán)橋云課 2022</p>
        <p>京公網(wǎng)安備 11010102005690 號(hào) | 京 ICP 備 2021029920 號(hào)</p>
      </div>
    </div>
  </body>

/*
 TODO：請(qǐng)補(bǔ)充代碼
*/
* {
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-decoration: none;
    list-style: none;
}

.top {
    background-color: #a6b1e1;
    height: 480px;
}

.top .var {
    display: flex;
    width: 1024px;
    height: 46px;
    margin: 13px auto;
    justify-content: space-between;
    font-size: 16px;
    color: white;
    line-height: 46px;
}
.top .var .var-right {
    display: flex;
   
    
}
.top .var .var-right p{
    margin-right: 16px;
}

.middle {
    display: flex;
    width: 1024px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
}

.middle h2 {
    margin-top: 30px;
    font-size: 45px;
    color: black;
}

.middle h3 {
    margin-top: 62px;
    font-size: 21px;
    color: white;
    font-weight: 200;
}

.middle p {
    margin-top: 62px;
    padding: 10px;
    font-size: 21px;
    color: #efbfbf;
    font-size: 18px;
    font-weight: 200;
    border: 1px solid #efbfbf;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px #efbfbf;
}

.bottom {
    background-color: white;
}

.list {
    width: 1024px;
    height: 302px;
    margin: 0 auto;
    margin-top: 74px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.list .text {
    width: 502px;
    height: 144px;
}

.list .text h2 {
    font-size: 30px;
    font-weight: 200;
    color:black;
}

.list .text p {
    font-size: 18px;
    color: #aaa;
    line-height: 1.4em;
    margin-top: 15px;
}
    
.footer {
    display: flex;
    width: 1024px;
    height: 80px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    color: #aaa;
    font-size: 14px;
}
.footer :first-child {
    margin-top: 30px;
}

.footer :last-child {
    margin-top: 10px;
}

七、布局切換

題目描述：使用Vue2的知識(shí)實(shí)現(xiàn)下述功能：
題目分析：本題主要涉及了axios數(shù)據(jù)獲取，v-if數(shù)據(jù)展示，:class的類(lèi)切換。
題目代碼：

  <body>
    <div id="app" v-cloak>
      <!-- TODO：請(qǐng)?jiān)谙旅鎸?shí)現(xiàn)需求 -->
      <div class="bar">
        <a :class="flag?'grid-icon active':'grid-icon'" @click="flag = true"></a>
        <a :class="!flag?'list-icon active':'list-icon'" @click="flag = false"></a>
      </div>
      <!--grid 示例代碼，動(dòng)態(tài)渲染時(shí)可刪除-->
      <ul class="grid" v-if="flag">
        <li v-for="(goods,index) in goodsList" ::key="index">
          <a href="#/3814" target="_blank"> <img :src="goods.image.large" /></a>
        </li>
      </ul>
      <ul class="list" v-else>
        <li v-for="(goods,index) in goodsList" ::key="index">
          <a href="#/3814" target="_blank"> <img :src="goods.image.small" /></a>
          <p>{{goods.title}}</p>
        </li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      flag:true,
    },
    mounted() {
      // TODO：補(bǔ)全代碼實(shí)現(xiàn)需求
      this.getData();
    },
    methods: {
      async getData(){
        var List = await axios.get("./goodsList.json")
        this.goodsList = List.data
        console.log(this.goodsList);
      },
      altergrid(e){
        this.flag = true;
      }
    },
  });
</script>

八、購(gòu)物車(chē)

題目描述：用數(shù)組操作管理購(gòu)物車(chē)。
題目代碼：

<script>
  new Vue({
    el: '#app',
    data: {
      cartList: [],
      goodsList: []
    },
    mounted() {
      this.goodsList = GoodsArr;
    },
    methods: {
      addToCart(goods) {
        // TODO：修改當(dāng)前函數(shù)，實(shí)現(xiàn)購(gòu)物車(chē)加入商品需求
        let flag = true;
        this.cartList.forEach(item => {
          if (item.id == goods.id) {
            item.num += 1
            goods.num = item.num
            flag = !flag
          }
        })
        if (flag) {
          goods.num = 1;
          this.cartList.push(goods);
          this.cartList = JSON.parse(JSON.stringify(this.cartList));
        }
      },
      removeGoods(goods) {
        // TODO：補(bǔ)全代碼實(shí)現(xiàn)需求
        this.cartList.forEach((item,index) => {
          if (item.id == goods.id && item.num > 0) {
            item.num -= 1
            goods.num = item.num
            if (goods.num == 0) {
              this.cartList.splice(index,1)
            }
          }
        })
      }
    }
  });
</script>

九、尋找小狼人

題目描述：自己編寫(xiě)filter方法，找出小狼人。
題目分析：考察了原型函數(shù)的使用。
題目代碼：

// 返回條件為真的新數(shù)組
Array.prototype.myarray = function (cb) {
  // TODO：待補(bǔ)充代碼
  let result = [];
  this.forEach(item => {
    if (cb(item)) {
      result.push(item)
    }
  })
  return result;
};

十、課程列表

題目描述：利用原生JS完成課程列表的展示，功能如下：

2.題目代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-409751.html

// TODO：待補(bǔ)充代碼

var getData = async function (pageNum) {
  let result = await axios.get("js/carlist.json")
  var Data = result.data;
  if (pageNum * 5 <= Data.length) {
    showData = Data.slice((pageNum - 1) * 5, pageNum * 5)
  } else {
    showData = Data.slice((pageNum - 1) * 5,)
  }
  if (Data.length % 5 == 0) {
    maxPage = Data.length / 5;
  } else {
    maxPage = parseInt(Data.length / 5) + 1
  }
  let prev = document.getElementById("prev");
  let next = document.getElementById("next");
  if (pageNum == 1) {
    prev.className = "page-item disabled"
  } else {
    prev.className = "page-item"
  }
  if (pageNum == maxPage) {
    next.className = "page-item disabled"
  } else {
    next.className = "page-item"
  }
  let group = document.querySelector(".list-group")

  group.innerHTML = ""
  showData.forEach(item => {
    group.innerHTML += `<a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">${item.name}</h5>
          <small>${item.price}元</small>
        </div>
        <p class="mb-1">
          ${item.description}</p>
      </a>`;
  })
  let pagination = document.querySelector("#pagination")
  pagination.innerHTML = `共${maxPage}頁(yè)，當(dāng)前${pageNum}頁(yè)`
  return maxPage
}

getData(pageNum).then(page => {
  maxPage = page
});

// 點(diǎn)擊上一頁(yè)
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待補(bǔ)充代碼
  if (pageNum > 1) {
    pageNum--;
    getData(pageNum);
  }

};
// 點(diǎn)擊下一頁(yè)
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待補(bǔ)充代碼
  if (pageNum < maxPage) {
    pageNum++;
    getData(pageNum);
  }

};

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

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀(guān)點(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)用

第十三屆省賽藍(lán)橋杯物聯(lián)網(wǎng)程序設(shè)計(jì)試題
1、配置根據(jù)試題的要求配置STM32CubeMX (1)引腳配置將PC14引腳配置為輸入模式 PC14 用戶(hù)按鍵引腳將PA10引腳配置為中斷模式 PA10 LoRa模塊DIO0引腳將以下引腳配置為輸出模式 PC15 用戶(hù)LED引腳 PB5 OLED 電源控制引腳 PA11和PA12 繼電器控制引腳 PA4和PA9 LoRa模塊片選和復(fù)位引腳，初始為高電
2023年04月10日
瀏覽(97)
第十三屆藍(lán)橋杯大賽軟件賽省賽（C++研究生組）
可以證明，只要首先裁剪最外圍的 4 4 4 條邊，之后無(wú)論怎樣裁剪，次數(shù)都是最少。對(duì)于 n n n 行 m m m 列的二維碼，至少需要裁剪 n m + 3 nm + 3 nm + 3 次，因此答案為 20 × 22 + 3 = 443 20times 22+3=443 20 × 22 + 3 = 443 。證明：只需證明裁掉邊界后至少還需裁剪 n m ? 1 nm-1 nm ? 1 次。 n
2023年04月10日
瀏覽(25)
【藍(lán)橋杯嵌入式】第十三屆藍(lán)橋杯嵌入式省賽客觀(guān)題以及詳細(xì)題解
題解： ??概念題。 MCO引腳，是單片機(jī)對(duì)外提供時(shí)鐘的引腳。 HSE，高速外部時(shí)鐘信號(hào)，時(shí)鐘源由外部晶體/陶瓷諧振器與外部時(shí)鐘； HSI，高速的內(nèi)部時(shí)鐘，由內(nèi)部8MHz的RC振蕩器產(chǎn)生，可直接作為系統(tǒng)時(shí)鐘或在2分頻后作為PLL輸入； SYSCLK，是系統(tǒng)時(shí)鐘； HSE/2，對(duì)高速外部時(shí)鐘進(jìn)
2023年04月16日
瀏覽(787)
第十三屆藍(lán)橋杯 Java C組省賽 C 題——紙張尺寸（AC）
在 ISO 國(guó)際標(biāo)準(zhǔn)中定義了 A0 紙張的大小為 1189mm × 841mm, 將 A0 紙沿長(zhǎng)邊對(duì)折后為 A1 紙, 大小為 841mm × 594mm, 在對(duì)折的過(guò)程中長(zhǎng)度直接取下整 (實(shí)際裁剪時(shí)可能有損耗)。將 A1 紙沿長(zhǎng)邊對(duì)折后為 A2 紙, 依此類(lèi)推。輸入紙張的名稱(chēng), 請(qǐng)輸出紙張的大小。輸入一行包含一個(gè)字符串表示
2024年02月11日
瀏覽(27)
試題G：全排列的價(jià)值（第十三屆藍(lán)橋杯省賽Python B組）
? 首先，我們先重新排列一下題目所給的例子我們將每種排列的每個(gè)元素價(jià)值單獨(dú)拿出來(lái)看看（矩陣1）不難發(fā)現(xiàn)
2023年04月15日
瀏覽(29)
第十三屆藍(lán)橋杯 C++ B組省賽 C 題——刷題統(tǒng)計(jì)（AC）
小明決定從下周一開(kāi)始努力刷題準(zhǔn)備藍(lán)橋杯競(jìng)賽。他計(jì)劃周一至周五每天做 a a a 道題目, 周六和周日每天做 b b b 道題目。請(qǐng)你幫小明計(jì)算, 按照計(jì)劃他將在第幾天實(shí)現(xiàn)做題數(shù)大于等于 n n n 題? 輸入一行包含三個(gè)整數(shù) a , b a,b a , b 和 n n n . 輸出一個(gè)整數(shù)代表天數(shù)。 10 20 99 8 1 ≤
2024年01月20日
瀏覽(30)
看看去年藍(lán)橋考了什么，第十三屆藍(lán)橋杯省賽（C/C++ 大學(xué)B組）題解
本題為填空題，只需要算出結(jié)果后，在代碼中使用輸出語(yǔ)句將所填結(jié)果輸出即可。九進(jìn)制正整數(shù) (2022)9 轉(zhuǎn)換成十進(jìn)制等于多少？最大運(yùn)行時(shí)間：1s 最大運(yùn)行內(nèi)存: 512M 這是一道經(jīng)典的進(jìn)制轉(zhuǎn)換題目，具體可以點(diǎn)進(jìn)鏈接看看這篇文章。進(jìn)制轉(zhuǎn)換點(diǎn)擊這里?。?！本題為填空題，只
2024年02月02日
瀏覽(54)
第十三屆藍(lán)橋杯 Java B 組省賽 D 題—— 最少刷題數(shù)（AC）
小藍(lán)老師教的編程課有 N N N 名學(xué)生, 編號(hào)依次是 1 … N 1…N 1 … N 。第 i i i 號(hào)學(xué)生這學(xué)期刷題的數(shù)量是 A i A_{i} A i ? 。對(duì)于每一名學(xué)生, 請(qǐng)你計(jì)算他至少還要再刷多少道題, 才能使得全班刷題比他多的學(xué)生數(shù)不超過(guò)刷題比他少的學(xué)生數(shù)。第一行包含一個(gè)正整數(shù) N N N 。第二
2023年04月09日
瀏覽(29)
2022 第十三屆藍(lán)橋杯大賽軟件賽省賽（第二場(chǎng)），C/C++ 大學(xué)B組題解
2022 第十三屆藍(lán)橋杯大賽軟件賽省賽（第二場(chǎng)），C/C++ 大學(xué)B組題解補(bǔ)題鏈接：地址第1題 —— 練習(xí) （5分）題意：過(guò)了樣例交上去0分，問(wèn)可能是ABC的哪一種顯然都是，答案：ABC 第2題 —— 三角回文數(shù) （5分）題意：求第一個(gè)大于某2e8的數(shù)的回文數(shù)，且滿(mǎn)足他可以等于1+2+…
2023年04月09日
瀏覽(25)
第十三屆藍(lán)橋杯省賽與國(guó)賽真題題解大匯總（十四屆參賽者必備）
??大家好，我是執(zhí)梗。本文匯總了我寫(xiě)的第十三屆藍(lán)橋杯所有省賽真題與國(guó)賽真題，會(huì)針對(duì)每道題打出我自己的難度評(píng)星??，也會(huì)給出每道題的算法標(biāo)簽，幫助大家更有針對(duì)性的去學(xué)習(xí)和準(zhǔn)備，當(dāng)然許多題目由于難度或時(shí)間的原因暫未更新，如果有不懂的問(wèn)題也可以在評(píng)
2024年02月11日
瀏覽(37)

<ul id="cp4v9"></ul>