验证码

岽仔玖等

于 2017-05-19 08:33:10 发布

阅读量467

点赞数 2

分类专栏： js 文章标签：验证码

本文链接：https://blog.csdn.net/ajlgl/article/details/72514863

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

验证码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>画布验证码</title>
        <script src="js/jquery.js"></script>
        <script>
var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];  

var rand1 = nums[Math.floor(Math.random() * nums.length)];  
var rand2 = nums[Math.floor(Math.random() * nums.length)];  
var rand3 = nums[Math.floor(Math.random() * nums.length)];  
var rand4 = nums[Math.floor(Math.random() * nums.length)];  

window.onload = function() {  
    var canvas = document.getElementById("verifyCanvas");  
    var context = canvas.getContext("2d");  

    // Fill the background  
    context.fillStyle = "#FFFFFF";  
    context.fillRect(0, 0, canvas.width, canvas.height);  

    var i = 0;  
    // Draw some random lines  
    for (i = 0; i < 4; i++) {  
        drawline(canvas, context);  
    }  

    // Sprinkle in some random dots  
    for (i = 0; i < 30; i++) {  
        drawDot(canvas, context);  
    }  

    // Draw the pass-phrase string  
    context.fillStyle = "#FF0000";  
    context.font = "25px Arial";  
    context.fillText(rand1, 10, 20);  
    context.fillText(rand2, 30, 20);  
    context.fillText(rand3, 50, 20);  
    context.fillText(rand4, 70, 20);  
}  

function drawline(canvas, context) {  
    context.moveTo(0, Math.floor(Math.random() * canvas.height));  
    context.lineTo(canvas.width, Math.floor(Math.random() * canvas.height));  
    context.lineWidth = 0.5;  
    context.strokeStyle = 'rgb(50,50,50)';  
    context.stroke();  
}  

function drawDot(canvas, context) {  
    var px = Math.floor(Math.random() * canvas.width);  
    var py = Math.floor(Math.random() * canvas.height);  
    context.moveTo(px, py);  
    context.lineTo(px+1, py+1);  
    context.lineWidth = 0.2;  
    context.stroke();  
}


function createCode(){       

} 
        </script>
    </head>
    <body>
        <p>验证码:</p>  
        <p><input type="text" class="topAlign" id="verify" name="verify" value="" required>  
        <canvas width="100" height="25" id="verifyCanvas" onclick="createCode()"></canvas></p>
    </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="150" height="50"></canvas>
<script>
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
    function randomColor(min,max){
        var _r = randomNum(min,max);
        var _g = randomNum(min,max);
        var _b = randomNum(min,max);
        return "rgb("+_r+","+_g+","+_b+")";
    }
    document.getElementById("canvas").onclick = function(e){
        e.preventDefault();
        drawPic();
    };
    function drawPic(){
        var $canvas = document.getElementById("canvas");
        var _str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        var _picTxt = "";
        var _num = 6;
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");
        ctx.textBaseline = "bottom";
        ctx.fillStyle = randomColor(180,240);
        ctx.fillRect(0,0,_width,_height);
        for(var i=0; i<_num; i++){
            var x = (_width-10)/_num*i+10;
            var y = randomNum(_height/2,_height);
            var deg = randomNum(-45,45);
            var txt = _str[randomNum(0,_str.length)];
            _picTxt += txt;
            ctx.fillStyle = randomColor(10,100);
            ctx.font = randomNum(16,40)+"px SimHei";
            ctx.translate(x,y);
            ctx.rotate(deg*Math.PI/180);
            ctx.fillText(txt, 0,0);
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
        }
        for(var i=0; i<_num; i++){
            ctx.strokeStyle = randomColor(90,180);
            ctx.beginPath();
            ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
            ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
            ctx.stroke();
        }
        for(var i=0; i<_num*10; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
        return _picTxt;
    }
    drawPic();
</script>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
        <link href="css/details.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body onload="createCode()">
        <div class="J_after" style="margin-left: 250px;">
            <input type="hidden"  id="J_down" data-link="'+data.downUrl+'">
            <div class="checkcode">
                <input type="text" id="J_codetext" placeholder="Type Here" maxlength="4">
                <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">
                    Your browser does not support the canvas element.
                </canvas>
            </div>
            <input type="button" value="Submit" class="btn-code" onClick="validate();">
        </div>

    </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
        <script src="js/jquery.js"></script>
         <script type='text/javascript'>  
        var code ; //在全局定义验证码    

        function createCode(){  
             code = "";     
             var codeLength = 4;//验证码的长度    
             var checkCode = document.getElementById("code");     
             var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',    
             'S','T','U','V','W','X','Y','Z');//随机数    
             for(var i = 0; i < codeLength; i++) {//循环操作    
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）    
                code += random[index];//根据索引取得随机数加到code上    
            }    
            checkCode.value = code;//把code值赋给验证码    
        }  
        //校验验证码    
        function validate(){    
            var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写          
            if(inputCode.length <= 0) { //若输入的验证码长度为0    
                alert("请输入验证码！"); //则弹出请输入验证码    
            }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时    
                alert("验证码输入错误！@_@"); //则弹出验证码输入错误    
                createCode();//刷新验证码    
                document.getElementById("input").value = "";//清空文本框    
            }else { //输入正确时    
                alert("合格！^-^");  
            }  
        }  
        </script>  
        <style type='text/css'>  
        #code{  
            font-family:Arial,宋体;  
            font-style:italic;  
            color:green;  
            border:0;  
            padding:2px 3px;  
            letter-spacing:3px;  
            font-weight:bolder;  
        }  
        </style>  
    </head>
    <body onload='createCode()'>   
        <div>验证码：    
            <input type = "text" id = "input"/>    
            <input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' />  
            <input type = "button" value = "验证" onclick = "validate()"/>  
        </div>    
    </body> 
</html>