zoukankan      html  css  js  c++  java
  • 验证码技术

        验证码的作用是防止机器提交,防止机器暴力破解密码或向数据库提交垃圾数据。本验证码是根据php教材里的代码修改而成。随机码是在前端js生成的,后端php只是加上干扰条和干扰点显示了一下。

        文件:index.html

    <!DOCTYPE html>
    <html>
        <head>
            <title>验证码实例</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
            <script>
                function $(id){
                    return document.getElementById(id);
                }
                
                window.onload = function(){
                    showval();
                    function showval(){
                        num = '';
                        str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                        for(var i = 0; i < 4; i++){
                            tmp = Math.ceil((Math.random() * 35));
                            num += str.charAt(tmp);
                        }
                        $("chkid").src = './valcode.php?num=' + num;
                        $("chknm").value = num.toLowerCase();;
                    }
                    
                    $("chkid").onclick = function(){
                        showval();
                    }
                    
                    $("btn").onclick = function(){
                        var t = $("chkin").value.toLowerCase();
                        if(t == $("chknm").value){
                            alert("验证通过!");
                        }else{
                            alert("验证没有通过!");
                        }
                    }
                }
            </script>
        </head>
    <body>
        <div class="container">
            <img id="chkid" width="180px" /><br /><br />
            <input type="hidden" id="chknm" name = "chknm">
            <input id="chkin" name = "chkin" class="form-control" /><br />
            <input type="button" id="btn" value="验证" class="btn btn-primary" />
        <div>
    </body>
    </html>

        文件:valcode.php

    <?php
    header("content-tyoe:image/png");
    $num = $_GET['num'];
    $imagewidth = 80;
    $imageheight = 24;
    $numimage = imagecreate($imagewidth, $imageheight);
    imagecolorallocate($numimage, 240, 240, 240);
    for($i = 0; $i < 240; $i++){
        $randcolor = imagecolorallocate($numimage, rand(200, 255), rand(200, 255), rand(200, 255));
        imagearc($numimage, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), $randcolor);
    }
    for($i = 0; $i < strlen($num); $i++){
        $x = mt_rand(1, 10) + $imagewidth * $i / 4;
        $y = mt_rand(1, $imageheight / 3);
        $color = imagecolorallocate($numimage, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
        imagestring($numimage, 5, $x, $y, $num[$i], $color);
    }
    for($i = 0; $i < 300; $i++){
        $randcolor = imagecolorallocate($numimage, rand(200, 255), rand(200, 255), rand(200, 255));
        imagesetpixel($numimage, rand() % 70, rand() % 20, $randcolor);
    }
    imagepng($numimage);
    imagedestroy($numimage);

        执行代码后的效果:

  • 相关阅读:
    开始核心攻坚
    Features postponed for ASP.NET 2.0 Beta 2
    设计模式的认识
    如果您想要提高开发效率,那么给大家推荐一本书,比较实用
    asp.net 2.0 个性化服务探讨
    对于数据缓存依赖的认识
    ASP.NET 2.0学习(1)——XmlDataSource控件中XPath属性之疑惑
    写作的四个境界
    ASP.NET 2.0 product design changes between Beta 1 and Beta 2(a new message from asp.net forum)
    验证控件的问题
  • 原文地址:https://www.cnblogs.com/qingsong/p/12422165.html
Copyright © 2011-2022 走看看