<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<!--viewport : 视口-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>验证码</title>
<style>
*{
margin:0;
padding:0;
}
.box{
position:relative;
width:250px;
height:230px;
border:1px solid black;
}
input{
width:200px;
height:50px;
}
.TFimg{
position:absolute;
width:20px;
height:20px;
/*通过js控制显示*/
/*background-image:url('images/false.png');*/
background-size:100%;
right:10px;
top:20px;
}
.TFtext{
/*通过js控制显示*/
display:none;
width:200px;
height:16px;
color:red;
font-size:1px;
}
.identifyingCode{
width:204px;
height:80px;
background-image:url('images/black.jpg');
background-size:100%;
margin-top:20px;
text-align:center;
line-height:80px;
color:#fff;
font-size:35px;
font-style:italic;
letter-spacing:8px;
}
.identifyingCodeImg{
position:absolute;
width:20px;
height:20px;
background-image:url('images/刷新.jpg');
background-size:100%;
right:10px;
top:100px;
}
.sumbit{
position:absolute;
width:70px;
height:50px;
background-color:green;
color:white;
bottom:0;
}
</style>
</head>
<body>
<div class = 'box'>
<input type = 'text' placeholder = '请输入验证码' onblur="javascript:getvalue();" value = '请输入验证码'/>
<div class = 'TFimg'></div>
<div class = 'TFtext'>验证码错误,请重新输入</div>
<div class = 'identifyingCode'></div>
<button class = 'identifyingCodeImg'></button>
<button class = 'sumbit'>submit</button>
</div>
<script>
//存放验证码的div
var identifyingCode = document.getElementsByClassName('identifyingCode')[0];
//刷新按钮
var identifyingCodeImg = document.getElementsByClassName('identifyingCodeImg')[0];
//用户输入信息
var input = document.getElementsByTagName('input')[0];
//提交按钮
var sumbit = document.getElementsByClassName('sumbit')[0];
//用来判断用户输入内容和验证码是否相同所使用的变量(相当于内容为验证码)
var text;
//提示图片
var TFimg = document.getElementsByClassName('TFimg')[0];
//提示文字
var TFtext = document.getElementsByClassName('TFtext')[0];
window.onload = function(){
init();
};
function init(){
//让div元素中出现验证码
verificationCode();
//给刷新按钮添加功能
identifyingCodeImg.onclick =verificationCode;
//提交按钮绑定事件用来判定用户输入内容和验证码是否相同
sumbit.onclick = getvalue;
}
function verificationCode(){
//1.创建一个包含0 - 9 小写字母 大写字母的数组
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for(var i = 65; i <= 122; i++){
//这个部分既不属于小写字母也不属于大写字母
if(i > 90 && i <97){
continue;
}
arr.push(String.fromCharCode(i));
}
//2.在数组中随机获取6位(包含数字,字母)往div中放入
identifyingCode.innerHTML="";
for(var i = 0; i < 6; i++){
identifyingCode.innerHTML += arr[Math.floor(Math.random() * arr.length)];
}
text = identifyingCode.innerHTML;
}
function getvalue(){
if(text == input.value){
TFimg.style.backgroundImage = 'url(images/true.png)';
TFtext.style.display = 'none';
}else{
TFimg.style.backgroundImage = 'url(images/false.png)';
TFtext.style.display = 'block';
}
}
</script>
</body>
</html>
原生js写验证码
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/108119282
今日推荐
周排行