算术验证码

最新推荐文章于 2024-06-12 14:30:53 发布

神仙刘

最新推荐文章于 2024-06-12 14:30:53 发布

阅读量693

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/qq_41936090/article/details/120973363

这个博客展示了如何使用HTML、CSS和JavaScript实现一个算术验证码功能。代码中包含了一个生成随机算术表达式、绘制验证码图片并进行验证的完整流程。用户需要输入图片上显示的算术表达式的结果来完成验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

算术验证码

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>验证码</title>
  <style>
    .codeCanvas {
     
      border: 1px solid #3A71A8;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 验证码 -->
  <div id="canvas-input">
    <input class="canvas-input-class" @blur="checks()" size="large" type='text' v-model="inputCode" placeholder="请输入右侧图案的值"/>
    <canvas class="codeCanvas" ref="checkCode" @click="getCode()"></canvas>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  new Vue({
     
    el: '#app',
    data() {
     
      return {
     
        // 验证码
        inputCode: '', // 输入的值
        checkCode: '', // 图片验证码的值
        expressValue: '', // 表达式的值
        // canvas各种设置
        cvs: {
     
          w: 300, // 给出默认宽度  宽度会在图片绘制时根据长度更改
          h: 40, // 高 与input保持一致
          fontSize: 24, // 字体大小
          str: '+-*', // 符号生成范围
          line: 3 // 噪音线个数
        }
      }
    },
    mounted() {
     
      this.getCode();
    },
    methods: {
     
      // canvas
      // 随机整数生成器，范围[0, max)
      rInt(max) {
     
        return Math.floor(Math.random() * 100000 % max);
      },
      // 生成随机表达式
      rCode() {
     
        let a = this.rInt(100);
        let b = this.rInt(10