js生成随机验证码

直接粘贴可以使用,如有像素变更请自行调整

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
<style type="text/css">
    #canvas{
        cursor:pointer;
    }
</style>
</head>
    <canvas id="canvas" width="93px" height="31px"></canvas>
<script>
        //生成随机数
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
        //生成随机颜色RGB分量
    function randomColor(min,max){
        var _r = randomNum(min,max);
        var _g = randomNum(min,max);
        var _b = randomNum(min,max);
        return "rgb("+_r+","+_g+","+_b+")";
    }
    //先阻止画布默认点击发生的行为再执行drawPic()方法
    document.getElementById("canvas").onclick = function(e){
        e.preventDefault();
        drawPic();
    };
    function drawPic(){
        //获取到元素canvas
        var $canvas = document.getElementById("canvas");
        var _str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";//设置随机数库
        var _picTxt = "";//随机数
        var _num = 4;//4个随机数字
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");//获取 context 对象
        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(15,25)+"px SimHei";//设置随机数大小,字体为SimHei
            ctx.translate(x,y);//将当前xy坐标作为原始坐标
            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();
            //随机划线--4条路径
            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();
        }
        alert(_picTxt);
        return _picTxt;//返回随机数字符串
    }
    drawPic();
</script>
</body>
</html>

JAVA

后端验证需要全部转换为大写或者小写

String s = "89aBe8ev7a5xA2wA45";
System.out.println("小写转大写:"+s.toUpperCase());
System.out.println("大写转小写:"+s.toLowerCase());

 

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的登录页面示例,包含了一个随机生成验证码的JavaScript函数: ```html <!DOCTYPE html> <html> <head> <title>登录页面</title> <script> // 生成随机验证码 function generateCode() { var codeLength = 6; // 验证码长度 var codeChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; // 验证码字符集合 var code = ""; for (var i = 0; i < codeLength; i++) { code += codeChars.charAt(Math.floor(Math.random() * codeChars.length)); } document.getElementById("code").innerHTML = code; // 将验证码更新到页面 } </script> </head> <body> <h2>登录</h2> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <label for="code">验证码:</label> <input type="text" id="codeInput" name="codeInput" style="width: 100px;"> <span id="code" onclick="generateCode()">点击刷新</span><br><br> <input type="submit" value="登录"> </form> </body> </html> ``` 这个页面包含了一个用户名输入框、一个密码输入框、一个验证码输入框和一个登录按钮。当用户点击“点击刷新”时,`generateCode()`函数将生成一个6位长度的随机验证码,并将其更新到页面上的`<span>`元素中。用户输入正确的验证码后,点击“登录”按钮即可提交表单。 需要注意的是,这个验证码只是一个简单的示例,安全性并不高。在实际应用中,需要使用更加复杂的验证码来防止恶意攻击。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值