原生简单验证码实现

已于 2022-09-26 20:49:37 修改
阅读量323 收藏
点赞数
分类专栏： javascript 文章标签： javascript
于 2022-09-26 20:45:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn727232616/article/details/127060554
版权

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>code</title>

  </head>

  <body>

    <canvas id="mycanvas"></canvas><br/><br/>

    <input type="button" id="mybutton" value="刷新" οnclick="code(options)"/>

    <script>

      var options={ canvasld:'mycanvas', width:150, height:50, txt:''}

      // 生产验证码

       function produceCode(options) {

        var code=''

        var random=new Array(0,1,2,3,4,5,6,7,8,9,

        'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z',

        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z')

        for(var i=0;i<4;i++){

        var index=Math.floor(Math.random()*62);

        code+=random[index];

      }

       options.txt=code;

       

      }

      // 产生随机数字

       function randomNum(min,max){

        return Math.floor(Math.random()*(max-min)+min);

      }

      //  产生随机颜色

      function randomColor(min,max){

      var r=randomNum(min,max);

      var g=randomNum(min,max);

      var b=randomNum(min,max);

      return"rgb("+r+","+g+","+b+")" }

      // /生产验证码背景

      function code(options) {

        produceCode(options);

        console.log(options.txt)

       var canvas= document.getElementById(options.canvasld);

       canvas.width=options.width || 150;  //画布的宽

       canvas.height=options.height || 50;//画布的高

      var ctx=canvas.getContext("2d"); // 创建一个canvas对象

      ctx.textBaseline="middle";

      ctx.fillStyle=randomColor(60,255);

      ctx.fillRect(0,0,canvas.width,canvas.height);

       for(var i=0;i<options.txt.length;i++) {

       var txt=options.txt.charAt(i);

       ctx.font='50px SimHei';

      ctx.fillStyle=randomColor(60,180);  

      //  *随机生成字体颜色*/

      ctx.shadowOffsetY= randomNum(-3,3);

      ctx.shadowBlur =randomNum(-3,3);

      ctx.shadowColor ="rgba(0,0,0,0.3)";

      var x= options.width /(options.txt.length+1)*(i+1);

      var y= options.height /2;

     var deg= randomNum(-30,30);

      // *设置旋转角度和坐标原点*/

     ctx.translate(x,y);

      ctx.rotate(deg *Math.PI /180);

     ctx.fillText(txt,0,0);

    //  *恢复旋转角度和坐标原点/

     ctx.rotate(-deg* Math.PI /180);

     ctx.translate(-x,-y);

    }

    // *1~4条随机干扰线随机出现*/

    for (var i= 0;i <randomNum(1,2);i++){

      ctx.strokeStyle =randomColor(40,180);

      ctx.beginPath();

      ctx.moveTo(randomNum(0,options.width),randomNum(0,options.height));

      ctx.lineTo(randomNum(0,options.width),randomNum(0,options.height));

      ctx.stroke();

    }

      // *绘制干扰点/

      for (var i= 0;i<options.width /19;i++){

        ctx.fillStyle =randomColor(0,255);

        ctx.beginPath();

        ctx.arc(randomNum(0,options.width),randomNum(0,options.height),1,0,2 *Math.Pl);

         ctx.fill();

        }

      }

      code(options)

        // window.οnlοad=function() {

        //   code(options)

        // }

    </script>

  </body>

</html>

纯前端实现验证码的功能
du_5pet的博客
10-24 559
完整页面demo如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #code { display: none...
纯前端实现 传统验证码功能
热门推荐
m0_48940868的博客
11-15 1万+
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客 3 篇
前端验证码功能
aodianzhi4482的博客
10-10 410
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 ...
SpringSecurity——如何实现验证码登录页面
最新发布
gege_0606的博客
03-17 1738
验证码生成与前端显示前端页面通过请求验证码图片。生成验证码（这里使用带扭曲干扰的验证码），并将验证码字符串存入 Session，再将验证码图片通过 IO 流输出给前端。请求访问控制Spring Security 配置中允许/toLogin（登录页面）和（验证码图片接口）未登录访问。其他请求都需要经过认证后才能访问。登录请求及验证码校验当用户提交登录表单（提交至/login）时，自定义的会首先介入：从请求中获取用户输入的验证码，并从 Session 中获取正确验证码。
jQuery CANVAS验证码
withoutfear的博客
10-01 275
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> *{ ma.
Vue仿淘宝/12306滑动验证码
weixin_45522694的博客
01-02 1007
基于vue仿淘宝/12306滑动验证码 12306或淘宝等滑动验证码会采集用户的操作数据，环境数据等等，通过算法加密成一个字符串，提交到服务器分析，判断是不是人工在操作。 我这里写的只是模仿了样式，并没有进行那些复杂的操作，所以并不安全（不能判断人还是机器） 注：touch事件和mouse事件不同，和获取clientX在移动端和pc端也不同！！！所以分PC端和移动端 一、PC端（Vue组件 注...
前端验证码实现
qq_45225833的博客
03-24 1375
功能：php后端生成随机验证码，并生成验证码图片，前端img的src属性指向该文件获取图片
原生js实现验证码功能
10-20
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的验证码功能。验证码是网页安全的重要组成部分，用于防止自动机器人和恶意脚本进行非法操作。以下就是实现这一功能的关键知识点： 1. **HTML 结构**：...
原生js实现数字字母混合验证码的简单实例
10-23
标题中提到的“原生js实现数字字母混合验证码的简单实例”表示这是一篇关于使用JavaScript编程语言实现一个包含数字和字母的验证码生成器的教程。验证码（CAPTCHA）是一种区分用户是计算机还是人的公共全自动程序，...
使用 ArkTS 语言开发的实现获取 TOTP 验证码的原生鸿蒙应用
12-06
使用 ArkTS 语言开发的实现获取 TOTP 验证码的原生鸿蒙应用 TickAuth，通过高效简洁的设计，为用户提供了安全可靠的方式获取动态验证码。随着技术的不断发展和用户需求的日益增加，这样的应用将会在未来的网络安全...
Flutter 完美的验证码输入框实现
08-19
在正常情况下，出现验证码的页面会弹出键盘，实现该效果很简单，指需给TextField指定自动获取焦点即可。如果页面还有其他输入框，那么就不一定要获取焦点了，因此是否获取焦点需要交给用户来决定。 VerificationBox...
JS笔记-前端实现验证码功能
IT1995的博客
01-31 6727
程序运行截图如下： 当输入错误验证码点击登录后 输入正确验证码后，就可以跳转了。 这里主要是使用JS生成了验证码 程序结构如下 源码如下： vail.js //高、宽、字符大小、字符集 var w = 80; var h = 24; var fontsize = h - 6; var str = "0123456789abcdefABCDEF"; functio...
JS+HTML实现验证码功能
02-18
html+js+css实现简单验证码功能,与后台技术分离,各种后台语言都能适用
手机短信验证前端demo
11-27
手机短信验证前端前端代码 整体界面简单美观 好用 如果颜色不符可进行修改
前端使用验证码功能
ju__ju的博客
06-15 1280
在登录或者找回密码的过程中,经常会遇到防止机器人大量注册而使用验证码功能,在本项目中是由前端完成验证码功能.将这个封装为了一个组件,按需引用就可以了. <template> <div class="ValidCode disabled-select" title="点击切换" :style="`width:${width}; height:${height}`" @click="refreshCode"> <span v-for="(item, index) i
纯前端实现的验证码
weixin_43909743的博客
11-06 1853
纯前端实现的验证码
使用Vue实现前端随机验证码
weixin_46421519的博客
01-17 907
使用Vue实现前端随机验证码 第一种方法，span，不绘制干扰点 <template> <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode"> <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{ite
前端常见的【手机验证码】【图片验证码】功能实现-前后端配合实现
Sabrina_cc的博客
11-02 8937
人们总喜欢”甜“，而忘记”先苦后甜“ 一般在系统的注册、登录、反馈等页面需要验证用户个人身份信息，就需要用到【手机验证码】和【图片验证码】功能。 目录 一. 手机验证码功能 1. 实现思路 2. 后端接口 3. 前端实现 二、图片验证码功能 1. 实现思路 2. 后端接口 3. 前端实现 一. 手机验证码功能 1. 实现思路 页面需要实现找回密码功能，点击”获取验证码“,调用后端提供的接口，在60秒内提交找回密码请求，将数据表单和验证码发送给后端，后端校验是否为最新的验证码...
精心整理前端登录验证码实现
qq_40677590的博客
06-08 940
最近在做登录的时候需要在界面上开发一个验证码功能，防止恶意登录，先看看效果图： 利用canvas实现了一个简单的验证码判别功能： 点击验证码刷新验证码 输入忽略大小写 输入空字符串自动tirm 附上github的demo代码：点击这里 ...
原生js实现验证码
05-25
可以使用原生 JavaScript 实现验证码。以下是一个简单的例子： HTML： ```html <label for="captcha">验证码：</label> <input type="text" id="captcha"> <canvas id="captchaCanvas"></canvas> <button id="refreshCaptcha">刷新验证码</button> ``` JavaScript： ```javascript var canvas = document.getElementById("captchaCanvas"); var ctx = canvas.getContext("2d"); // 生成随机验证码 function generateCaptcha() { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var captchaLength = 6; var captcha = ""; for (var i = 0; i < captchaLength; i++) { captcha += chars.charAt(Math.floor(Math.random() * chars.length)); } return captcha; } // 绘制验证码 function drawCaptcha() { var captcha = generateCaptcha(); canvas.width = 100; canvas.height = 40; ctx.font = "bold 20px sans-serif"; ctx.fillStyle = "#000"; ctx.fillText(captcha, 25, 25); // 添加干扰线 for (var i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.strokeStyle = "#000"; ctx.stroke(); } return captcha; } // 刷新验证码 document.getElementById("refreshCaptcha").addEventListener("click", function() { var captchaInput = document.getElementById("captcha"); captchaInput.value = ""; var captcha = drawCaptcha(); }); // 验证输入的验证码是否正确 document.getElementById("captcha").addEventListener("input", function() { var captchaInput = document.getElementById("captcha"); if (captchaInput.value.length == 6 && captchaInput.value.toUpperCase() == captcha) { alert("验证码正确！"); } }); ``` 这个例子首先定义了一个 `generateCaptcha` 函数来生成随机的验证码，然后定义了一个 `drawCaptcha` 函数来绘制验证码，并在验证码中添加了一些干扰线以增加难度。最后使用 `addEventListener` 为刷新按钮和验证码输入框添加事件监听器。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值