【蓝桥杯】图片验证码

最新推荐文章于 2024-07-22 08:55:10 发布

万花镜whj

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量697

点赞数 11

文章标签：蓝桥杯 vue.js

本文链接：https://blog.csdn.net/weixin_62613460/article/details/139275040

版权

仅作记录之用

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>图片验证码</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/axios.js"></script>
</head>

<body>
  <div id="app">
    <header>
      <h1>图片验证码</h1>
    </header>
    <div class="container">
      <form action="" @submit.prevent="">
        <label for="id">账号:</label>
        <input type="text" name="id">
        <label for="password">密码:</label>
        <input type="password" name="password">
        <div class="box" v-if="!isOk">
          <div class="checkbox" @click="startCheck"></div>
          <span>我是人类</span>
        </div>
        <button id="login" type="submit" v-if="isOk">登录</button>
      </form>
    </div>
    <div class="modal" v-if="showModal">
      <div class="head">
        <h2>请点击所有包含{{ hint }}的图片</h2>
        <p>如果没有，请点击"跳过"</p>
      </div>
      <div class="images">
        <div class="image-container" v-for="(image, index) in images" @click="choosePic($event, image)">
          <img :src="image.path">
        </div>
      </div>
      <div class="footer">
        <img src="images/redo.svg" @click="startCheck">
        <button id="check-btn" @click="check">{{selectCount!=0?"提交":"跳过"}}</button>
      </div>
    </div>
    <div class="toast" v-if="showToast">
      {{ toastContent }}
    </div>
  </div>
</body>

<script>
  var vm = new Vue({
    el: "#app",
    // TODO: 你可以根据需要添加新的data或computed属性
    data: {
      category: '',
      toastContent: '',
      allImages: [],
      images: [],
      showToast: false,
      showModal: false,
      //
      selectCount: 0,
      rightCount: 0,
      choose: [], //已选
      isOk: false,
    },
    created() {
      axios.get("./js/data.json").then(res => {
        this.allImages = res.data;
      })
    },
    computed: {
      hint() {
        return this.category === 1 ? '果汁' : '猫咪'
      },
    },
    methods: {
      // 展示验证图像模态框，随机选择一个问题类型和九张图片
      startCheck() {
        this.showModal = true;
        this.category = Math.random() > 0.5 ? 1 : 2;
        this.images = pick(this.allImages.filter(i => i.category === this.category), 9)
        this.selectCount = 0
        this.rightCount = 0
        this.choose = []
      },
      // TODO: 请修改以下代码实现用户选择正确与否的判断逻辑，可以添加新的方法
      check() {
        let result = true;
        let num = 0
        this.images.forEach(ele => {
          if(ele.type == true){
            num++
          }
        });
        //判断实际选的里面对的数量与真正对的数量是否一致&&判断实际选的与真正对的数量是否一致
        if(num == this.rightCount && num == this.choose.length){
          result = true
          this.isOk = true
        }else{
          result = false
          this.isOk = false
        }
        // 根据用户选择的正确与否展示相应的toast
        if (result) {
          this.toastContent = '验证成功'
          this.showModal = false;
        } else {
          this.toastContent = '验证失败，请重试'
        }
        // 展示提示用户验证情况的Toast
        this.showToast = true;
        setTimeout(() => {
          this.showToast = false;
        }, 1500)
      },
      //选图-添加的
      choosePic(e, image){
        // console.log(e)
        if(e.currentTarget.classList.contains("selected")){
          e.currentTarget.classList.remove("selected")
          this.selectCount--
          if(image.type == true)this.rightCount--;
          this.choose = this.choose.filter(item => item.path != image.path)
        }else{
          e.currentTarget.classList.add("selected")
          if(image.type == true)this.rightCount++;
          this.selectCount++
          this.choose.push(image)
        }
      }

    },

  });

  // 从数组中随机选择指定数量的元素
  function pick(array, number) {
    const s = new Set();
    for (let i = 0; i < number; i++) {
      const num = Math.floor(Math.random() * 20);
      if (s.has(num)) {
        i--;
      } else {
        s.add(num)
      }
    }
    return Array.from(s).map(n => array[n]);
  }
</script>

</html>

万花镜whj

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【蓝桥杯】图片验证码

仅作记录之用<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>图片验证码</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> &lt
复制链接

扫一扫