js 做的随机8位验证码
开发思路:
画出放置验证码的模块、一个写有“看不清…”的小块,以及输入验证码的文本框
获取各个模块
封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文。每种类型出现的可能性为25%。
随机数字在0-9,之间。对Math.ramand()向下取整。
随机大小写字母使用fromCharCode() 方法:将 Unicode 编码转为一个字符,例如:
var n = String.fromCharCode(65);
cosole.log(n);
//输出j结果为A
大写字母(65-91) 小写字母(97-123)
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
随机中文,声明变量letter放置中文字符串,使用charAt()随机在letter中获得某个汉字。
var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念";
var s = letter.charAt(Math.floor(Math.random() * letter.length));
给每位验证码设随机的颜色,字体大小,相对文本位置,旋转角度。给颜色封装一个函数,使用十六进制颜色(如:#ffffff)
//随机颜色
function fontcolor(){
var s1="";
for(var k=0;k<6;k++){
var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
var m=z[Math.floor(Math.random() * z.length)];
s1 +=m;
}无锡人流多少钱 http://mobile.bhnfkyy.com/
return "#"+s1;
}
随机位置和随机旋转角度的方法相同
随机位置可能为向上下左右偏移 8px, 随机旋转角度可能为绕着z轴旋转(±45度)。
提前声明一个空字符串 str 让每位验证码用字符串连接起来.
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
str+=""+s+"";
arr+=s;
让8位验证码出现在第一个大模块中的innerHTML中。
给写有“看不清”的span标签添加点击事件,点击时,调用函数Yan_ma,刷新验证码。
如果输入的验证码不正确,则弹出“验证成功”,否则弹出“验证失败”。
看不清...
验证
js 做的随机8位验证码的更多相关文章
- js+canvas画随机4位验证码
啥都不说了,复制代码吧!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- [Python]random生成随机6位验证码
#!/usr/bin/env pyhton # coding:utf-8 # @Time : 2020-02-16 10:07 # @Author : LeoShi # @Site : # @File ...
- 用js做数字字母混合的随机四位验证码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 用 JS 做一个数独游戏(一)
用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...
- JavaScript 编写随机四位数验证码(大小写字母和数字)
1.JavaScript编写随机四位数验证码,用到的知识点为: a.Math对象的随机数:Math.random() b.Math对象的取整 :Math.floor() c.处理所需要的下标个数 ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- js加密后台加密解密以及验证码
该文档为转载内容: 加密解密 1 前端js加密概述 2 前后端加密解密 21 引用的js加密库 22 js加密解密 23 Java端加密解密PKCS5Padding与js的Pkcs7一致 验证码 1 ...
- 【重点突破】——Canvas技术绘制随机改变的验证码
一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...
- js做小数运算精度问题
当js做小数运算时存在bug,大概是因为二进制和十进制转换之间的关系. bug如图 解决方案 1.运算结果后,乘以100再除以100.网上推荐这种方法但是乘以1000再除以1000依然存在精度问题 2 ...
随机推荐
- PAT甲级——1130 Infix Expression (25 分)
1130 Infix Expression (25 分)(找规律.中序遍历) 我是先在CSDN上面发表的这篇文章https://blog.csdn.net/weixin_44385565/articl ...
- [题解]luogu_P2613有理数取余
#include<bits/stdc++.h> #define ll long long using namespace std; ; inline int read(){ ,fix=;c ...
- 洛谷 P1031 均分纸牌
P1031 均分纸牌 这道题告诉我们,对于实在想不出算法的题,可以大胆按照直觉用贪心,而且在考试中永远不要试着去证明贪心算法,因为非常难证,会浪费大量时间. (这就是你们都不去证的理由??) 这道题贪 ...
- 异步加载js文件的方法
# 异步加载js文件 - js的加载默认是同步的,因为js是单线程执行,只能完成一件再执行下一件. - 一些外部引入的js文件可以因为文件太大,在加载资源的过程中会影响dom元素的加载,影响了用户体验 ...
- 调试PHP
echo "<br/>"; print_r($array);
- String的内存和intern()方法
一.关于常量池 字符串在Java中用的非常得多,Jvm为了减少内存开销和提高性能,使用字符串常量池来进行优化. 在jdk1.7之前(不包括1.7),Java的常量池是在方法区的地方,方法区是一个运行时 ...
- css与JS知识整理
CSS知识 CSS选择器:基础中的核心,选择器指明了{}中“样式”作用的对象,也就是“样式”作用于网页中的哪些元素. CSS选择器类型:一共三大类. 基础选择器 属性选择器 组合选择器 ...
- Y2165终极分班考试题。
第一题答案:D 2.下面关于SQLServer中视图的说法错误的是:C 答案:视图是数据中存储的数据值得集合. 3.在JAVA中,关于日志记录工具log4j的描述错误的是:D 答案:log4j个输出级 ...
- 使用JDBC进行简单的增删改查
JDBC为java的基础.用jdbc实现对数据库的增删改查的功能是程序员的基本要求.本例以mysql为例,首先要使用本例需要添加mysql-connector-java-5.1.7-bin.jar包. ...
- chrome浏览器之网络面板
这篇指导向你展示怎样检测网络张状况或者在chrome开发工具的网络面板中尽可能的优化网页. 排列的或受阻的请求 症状:同时发出六个请求.之后有一系列的请求排队或受阻.一旦最先的六个请求中有一个响应结束 ...