目录
原理
原理文字描述
1.首先是将一组数字(四位随机数)放入盒子模型
2.然后通过css对数字的加工改为艺术字
3.而后通过js获取form表单里的text文本(并且判断输入是否一致)
图片演示原理
1.艺术字的加工 通过text-shadow 改变
p{
font-size: 45px;
text-shadow: -5px 4px 3px black;
color: white;
display: inline-block;
}
<body>
<p> 1234</p>
<p> <strike> 1234 </strike> </p>
<p> <i>1234</i> </p>
</body>
效果图:
2.创建随机数(Math.random()有关内容)
<script>
// 生成0~1之间的随机数
var random1 = Math.random();
// 生成n到m的随机数
var random2 = Math.random()*(m-n)+n;
//生成0~1之间的整数
var random3 = Math.floor(Math.random());
//生成n~m之间的整数
var random4 = Math.floor(Math.random()*(m-n))+n;
</script>
3.判断
if(prove == inputs){
alert("您输入验证码正确");
}
else{
alert("您输入验证码错误");
}
演示案例以及实现代码
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字验证码实现</title>
<style>
#inputs{
float: left;
margin-top: 74px;
border: none;
outline: none;
font-size: 20px;
border-bottom: 1px solid black;
float: left;
margin-right: 20px;
font-weight: bold;
}
p{
display: inline-block;
text-shadow: ;
}
div{
float: left;
width: 194px;
height: 200px;
margin-left: 100px;
}
span{
border: 1px solid black;
width: 200px;
height: 100px;
display: inline-block;
text-align: center;
}
span >p{
font-size: 80px;
text-shadow: 7px 4px 2px black;
color: white;
margin-top: -10px;
}
button{
margin-top: 133px;
margin-left: -307px;
width: 200px;
height: 50px;
background-color: orangered;
border: none;
}
a{
text-decoration: none;
font-size: 15px;
color: gold;
}
</style>
</head>
<body>
<div id="">
<input type="text" id="inputs" placeholder="请输入验证码">
<button><a href="javascript:;">提交</a></button>
</div>
<div>
<span><p> <strike id="provement"> 0000 </strike> </p> </span>
<a href="javascript:;">看不清?点击换一张</a>
</div>
</body>
<script>
// 设置随机数整数落在1000~9999 保证验证码为四位数
var random = Math.floor(Math.random()*10000)+1000;
if(random>10000){
random = random%10000;
}
if(random<1000){
random = random+1000;
}
// 获取元素标签并给验证码赋值
var provement = document.getElementById("provement");
var btn = document.querySelector("button");
var prove = provement.innerText;
provement.innerText = random;
btn.onclick=function(){
var text = document.getElementById("inputs");
var inputs = text.value;
// 注意此处的inputs获取内数据是通过.value来获取内部数据
var prove = provement.innerText;
if(prove == inputs){
alert("您输入验证码正确");
}
else{
alert("您输入验证码错误");
}
var random = Math.floor(Math.random()*10000)+1000;
if(random>10000){
random = random%10000;
}
if(random<1000){
random = random+1000;
}
provement.innerText = random;
}
</script>
</html>
由于本人技术力有限,如果有不妥之处欢迎指正 -^-^-