您的位置：首页 > Web前端 > JavaScript

【知了堂学习笔记】_JavaScript之DOM操作案例（验证码）

2017-12-08 19:41 691 查看

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

刚刚学习了JS操作DOM，做了一个小小小小案例_验证码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width: 300px;
margin: 100px auto;
}
.ipt{
width: 150px;
height: 30px;
}
#ma{
width: 70px;
height: 35px;
font-size: 22px;
text-align: center;
line-height: 30px;
display: inline-block;
border: 1px solid #ccc;
vertical-align: middle;

}

a{
color: black;
text-decoration: none;
}
</style>
<body>
<input type="text" placeholder="请输入图片中的验证码" class="ipt" onMouseOut="inputCode(this)" />
<a href="###" onclick="createCode()" class="huan"><span id="ma"></span> 换一张</a>
<span class="pan" id="pan"></span>
</body>

<script>
window.onload = function(){
var code ;
createCode();
}

function createCode(){
code = "";// 创建4个数字验证码
var codeLength = 4; // 验证长度4
var checkCode = document.getElementById("ma");
var arraycode = new Array(0,1,2,3,4,5,6,7,8,9,
'a','b','c','d','e','f','g','h','i','j','k','m','l','n','o','p','q','r','s','t','o','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J','K','M','L','N','O','P','Q','R','S','T','O','V','W','X','Y','Z')

for(var i = 0;i<codeLength;i++){
var randomCode = Math.floor(Math.random()*52);
code += arraycode[randomCode];
}

if(checkCode){
checkCode.innerHTML = code;
}
}

function inputCode(obj){
var pan = document.getElementById("pan");
var inputValues = obj.value;
console.log(inputValues)
if(inputValues.length<0){
pan.innerText = "is not null";
pan.style.color = "red";
}else if(inputValues.toUpperCase() != code.toUpperCase()){
pan.innerText = "is error";
pan.style.color = "red";

}else{
pan.innerText = "is right";
pan.style.color = "green";
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom 验证码

相关文章推荐

新的分享

章节导航