zoukankan      html  css  js  c++  java
  • 20随机验证码

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>T65-验证码</title>
    <style>
    #mycanvas{
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <canvas id="mycanvas" width='90' height='40'>
    您的浏览器不支持canvas,请换个浏览器试试~
    </canvas>

    </body>

    <script type="text/javascript">
    /*生成4位随机数*/
    function rand(){
    var str="abcdefghijklmnopqrstuvwxyz0123456789";
    var arr=str.split("");
    var validate="";
    var ranNum;
    for(var i=0;i<4;i++){
    ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间
    validate+=arr[ranNum];
    }
    return validate;
    }

    /*干扰线的随机x坐标值*/
    function lineX(){
    var ranLineX=Math.floor(Math.random()*90);
    return ranLineX;
    }

    /*干扰线的随机y坐标值*/
    function lineY(){
    var ranLineY=Math.floor(Math.random()*40);
    return ranLineY;
    }

    function clickChange(){
    var mycanvas=document.getElementById('mycanvas');
    var cxt=mycanvas.getContext('2d');
    cxt.fillStyle='#000';
    cxt.fillRect(0,0,90,40);

    /*生成干扰线20条*/
    for(var j=0;j<20;j++){
    cxt.strokeStyle='#fff';
    cxt.beginPath(); //若省略beginPath,则每点击一次验证码会累积干扰线的条数
    cxt.moveTo(lineX(),lineY());
    cxt.lineTo(lineX(),lineY());
    cxt.lineWidth=0.5;
    cxt.closePath();
    cxt.stroke();
    }

    cxt.fillStyle='red';
    cxt.font='bold 20px Arial';
    cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中
    }

    clickChange();

    /*点击验证码更换*/
    mycanvas.onclick=function(e){
    e.preventDefault(); //阻止鼠标点击发生默认的行为
    clickChange();
    };




    </script>

    </html>
  • 相关阅读:
    计算机的基本存储单位
    挖坑
    HEOI2017 游记
    bzoj4815 [Cqoi2017]小Q的表格
    bzoj4817 [Sdoi2017]树点涂色
    hdu5824 graph
    4.5&4.7联考题解
    高飞
    无题
    51Nod 算法马拉松23 开黑记
  • 原文地址:https://www.cnblogs.com/mx2036/p/6774654.html
Copyright © 2011-2022 走看看