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
Solve the problem of HTML automatic formatting after saving in vscode
The version of vsCode has been updated in recent ...
Pure CSS to achieve click to expand and read the full text function
Note When developing an article display list inte...
Tutorial on how to connect and use MySQL 8.0 in IDEA's Maven project
First, let's take a look at my basic developm...
How to modify create-react-app's configuration without using eject
1. Why is eject not recommended? 1. What changes ...
Some suggestions for ensuring MySQL data security
Data is the core asset of an enterprise and one o...
Detailed tutorial on building a private Git server on Linux
1. Server setup The remote repository is actually...
Detailed explanation of the latest IDEA process of quickly deploying and running Docker images
background Use idea with docker to realize the wh...
Linux echo text processing command usage and examples
The description of echo in the Linux help documen...
Docker installation and configuration command code examples
Docker installation Install dependency packages s...
SSM VUE Axios Detailed Explanation
Table of contents How to display SQL log? ? Descr...
How to use iframe to apply the data of other web pages while maintaining compatibility
Below is the code that Shiji Tiancheng uses to ca...
Alibaba Cloud ECS Server Getting Started Process (Must-Read Tutorial for Newbies)
1. Alibaba Cloud selects the appropriate cloud se...
How to install and uninstall open-vswitch in Linux
1. Compile and install ovs from source code: Inst...
How to solve the problem of -bash: /usr/bin/yum: No such file or directory after typing yum in linux
After entering yum in linux, the prompt: -bash: /...
The contents of the table in HTML are displayed horizontally and vertically in the center
Specify in CSS style file #class td /*Set the tab...