Example of implementing dynamic verification code on a page using JavaScript
introduction:Nowadays, many dynamic verification technologies are added when users log in or register to prevent program attacks. Generally, this is achieved by asking users to enter a randomly generated verification code. I wrote one myself that does not interact with the backend, but verifies it on the front end and sends it out for everyone to see. Effect picture:
Implementation ideas:
Writing the ConstructorText Constructor
//Text constructor function Text(o){
this.x=0,//x coordinate this.y=0,//y coordinate this.text='',//content this.font=null;//font this.textAlign=null;//alignment
this.init(o);
}
Text.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
Text.prototype.render=function(context){
this.ctx=context;
innerRender(this);
function innerRender(obj){
var ctx=obj.ctx;
ctx.save()
ctx.beginPath();
ctx.translate(obj.x,obj.y);
if(obj.font){
ctx.font=obj.font;
}
if (obj.textAlign) {
ctx.textAlign=obj.textAlign;
}
if(obj.fill){//Is it filled? obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
ctx.fillText(obj.text,0,0);
}
ctx.restore();
}
return this;
}Line Segment Constructor
//Straight line construction function Line(ctx,o){
this.x=0,//x coordinate this.y=0,//y coordinate this.startX=0,//starting point x position this.startY=0, //starting point y position this.endX=0,//end point x position this.endY=0;//end point y position this.thin=false;//Set thinning coefficient this.ctx=ctx;
this.init(o);
}
Line.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
Line.prototype.render = function() {
innerRender(this);
function innerRender(obj){
var ctx=obj.ctx;
ctx.save()
ctx.beginPath();
ctx.translate(obj.x,obj.y);
if(obj.thin){
ctx.translate(0.5,0.5);
}
if(obj.lineWidth){//Set line width ctx.lineWidth=obj.lineWidth;
}
if (obj.strokeStyle) {
ctx.strokeStyle=obj.strokeStyle;
}
//Draw a line ctx.moveTo(obj.startX, obj.startY);
ctx.lineTo(obj.endX, obj.endY);
ctx.stroke();
ctx.restore();
}
return this;
}Get verification code by length
//Generate random alphanumeric characters according to the specified length Verifiable.prototype.randomWord=function(range){
var str = "",pos,
arr = ['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<range; i++){
pos = Math.round(Math.random() * (arr.length-1));
str += arr[pos];
}
return str;
}Draw Text
//Draw text Verifiable.prototype.drawText=function(){
var that=this;
var count = 4; //Number of characters var textW = 40; //Width of the text var code=this.code = this.randomWord(count);
var codeArr = code.split("");
var text,x ;
codeArr.forEach(function(c,i){
x = that.w/count*i+textW/2;
//Draw text text = new Text({
x:x,
y:textW-10,
text:c,
font:'30px ans-serif',
textAlign:'center',
fill:true,
fillStyle:'#412D6A'
});
that.renderArr.push(text);
})
}The effect at this time:
Draw interference lines
//Draw interference line Verifiable.prototype.interfering=function(){
var count = this.lineCount=20,line,ctx=this.ctx;
var startX,
startY,
endX,
endY,
color;
for(var i=0;i<count;i++){
//Random start coordinate, end coordinate, color startX = _.getRandom(0,140);
startY = _.getRandom(0,40);
endX = _.getRandom(0,140);
endY = _.getRandom(0,40);
color = _.getRandomColor();
//Define a straight line line = new Line(ctx,{
x:0,
y:0,
startX:startX,
startY:startY,
endX:endX,
endY:endY,
strokeStyle:color
})
this.renderArr.push(line);
}
}The effect is as follows:
Add page layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>verifiable</title>
<style>
#box{
width:140px;
height:40px;
position:absolute;
}
#inputDiv{
width:220px;
position:absolute;
margin:0 auto;
left:0;
top:30px;
right:0;
bottom:0;
}
#container{
width:220px;
height:60px;
position:absolute;
margin:0 auto;
left:0;
top:60px;
right:0;
bottom:0;
}
.refresh{
position:absolute;
left:140px;
}
</style>
</head>
<body>
<div id='inputDiv'>
Verification code: <input size=10 id='codeInput'><img id='stateImg' style="vertical-align: middle;width:20px"></img>
</div>
<div id="container">
<div id='box'></div>
<a href="javascript:void 0" class="refresh" onclick="refresh()">Change one</a>
</div>
</body>
<script type="text/javascript" src='verifiable.js'></script>
<script type="text/javascript">
var box = document.getElementById('box');
var stateImg = document.getElementById('stateImg');
var codeInput = document.getElementById('codeInput');
verifiable.init(box,codeInput,stateImg);
//Change a picture function refresh(){
verifiable.renderArr.length=0;
verifiable.draw();
}
</script>
</html>Add input box event
//Input box event Verifiable.prototype.inputValid=function(input){
var val = input.value;
if(val.length<4) return ;
if(this.code==val){
console.log('suc');
this.result(0);
}else{
this.result(1);
}
}Add success and failure verification
//Processing results Verifiable.prototype.result=function(result){
var codeInput = this.codeInput;
var stateImg = this.stateImg;
if(result==0){//Success stateImg.src="./images/suc.jpeg";
codeInput.readOnly=true;
}else {//Failure codeInput.readOnly=false;
stateImg.src="./images/fail.jpeg";
this.renderArr.length=0;
this.draw();
}
}Finish
Code Download This concludes this article about the implementation example of JavaScript to implement dynamic verification code on the page. For more relevant JavaScript dynamic verification code content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Linux kernel device driver kernel time management notes
>>: Detailed explanation of how to access MySQL database remotely through Workbench
Recommend
Detailed description of nginx from compilation and installation to configuration file description in Chinese
This article introduces Nginx from compilation an...
Comparison between Redis and Memcache and how to choose
I've been using redis recently and I find it ...
How to use CSS to fill the parent container div with img images and adjust the container size
When multiple images are introduced into a page, ...
Solution to MySQL 8.0 cannot start 3534
MySQL 8.0 service cannot be started Recently enco...
How to query and update the same table in MySQL database at the same time
In ordinary projects, I often encounter this prob...
JS implements WeChat's "shit bombing" function
Hello everyone, I am Qiufeng. Recently, WeChat ha...
Pure CSS to achieve click to expand and read the full text function
Note When developing an article display list inte...
Teach you how to get the pointer position in javascript
The method of obtaining the position of the point...
Windows Server 2016 Quick Start Guide to Deploy Remote Desktop Services
Now 2016 server supports multi-site https service...
Simple steps to encapsulate components in Vue projects
Table of contents Preface How to encapsulate a To...
How to install PHP7 Redis extension on CentOS7
Introduction In the previous article, we installe...
Some tips for using less in Vue projects
Table of contents Preface 1. Style penetration 1....
MySQL 8.0.11 MacOS 10.13 installation and configuration method graphic tutorial
The process of installing MySQL database and conf...
Detailed explanation of MySQL backup process using Xtrabackup
Table of contents 01 Background 02 Introduction 0...
How to use MySQL's geometry type to handle longitude and latitude distance problems
Create a table CREATE TABLE `map` ( `id` int(11) ...