Web Front-end
JS Tutorial
Native js implementation of verification code generation method (complete code)
Native js implementation of verification code generation method (complete code)
The content of this article is about the generation method of native js implementation verification code (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px solid silver;
background:url("./img/bg1.png")no-repeat;
background-size:120% ;
text-align: center;
}
.btn{
color: green;
background-color: #d6ffe1;
cursor: pointer;
}
.yztxt{
width: 150px;
height: 20px;
border: 1px solid silver;
}
</style>
</head>
<body>
<p class="block"></p>
<span class="btn">看不清....</span><br>
<input class="yztxt" type="text"><br>
<button class="yz">验证</button>
<script>
var b=document.getElementsByClassName("block")[0];
var btn=document.getElementsByClassName("btn")[0];
var s=document.getElementsByClassName("txt");
var yztxt=document.getElementsByClassName("yztxt")[0];
var yz=document.getElementsByClassName("yz")[0];
var numrous=""; //定义一个空数组 用来存放生成的验证码
yz.onclick=function(){ //给验证按钮一个方法 判断验证码是否输入正确
if(yztxt.value.length<=0){
alert("请输入验证码：")
}
else if(yztxt.value== numrous.toLowerCase()){
alert("验证成功！");
}
else{
alert("验证失败！");
nrandom();//验证失败重新调随机产生验证码的函数
}
};
btn.onclick=function(){//当鼠标点击看不清时，切换验证码
nrandom();
};
nrandom();
function nrandom(){
numrous="";//在产生下一组验证码，清空上次验证码
b.innerHTML="";//清空文本框中验证码
for(var i=0;i<6;i++){
var num=Math.random()*100; //产生数字，大小写字母的总概率100
if(num<=50){
//数字产生的概率50%
var n=Math.floor(Math.random()*10);
numrous+=n;//将随机产生的数字放在字符串numrous
b.innerHTML+="<span class='txt'>"+n+"</span>";//将随机产生的数字在文本框中显示
}
else if(num>=50&&num<=80){
//产生小写字母的概率为30%
var n =String.fromCharCode(Math.floor(Math.random()*25+97));
numrous+=n;
b.innerHTML+="<span class='txt'>"+n+"</span>";
}
else{
//产生大写字母的概率20%
var n =String.fromCharCode(Math.floor(Math.random()*25+65));
numrous+=n;
b.innerHTML+="<span class='txt'>"+n+"</span>";
}
}
stylezi();//调用验证码字体样式
}
//下面分别设置了验证码的颜色，大小，粗细，距左的距离以及倾斜角度
function stylezi(){
for(var i=0;i< s.length;i++){
s[i].style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
s[i].style.fontSize=(Math.random()*20+15)+"px";
s[i].style.fontWeight=Math.random()*300+200;
s[i].style.left=(Math.random()*20-10)+"px";
s[i].style.transform="rotatez("+Math.random()*90-45+"deg)";
}
}
</script>
</body>
</html>Related recommendations:
js code implementation for displaying time on a web page
How does js generate a QR code? How to generate QR code using js (code)
The above is the detailed content of Native js implementation of verification code generation method (complete code). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if Google Chrome does not display the verification code image? Chrome browser does not display the verification code?
Mar 13, 2024 pm 08:55 PM
What should I do if Google Chrome does not display the verification code image? Sometimes you need a verification code to log in to a web page using Google Chrome. Some users find that Google Chrome cannot display the content of the image properly when using image verification codes. What should be done? The editor below will introduce how to deal with the Google Chrome verification code not being displayed. I hope it will be helpful to everyone! Method introduction: 1. Enter the software, click the "More" button in the upper right corner, and select "Settings" in the option list below to enter. 2. After entering the new interface, click the "Privacy Settings and Security" option on the left. 3. Then click "Website Settings" on the right
Can virtual numbers receive verification codes?
Jan 02, 2024 am 10:22 AM
The virtual number can receive the verification code. As long as the mobile phone number filled in during registration complies with the regulations and the mobile phone number can be connected normally, you can receive the SMS verification code. However, you need to be careful when using virtual mobile phone numbers. Some websites do not support virtual mobile phone number registration, so you need to choose a regular virtual mobile phone number service provider.
Why can't I receive the verification code on my phone?
Aug 17, 2023 pm 02:49 PM
Failure to receive the verification code on your mobile phone is caused by network problems, mobile phone settings problems, mobile phone operator problems and personal settings problems. Detailed introduction: 1. Network problems. The network environment where the mobile phone is located is unstable or the signal is weak, which may cause the verification code to be unable to be delivered in time; 2. Mobile phone setting problems. The text message or voice function of the mobile phone is accidentally turned off, or the The verification code sending number is added to the blacklist, resulting in the verification code not being received normally; 3. Mobile phone operator issues, the mobile phone operator may have malfunctions or maintenance, resulting in the verification code not being delivered in time, etc.
PHP image processing case: How to implement the verification code function of images
Aug 17, 2023 pm 12:09 PM
PHP image processing case: How to implement the verification code function of images. With the rapid development of the Internet, verification codes have become one of the important means to protect website security. Verification code is a verification method that uses image recognition technology to determine whether the user is a real user. This article will introduce how to use PHP to implement the verification code function of images, and come with code examples. Introduction A verification code is a picture containing random characters. The user needs to enter the characters in the picture to pass the verification. The main process of implementing verification code includes generating random characters and drawing characters into pictures.
PHP Development Guide: Implementing Verification Code Login
Jul 01, 2023 am 09:27 AM
With the development of the Internet and the popularity of smartphones, the verification code login function is adopted by more and more websites and applications. Verification code login is a login method that verifies the user's identity by entering the correct verification code to improve security and prevent malicious attacks. In PHP development, implementing a simple verification code login function is not complicated and can be completed through the following steps. Create a database table First, we need to create a table in the database to store verification code information. The table structure can contain the following fields: id: auto-incrementing primary key phon
Verification codes can't stop robots! Google AI can accurately identify blurry text, while GPT-4 pretends to be blind and asks for help
Apr 12, 2023 am 09:46 AM
“The most annoying thing is all kinds of weird (or even perverted) verification codes when you log into a website.” Now, there is good news and bad news. The good news is: AI can do this for you. If you don’t believe me, here are three real cases of increasing recognition difficulty: And these are the answers given by a model called “Pix2Struct”: Are they all accurate and word for word? Some netizens lamented: Sure, the accuracy is better than mine. So can it be made into a browser plug-in? ? Yes, some people said: Even though these cases are relatively simple, if you just fine-tune it, I can't imagine how powerful the effect will be. So, the bad news is - the verification code will soon be unable to stop the robots! (Danger danger danger...) How to do it? Pix2St
How to create a verification code image using PHP?
Sep 13, 2023 am 11:40 AM
How to create a verification code image using PHP? CAPTCHA is a commonly used method to verify whether the user is a human and not a machine. On websites, we often see verification code images, which require users to enter random characters or numbers displayed on the image to complete operations such as login, registration, and commenting. This article will introduce how to use PHP to create a verification code image and provide specific code examples. 1. PHPGD library To create a verification code image, we need to use PHP's GD library. The GD library is an extension for processing images.
Use OCR technology to automatically identify various verification codes, and the tool has been open source
May 25, 2023 am 10:07 AM
Today I am sharing with you an OCR application - ddddocr automatically recognizes verification codes. The first four d's are the first pinyin of "daidai younger brother". [/Laughter]. Project address: https://github.com/sml2h3/ddddocr. When using it, use the pip command to install it directly, just pipinstalldddddocr. The core technology of OCR includes two aspects. One is the target detection model to detect the text in the picture, and the other is the text recognition model to convert the text in the picture into text. The first type of verification codes is the simplest. They do not have complex background images, so the target detection model can be omitted and the images can be directly sent to the text recognition model. The identification code is as follows: impor
