验证码技术

验证码的作用是防止机器提交，防止机器暴力破解密码或向数据库提交垃圾数据。本验证码是根据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);

执行代码后的效果：