2022年十三届省赛真题(大学组and职业组)

最新推荐文章于 2024-09-30 15:42:36 发布

Stolen 遗憾

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量169

点赞数 1

文章标签：前端 javascript vue.js 蓝桥杯

本文链接：https://blog.csdn.net/m0_56646930/article/details/137105596

版权

文章介绍了使用JavaScript实现的一个抽奖功能，包括定时器控制转动轮盘和中奖逻辑，以及一个健身调查表单的收集用户信息部分。同时，还展示了HTML和CSS用于构建界面，以及Vue.js处理搜索联想的简单示例。

摘要由CSDN通过智能技术生成

6、东奥大抽奖

//刷题笔记记录;

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次
  rolling();
});

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    let lis = document.querySelectorAll(".ul li")
    let index = time % 9;
    if (time % 9 == 0) {
      index += 1;
    }
    lis.forEach(e => {
      e.classList.remove("active");
    })
    lis.forEach(e => {
      if (e.classList.contains(`li${index}`)) {
        e.classList.add("active")
      }
    })
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    time = 0;
    let lis = document.querySelectorAll(".ul li");
    let ShopName;
    lis.forEach(e => {
      if (e.classList.contains("active")) {
        ShopName = e.textContent;
      }
    })
    document.getElementById("award").innerText = ShopName;
    return;
  }
}

7、健身大调查

function formSubmit() {
  // TODO：待补充代码
  let height = document.getElementById("height").value;
  let weight = document.getElementById("weight").value;
  let sex = document.getElementsByName("male");
  let sexName = null;
  for (const item of sex) {
    if (item.checked == true) {
      sexName = item;
      if (item.value == 0) {
        sexName = '男'
      } else if (item.value == 1) {
        sexName = '女'
      }
      break;
    }
  }
  console.log(sexName);
  console.log(height, weight);
  
  let place = document.getElementsByName("place");
  let placeName = [];
  for (const item of place) {
    if (item.checked == true) {
      place = item;
      if (item.value == 1) {
        placeName.push("公园")
      } else if (item.value == 2) {
        placeName.push("健身房")
      } else if(item.value == 3) {
        placeName.push("户外")
      }
    }
  }
  let resultPlace = placeName.join('、');
  //所有数据都拿到了
  const quescontent = document.getElementById("quescontent");
  quescontent.style.display = 'none';
  document.getElementById("result").style.display = 'block';

  let p = document.createElement('p');
  p.style.textAlign = 'center';
  p.innerText = `身高 ${height}cm，体重 ${weight}kg，性别${sexName}，会在${resultPlace}锻炼`
  document.getElementById("result").appendChild(p);
}

10、输入搜索联想

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>输入搜索联想</title>
    <style type="text/css">
      #app {
        width: 400px;
        height: 400px;
        margin: 50px auto;
      }
      table {
        border-collapse: collapse;
        border: 1px solid black;
        margin-top: 20px;
      }

      thead tr {
        background: #4d83d6;
        color: #fff;
      }
      tr td {
        width: 80px;
        line-height: 30px;
        text-align: center;
      }
      tbody tr:nth-child(2n) {
        background: #efefef;
      }
    </style>
    <script type="text/javascript" src="./js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- TODO：请在下面实现需求 -->
      <span>搜索名字: </span>
      <input placeholder="输入要搜索的名字" v-model="searchQuery" @input="search()"/>
      <table>
        <thead>
          <tr>
            <td v-for="col in columnsCopy">{{col}}</td>
          </tr>
        </thead>
        <tbody>
          <template v-if="searchQuery.length === 0">
            <tr v-for="entry in data">
              <td v-for="col in columns">{{entry[col]}}</td>
            </tr>
          </template>
          <template v-if="searchQuery.length !== 0">
            <tr v-for="entry in searchArray">
              <td v-for="col in columns">{{entry[col]}}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </body>
</html>
<script>
  // TODO：请在下面实现需求
  new Vue({
    el: "#app",
    // 注意：请勿修改 data 选项中的数据！！！
    data: {
      searchQuery: "",
      columns: ["name", "gender", "age"],
      data: [
        {
          name: "rick",
          gender: "male",
          age: 21,
        },
        {
          name: "demen",
          gender: "male",
          age: 26,
        },
        {
          name: "Jack",
          gender: "male",
          age: 26,
        },
        {
          name: "John",
          gender: "female",
          age: 20,
        },
        {
          name: "Lucy",
          gender: "female",
          age: 16,
        },
      ],
      columnsCopy: ["Name", "Gender", "Age"],
      searchArray: []
    },
    methods:{
      search(){
        console.log(this.searchQuery.length);
        this.searchArray = [];
        for (const obj of this.data) {
            if (obj['name'].toLowerCase().includes(this.searchQuery.toLowerCase())) {
              this.searchArray.push(obj);
            } 
        }

      }
    }
  });
</script>