js实现验证码功能


Posted in Javascript onJuly 24, 2020

本文实例为大家分享了js实现验证码功能的具体代码,供大家参考,具体内容如下

#前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面

首先在页面中准备一个输入框,一个显示验证码的盒子和一个提交按钮

<body>
 <input type="text">
 <div></div>
 <button>提交</button>
</body>

然后加一些样式

input {
 width: 150px;
 height: 30px;
 outline: none;
 font-size: 24px;
 vertical-align: middle;
}

button {
 outline: none;
 vertical-align: middle;
 cursor: pointer;
}

div {
 display: inline-block;
 width: 90px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 vertical-align: middle;
 background-color: #ddd;
 cursor: pointer;
}

然后大概长这样(有点丑,不过无所谓,主要内容是js)

js实现验证码功能

好,那么开始写js

首先获取这些元素

var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');

然后搞一个字符库和一个保存验证码的字符串

var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str;

那个字符库就直接滚键盘就行了~

因为验证码要多次用到随机数,所以为了方便就先搞一个随机数的函数

function getRandom(l, r) {
 return parseInt(l + Math.random() * (r - l + 1));
}

因为是验证码,所以不能让生成的文本可以直接被选中复制,所以给加一个文本不可选中

div.addEventListener('selectstart', function (e) {
 e.preventDefault();
})

因为验证码不是每次刷新页面就生成一次,看不清是可以换的,要多次生成,所以就把生成验证码的部分写在一个函数里

function run() {
 str = '';
 while (div.hasChildNodes()) {
 div.removeChild(div.firstChild);
 }
 for (var i = 0; i < 4; i++) {
 var span = document.createElement('span');
 span.innerHTML = characters[getRandom(0, characters.length - 1)];
 span.style.display = 'inline-block';
 span.style.fontSize = getRandom(16, 32) + 'px';
 span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
 span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
 str += span.innerHTML;
 div.appendChild(span);
 }
}

大概说明一下这部分,原理大概就是创建4(我搞的是4位的验证码)个span,然后分别随机设置文本、字体大小、字体颜色、平移旋转啥的,然后把span添加到div里成为div的子节点,然后不要忘了让str变量储存一下验证码的字符

每次生成之前先将上一次生成的验证码删掉(即把div里的所有子节点删除掉),并且把str重置

然后页面刷新的时候生成一次(调用一次),每次点击div的时候重新生成一次(每次点击调用一次)

run();
div.addEventListener('click', run);

再给提交按钮添加点击事件:判断验证输入的验证码对不对,然后刷新验证码,并且自动将输入框中的文本清除

btn.addEventListener('click', function () {
 if (input.value.toLowerCase() == str.toLowerCase()) {
 alert('验证成功');
 } else {
 alert('验证失败');
 }
 run();
 input.value = '';
})

判断验证码这里我为了不区分大小写用了toLowerCase()函数将两个字符串都转化成小写之后再做的比较

至此,功能就都实现的差不多了

看效果:

js实现验证码功能

带注释的完整版代码如下:

<!DOCTYPE html>
<html lang="ch-ZN">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>js实现验证码</title>
 <style>
 input {
  width: 150px;
  height: 30px;
  outline: none;
  font-size: 24px;
  vertical-align: middle;
 }

 button {
  outline: none;
  vertical-align: middle;
  cursor: pointer;
 }

 div {
  display: inline-block;
  width: 90px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  background-color: #ddd;
  cursor: pointer;
 }
 </style>
</head>

<body>
 <input type="text">
 <div></div>
 <button>提交</button>
 <script>
 // 获取元素
 var input = document.querySelector('input');
 var btn = document.querySelector('button');
 var div = document.querySelector('div');

 // 搞一个字符库
 var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
 var str; // str用来储存验证码的文本

 // 生成一个在[l,r]范围内的随机整数的函数
 function getRandom(l, r) {
  return parseInt(l + Math.random() * (r - l + 1));
 }

 // 设置文本不可选中
 div.addEventListener('selectstart', function (e) {
  e.preventDefault();
 })

 // 生成验证码的函数
 function run() {

  // 先重置str
  str = '';

  // 删除掉div中的所有子节点
  while (div.hasChildNodes()) {
  div.removeChild(div.firstChild);
  }

  // 生成由四个字符组成的验证码
  for (var i = 0; i < 4; i++) {

  // 创建一个span对象
  var span = document.createElement('span');

  // 设置文本(从字库中随机抽取一个字符)
  span.innerHTML = characters[getRandom(0, characters.length - 1)];

  // 设置一些随机的样式
  span.style.display = 'inline-block';
  span.style.fontSize = getRandom(16, 32) + 'px';
  span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
  span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
  str += span.innerHTML; // str记录字符
  div.appendChild(span); // 将span添加到div中
  }
 }


 run(); // 每次打开/刷新页面时先调用一次
 div.addEventListener('click', run); // 每次点击验证码的时候调用一次

 // 提交按钮点击事件
 btn.addEventListener('click', function () {
  if (input.value.toLowerCase() == str.toLowerCase()) {
  alert('验证成功');
  } else {
  alert('验证失败');
  }
  run();
  input.value = '';
 })
 </script>
</body>

</html>

以上

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 #Javascript
深入了解Vue.js 混入(mixins)
Jul 23 #Javascript
JS实现简单移动端鼠标拖拽
Jul 23 #Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 #Javascript
JS实现鼠标按下拖拽效果
Jul 23 #Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 #Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 #Javascript
You might like
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
django模板结构优化的方法
2019/02/28 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
给导游的表扬信
2014/01/10 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
电影红河谷观后感
2015/06/11 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS