JS-验证码

最新推荐文章于 2024-04-30 00:40:04 发布

FIND方式

最新推荐文章于 2024-04-30 00:40:04 发布

阅读量164

点赞数

分类专栏： JavaScript 作品

本文链接：https://blog.csdn.net/weixin_43091563/article/details/103538550

版权

JavaScript 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

作品

9 篇文章 0 订阅

订阅专栏

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>验证码</title>
    <style>
        input,span,i{
            border: dashed 1px red;
            height: 20px;
            line-height: 20px;
        }
        span{
            display: inline-block;
            width:70px;
            text-align: center;
            letter-spacing: 5px;
            background: url("i/yz0.jpg");/*不停替换*/
        }
        i{
            display: inline-block;
            width:20em;
        }
    </style>
</head>
<body>
<input type="text" id="yzm1"/>
<span id="yzm2"></span>
<input type="button" class="yz"/>
<i class="con"></i>
<p>1.span内生成4个随机10以内整数，更换背景.点击span刷新验证码</p>
<p>2.将input数字与1比较</p>
<p>3.相等。验证成功，input内容消失</p>
<p>3.不相等。验证失败，重新验证</p>
<script>
function yzm(){
    var one=parseInt(Math.random()*10);
    var two=parseInt(Math.random()*10);
    var three=parseInt(Math.random()*10);
    var four=parseInt(Math.random()*10);
    document.getElementById("yzm2").innerHTML =one+""+two+""+three+""+four;
    document.getElementById("yzm2").style.background="url(i/yz"+one+".jpg)";
}yzm();document.getElementById("yzm2").onclick=yzm;
function yz() {
    var cons=document.getElementsByClassName("con")[0];
    var yzm1=document.getElementById("yzm1").value;
    var yzm2=document.getElementById("yzm2").innerHTML;
    if(yzm1==yzm2){
        cons.innerHTML="验证成功";
        document.getElementById("yzm1").value=null;
    }else{
        cons.innerHTML="验证失败，请重新输入验证码";
    }
}document.getElementsByClassName("yz")[0].onclick= yz;
</script>
</body>
</html>