JS实现图片验证码

article/2025/9/20 20:25:00

JS实现图片验证码

新手第一次发博客，还请多多关照

前言

前几天Net老师布置了一道实验作业，用JS实现文字验证码和简单的图片验证码，要求使用阿里巴巴矢量并且至少能更换三张图片完成

一、实验效果如图

解锁之前在这里插入图片描述解锁成功在这里插入图片描述

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、实现步骤

1.body部分

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="iconfont.css"><link rel="stylesheet" href="jichu.css"><script src="scripts/yzm.js"></script>
</head>//文字部分
<body><div class="wenzi"><input type="text" name="yzm"><span id="code_box" >Af3D</span>
</div>//图片部分
<div id="slideVerify"><div class="image"><div class="chip2"></div><div class="chip"></div></div><div class="box" onselectstart="return false;"><div class="bgColor"></div><div class="txt" >请拖动滑块解锁</div><!--给i标签添加上相应字体图标的类名即可--><div class="slider"><i class="icon iconfont iconicon-doubleright-line"></i></div></div>  
</div><script type="text/javascript">var slideVerify = new SlideVerify("img/",4);
</script>//实现文字验证码的js代码
<script>var code_box = document.getElementById("code_box");function refreshCode() {//62个字符 随机选择4位var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',char = '',result = '';for (var i = 0; i < 4; i++) {//随机选择一位  （0,61） 写出0到61的随机的索引数字var code_index = Math.round(Math.random() * 61);//得到随机的索引  取出随机地字符var char = code[code_index];//随机取出的字符 存在几个相同重复的问题 ，而且对于字母，不能区分大小写。// 避免重复的思路是：取出字符之后,和最后的result对比一下，看看里边是不是已经存在了，如果存在本次循环就终止，进行下一次if (result.toUpperCase().indexOf(char.toUpperCase()) > -1)//indexOf() == -1 说明结果里边没有要找的字符 那么 > -1 就是 里边有重复的字符{i--;//为什么会 --？ 因为如果条件成立，那么本轮循环就结束进行下一轮循环（自然i就加1了），那么本轮本应该取出的字符就没有了//到最后会少一个字符 缺席continue;//终止本轮循环 进行下一轮}result += char;}code_box.innerHTML = result;
}
//点击事件
code_box.onclick = refreshCode;
</script></body>
</html>

2.Css格式

1.阿里巴巴矢量格式 iconfont.css

代码如下：

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1604237221659'); /* IE9 */src: url('iconfont.eot?t=1604237221659#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAAB1wAAALSAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCLIF5ATYCJAMMCwgABCAFhG0HUBtZBhEVlJ9kPwvsZpfLcRsUgIxI22wDfXo50zWDZbHB//+Ih//2o903M1/WtKk2bWLEJXFIRNOQPHsoNNqGSEh0vImGvD6xv3prV2dHIW0EMF13bsq7jgeF9uvFi5wOaXVqcfi4AemFFW/5Hu11znLlOHsB4PNcTq8lPr9lOa21beNRL8B4a2B7YpvsAskDwYaxmwge4HkCncatikN/IAimAkwLxM1aJQdmIaIoTr4V6oa1BfEcNG1aJO+BZ/zz8ZcpWkiqDDD3/GVfEc4f9bM7ytz/nCQlIF3OBWcTGasoxKVGz0UUmVmVdUYqalxNrQhpqfj/P5fEuvqgf7xE1ACF3WBRzyZ+1LGA4MfdBglkUGu9J+D2Ak+kSMEVCgcGrvAPvoeOziOHZ+H9k5CitywLdeak0tdL8nB3flKW0YqE3KioNIeapU6/SOXK1lCRiHdH26tZu+x/lvpxEj6SrqJUlo/ZwtMToiKrfH01ZA2iKW1+ioGGN0yiLKtcXlRkTe1Hy5eXTSm2Pwj7mDPBse88dfTjN92rdkffebJwGrwAIJZPyJd//TvepoWHjMD6yuRQAZ93j1f5hLMHBfkBoL0nb/CPpQNrSiwH1lxCCZak3mwtF5LQRa7fGRAY9G26bmRwIaE1kiFpjCFrzdIKaxWVLuuotXbQacW5zV2G3EcRhQWWPdUQ+p0i6fUOWb/3tML6isqo/6j1R0anCyHZs8t8OIzwEG6MJ+w/MEcMEtlZiOIrquI2yss5+4mUTRz6pivnZwxISyzIbzUwS5AUPUzaZehchETxhQc3mjmNbSub3tQc0VeCh3BjPGH/gTlikLQxiwr1V1TFbdRBGgk/kbLpH/qmG0CbNWEQ6VGuyW81MEuQFD1M2ih0LkJqHvXCgxs9IZXGFtaTQzXN9jr/f5ugE6jOkSJHwX/0Ycu3bOGvY1CX/DH1GcvukIzSXDsTsKoAAAA=') format('woff2'),url('iconfont.woff?t=1604237221659') format('woff'),url('iconfont.ttf?t=1604237221659') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1604237221659#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.iconicon_xuanzhong:before {content: "\e66a";
}.iconicon-doubleright-line:before {content: "\e6ee";
}

2.整体格式 jichu.css

代码如下

*{padding: 0;margin: 0;
}.wenzi{position: relative;width: 300px;height: 20px;margin: 0 auto;margin-top: 5px;
}
#code_box{cursor: pointer;
}.image{position: relative;width: 300px;height: 130px;margin: 0 auto;margin-top: 10px; 
}
#slideVerify .chip{width: 40px;height: 40px;position: absolute;
}
#slideVerify .chip2{width: 40px;height: 40px;position: absolute;filter: brightness(0.5) opacity(0.5);/*改变滤镜亮度、透明度 */
}.box{position: relative;width: 300px;height: 40px;margin: 0 auto;margin-top: 5px; background-color: #e8e8e8;box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}.bgColor{position: absolute;left:0;top:0;width:40px;height: 40px;background-color: #75CDF9;
}
.txt{position: absolute;width: 100%;height: 40px;line-height: 40px;font-size: 14px;color: #000;text-align: center;
}
.slider{position: absolute;left:0;top:0;width: 50px;height: 38px;border: 1px solid #ccc;background: #fff;text-align: center;cursor: move;
}
.slider>i{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
}
.slider.active>i{color:green;
}

3.图片验证码的JS代码

代码如下

var SlideVerify = function (path, num) {var slideVerify = document.getElementById("slideVerify"),chip = slideVerify.getElementsByClassName("chip")[0], //图片小块chip2 = slideVerify.getElementsByClassName("chip2")[0],box = slideVerify.getElementsByClassName("box")[0],bgColor = slideVerify.getElementsByClassName("bgColor")[0], //背景色txt = slideVerify.getElementsByClassName("txt")[0], //文本slider = slideVerify.getElementsByClassName("slider")[0], //滑块icon=slideVerify.getElementsByClassName("icon iconfont iconicon-doubleright-line")[0],image = slideVerify.getElementsByClassName("image")[0],successMoveDistance = box.offsetWidth - slider.offsetWidth, //解锁需要滑动的距离downX, //用于存放鼠标按下时的位置offsetX,isSuccess = false, //是否解锁成功的标志，默认不成功distance,imgAt = Math.floor(Math.random() * num)+1;image.style.background = "url(" + path + imgAt + ".jpg)";//二、获取到需要用到的DOM元素var getisSuccess = function () {return isSuccess;}//三、给滑块添加鼠标按下事件slider.onmousedown = mousedownHandler;//3.1鼠标按下事件的方法实现function mousedownHandler(e) {bgColor.style.transition = "";slider.style.transition = "";var e = e || window.event || e.which;downX = e.clientX;//在鼠标按下时，分别给鼠标添加移动和松开事件ry = Math.floor(Math.random() * 80) + 20;rx = Math.floor(Math.random() * 150) + 120;chip.style.background = "url(" + path + imgAt + ".jpg)";chip.style.top = ry + "px";chip.style.backgroundPositionX = -rx + "px";chip.style.backgroundPositionY = -ry + "px";chip2.style.background = "url(" + path + imgAt + ".jpg)";chip2.style.top = ry + "px";chip2.style.left = rx + "px";chip2.style.backgroundPositionX = -rx + "px";chip2.style.backgroundPositionY = -ry + "px";chip2.style["box-shadow"] = "5px 5px 10px black";distance = rx;document.onmousemove = mousemoveHandler;document.onmouseup = mouseupHandler;//四、定义一个获取鼠标当前需要移动多少距离的方法function getOffsetX(offset, min, max) {if (offset < min) {offset = min;} else if (offset > max) {offset = max;}return offset;}//3.1.1鼠标移动事件的方法实现function mousemoveHandler(e) {var e = e || window.event || e.which;var moveX = e.clientX;offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);bgColor.style.width = offsetX + "px";slider.style.left = offsetX + "px";chip.style.left = offsetX + "px";// if (offsetX == successMoveDistance) {//     success();// }//如果不设置滑块滑动时会出现问题（目前还不知道为什么）//e.preventDefault();}//3.1.2鼠标松开事件的方法实现function mouseupHandler(e) {if (offsetX - distance < 8 && offsetX - distance > -8) {success();} else {bgColor.style.width = 0 + "px";slider.style.left = 0 + "px";bgColor.style.transition = "width 0.8s linear";slider.style.transition = "left 0.8s linear";//imgAt = Math.floor(Math.random() * num);//image.style.background = "url(" + path + imgAt + ".jpg)";chip.style.background = null;chip2.style.background = null;chip2.style["box-shadow"] = null;}document.onmousemove = null;document.onmouseup = null;}//五、定义一个滑块解锁成功的方法function success() {isSuccess = true;txt.innerHTML = "解锁成功";bgColor.style.backgroundColor = "lightgreen";slider.className = "slider active";icon.className = "icon iconfont iconicon_xuanzhong";bgColor.style.width=successMoveDistance+"px";slider.style.left=successMoveDistance+"px";//滑动成功时，移除鼠标按下事件和鼠标移动事件slider.onmousedown = null;document.onmousemove = null;image.onmousedown = "null";//成功解锁后的回调函数setTimeout(function () {alert("解锁成功！");}, 100);}}
return getisSuccess;
};

总结

第一次发博客，好多地方都不会用，还请多多关照

http://chatgpt.dhexx.cn/article/lkyweN9P.shtml

相关文章

springboot实现图片验证码登录

springboot实现图片验证码登录

之前也看到网上有关于验证码的项目&#xff0c;但是自己试了几个不太行&#xff0c;没有较完整的项目&#xff0c;于是东拼西凑加上自己又稍微添加了一点功能。 现在这个项目可以实现的功能&#xff1a; 基于图片验证码登录&#xff0c;验证码输入正确可以跳转到成功页面&…
阅读更多...
apifox图片验证码显示

apifox图片验证码显示

添加后置脚本 脚本内容如下&#xff1a; var resp {response: pm.response.json() } let imgresp.response.data let template <img src"{{img}}" /> pm.visualizer.set(template,img)在此查看图片验证码
阅读更多...
JS实现图片验证码功能

JS实现图片验证码功能

JS实现图片验证码功能 点关注不迷路&#xff0c;欢迎再来&#xff01;以下代码可以直接copy运行&#xff0c;不需要引入jquery.jar 1. html代码 <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-8"%> &l…
阅读更多...
node实现图片验证码

node实现图片验证码

使用node来做一个图片验证码 做一个下面的小案例&#xff0c;应该能够很快的理解。 首先我们需要创建一个项目。 使用express搭建一个简单的服务器。 安装express。 yarn add express在app文件下这样配置。 const express require(express) const app express() app.use…
阅读更多...
Java实现图片验证码

Java实现图片验证码

我们在一些网站注册的时候&#xff0c;经常需要填写以上图片的信息。 这种图片验证方式是我们最常见的形式&#xff0c;它可以有效的防范恶意攻击者采用恶意工具,调用“动态验证码短信获取”接口进行动态短信发送, 导致接入用户短信被刷&#xff0c;造成账号余额损失。同时这种…
阅读更多...
图片验证码

图片验证码

通过下面这个方法可以得到随机验证码&#xff1a; public String getIdentifyCode(){//得到验证码&#xff08;数字大小写字母&#xff09;String str"";Random randnew Random();for(int i0;i<6;i){switch(rand.nextInt(3)){case 0:int a(int) (Math.random()*26…
阅读更多...
图片验证码破解

图片验证码破解

2.8图片验证码破解 在测试web平台时&#xff0c;难以避免的就是登录&#xff0c;登录的时候就会需要输入验证码&#xff01;有的是图型验证码有的是滑动验证码&#xff0c;那么在自动化中如何破解验证码&#xff1f;这里只介绍简单的图片验证码。 一般来说破解这种图形验证码…
阅读更多...
Java实现图片验证码功能

Java实现图片验证码功能

文章目录 一、背景二、实现步骤1、maven中加入依赖2、CaptchaController.java3、生成验证码配置4、CaptchaService.java接口5、CaptchaServiceImpl.java实现类6、增加验证码校验涉及文件 一、背景 在实现登录功能时&#xff0c;为了防止特定的程序暴力破解&#xff0c;一般为了…
阅读更多...
python 图片验证码

python 图片验证码

1.图片验证码第一步 # 导入绘图库 from PIL import ImageDraw, Image, ImageFont 2.生成图片验证类 # 图片验证类 class ImgCode(BaseHandler):# 定义随机颜色实例方法def get_random_color(self):R random.randrange(255)G random.randrange(255)B random.randrange(255)…
阅读更多...
java 生成图片验证码

java 生成图片验证码

https://vimsky.com/zh-tw/examples/detail/java-class-javax.servlet.ServletOutputStream.html 开发过程中&#xff0c;需要服务端返回验证码图片给前台&#xff0c;想想该如何实现呢&#xff1f; 1、字节流的输入输出 2、生成一个验证码&#xff0c;自定义字母数字混合实现…
阅读更多...
C# 图片验证码简单例子

C# 图片验证码简单例子

C# 图片验证码简单例子 一、简述 记--使用PictureBox绘制验证码。 例子&#xff1a;外链:https://wwm.lanzouq.com/b0cafckej 密码:cxxn 二、效果 三、工程结构 四、源文件 Form1.cs文件 using System; using System.Drawing; using System.Windows.Forms;namespace Verifi…
阅读更多...
springboot图片验证码

springboot图片验证码

前言: 大家好&#xff01;我是小小&#xff01;今天我们用五分钟来用springboot实现我们常用的图形验证码功能模块&#xff01; 用户登录几乎是一个线上系统必不可少且使用相对比较频繁的一个模块&#xff0c;为了防止恶意暴力尝试&#xff0c;防止洪水攻击、防止脚本自动提交…
阅读更多...
JavaWeb总结之通过Servlet生成验证码图片

JavaWeb总结之通过Servlet生成验证码图片

项目地址:https://github.com/zhangzeminzZ/ServletStudy 目录 1.BufferedImage类介绍2.在Form表单中使用验证码图片3.服务器端对form表单提交上来的验证码处理 1.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类 创建一个DrawImage Servlet&#xff0c;用…
阅读更多...
网站安全检测之图片验证码

网站安全检测之图片验证码

2019独角兽企业重金招聘Python工程师标准>>> 在对网站安全进行整体的安全检测的时候&#xff0c;用户登陆以及用户留言&#xff0c;评论&#xff0c;设置支付密码&#xff0c;以及一些网站功能方面都会用到图片验证码&#xff0c;针对于验证码我们SINE安全对其进行了…
阅读更多...
实现图片验证码【详细代码】

实现图片验证码【详细代码】

实际开发过程中经常遇到要实现图片验证码来防止外部使用脚本刷接口&#xff0c;所以说图片验证码是很有必要的一个小功能。 html <!--- 注册页面整增加图形验证码功能,这里为了更贴近企业级业务&#xff0c;我们在注册页面整增加图形验证码功能--> <div class"u…
阅读更多...
图片验证码实现的几种方式

图片验证码实现的几种方式

一、Google Kaptcha 1、简介 kaptcha 是一个非常实用的验证码生成工具。有了它&#xff0c;你可以生成各种样式的验证码&#xff0c;因为它是可配置的。kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.KaptchaServlet&#xff0c;生成一个图片。同时将生成的验证码…
阅读更多...
ajax请求后台返回数据

ajax请求后台返回数据

功能介绍&#xff1a;最近学习在做一个新闻管理系统&#xff0c;其中有一个模块做的是一个排行榜功能&#xff0c;分为东部联盟和西部联盟&#xff0c;当我点击他的时候&#xff0c;排行的数据会发生变化。由于这一块怎么整个页面中的一小块&#xff0c;所以使用的是局部刷新页…
阅读更多...
如何取消ajax请求

如何取消ajax请求

之前在面试的时候&#xff0c;被面试官问到了如何取消ajax请求&#xff0c;然鹅并不知道&#xff0c;被刷之后痛定思痛&#xff0c;总结了原生XHR、jquery、axios取消ajax请求的方法。 原生XHR 对于原生XHR对象来说&#xff0c;取消的ajax的关键是调用XHR对象的.abort()方法 …
阅读更多...
HTML AJAX请求调用

HTML AJAX请求调用

html ajax请求 ------------------温故而知新,可以装逼矣-------------------- 大佬提出需求&#xff0c;访问html文件&#xff0c;动态响应文章内容 作为一个纯正&#xff08;半吊子&#xff09;的JAVA后端写太多前后端分离的项目&#xff0c;太久没接触前端知识。头都是炸的…
阅读更多...
ajax请求五个步骤！

ajax请求五个步骤！

ajax请求五个步骤&#xff01; 今天 咱们讲一讲Ajax请求五个步骤&#xff01; 1.创建XMLHttpRequest异步对象 var xhr; if (window.XMLHttpRequest){// code for IE7, Firefox, Chrome, Opera, Safarixhrnew XMLHttpRequest();} else{// code for IE6, IE5xhrnew ActiveXObje…
阅读更多...
推荐文章

Copyright @ 2022~2023