网页验证码简单实现

最新推荐文章于 2023-07-24 23:58:29 发布

我是大头鸟

最新推荐文章于 2023-07-24 23:58:29 发布

阅读量878

点赞数

分类专栏： javaScript 文章标签：验证码网页

本文链接：https://blog.csdn.net/datouniao1/article/details/52174266

版权

javaScript 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

在这个地方我简单的做了一个网页验证码的实现，这个验证是对应的四位的数字，是由随机数产生，然后然后让用户在输入数字进行对比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #wide
    {
        background: url(image/knx.jpg);
        background: pink;
        opacity: 0.5;
        width: 80px;
        height: 35px;
        font-weight: bold;
        letter-spacing:6px;
        font-family: 华文楷体;
        font-size: 1.4em;
        line-height: 35px;
        text-align: center;
        position: absolute;
        left:150px;
    }
    #veri
    {
        position: absolute;
        width: 80px;
        height: 30px;
        font-size: 1.3em;
    }
</style>
</head>
<script>
    window.onload=function(){
        var pos=document.getElementById("rand");
        var inp1=document.getElementById("veri");
        var Num=GetRandomNum(1000,9999);
        pos.innerHTML=Num;
        var wide=document.getElementById("wide");
        wide.onclick=function()
        {
            Num=GetRandomNum(1000,9999);
            pos.innerHTML=Num;
        };
        inp1.onblur=function(){
            verification(inp1,Num);
        }

    }
    function GetRandomNum(Max,Min)
    {
        var Range=Max-Min;
        var Rand=Math.random();
        return parseInt((Min+Rand*Range));
    }
    function verification(inp1,num)
    {

        if(parseInt(inp1.value)==num)
        {
            return true;

        }
        else if(inp1.value.length==0)
        {
            alert("请输入验证码");

        }
        else
        {
            alert("验证码输入错误");
            return false;
        }
    }
</script>
<body>
<input type="text" id="veri" placeholder="验证码"/>
<div id="wide">
<div id="rand"></div>
</div>
</body>
</html>

我是大头鸟

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页验证码简单实现

在这个地方我简单的做了一个网页验证码的实现，这个验证是对应的四位的数字，是由随机数产生，然后然后让用户在输入数字进行对比。html>lang="en"> charset="UTF-8"> Title #wide { background: url(image/knx.jpg); background: pink;
复制链接

扫一扫