仿12306铁路客服服务中心登录验证码效果

素颜马尾好姑娘i 2022-05-27 02:46 227阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>铁路客服服务中心</title>
        <link rel="icon" type="image/x-icon" href="http://www.12306.cn/mormhweb/images/favicon.ico">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .clk-img{
                position: absolute;
                width: 24px !important;
                height: 24px !important;
                z-index: 999;
            }
            #caption-div{
                position: relative;
                margin: 9px auto;
                width: 450px;
                border:3px solid #E3E1DE;
                text-align: center;
            }
            .caption-img{
                display: inline-block;
                cursor: pointer;
                margin: 3px;
                padding: 0;
                -webkit-user-select: none;
            }
            .caption-img img{ 
                height: 100px;
                width: 100px;
            }
            .all{
                font-weight: bold;
                color: red;
            }
            .caption-name{
                font-family: 'LiSu';
                font-size: 20px;
            }
            #remark{
                width: 440px;
                margin: 8px;
                border-top: 2px solid #E3E1DE;
            }
            #refresh{
                background: white;
                cursor: pointer;
                margin-top: 10px;
            }
            button{
                margin: 10px;
                width: 50px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div id="caption-div">
            <h1>仿12306铁路网站验证码效果</h1>
            <?php
                $conn = mysql_connect('127.0.0.1','root','') or die('Error!');
                mysql_select_db('test',$conn);
                mysql_query('set names utf8');
                $sql1 = "select count(0) count from `captcha`";
                $resource1 = mysql_query($sql1);
                $row1 = mysql_fetch_assoc($resource1);
                for ($i=0; $i < 8; $i++) { 
                    $rand_array = range(1,$row1['count']);
                    $rand = $rand_array[array_rand($rand_array)];
                    $sql2 = 'SELECT 
                            * 
                        FROM 
                            `captcha` 
                        WHERE
                            `id` = '.$rand.'
                        LIMIT 1';
                    $resource2 = mysql_query($sql2);
                    $row = mysql_fetch_assoc($resource2);
                    $captcha_arr[] = $row;
                    $captcha_name_arr[] = $row['name'];
                }
                $caption_name = $captcha_name_arr[array_rand($captcha_name_arr)];//产生验证码的值
    
                echo "<script>localStorage.removeItem('captcha_no');var captcha_no;</script>";//清除本地存储的数据
                if(is_array($captcha_arr)){
                    foreach ($captcha_arr as $key => $value) {
                        if($caption_name == $value['name']){
                            echo "<script>
                                captcha_no = localStorage.getItem('captcha_no');
                                captcha_no = captcha_no ? captcha_no : '';
                                captcha_no += ".$key.";
                                localStorage.setItem('captcha_no',captcha_no);
                              </script>";//存储到本地
                        }
                        echo '<div class="caption-img"><img src="'.$value['url'].'" alt="'.$value['name'].'" data-no="'.$key.'" /></div>';
                    }
                }
            ?>
            <div id="remark">
                请点击上图中<span class="all">所有的</span><span class="caption-name"><?php echo $caption_name;?></span>
                <img id="refresh" src="refresh.jpg" height="21" width="21" alt="刷新" />
            </div>
            <button id="submit">提交</button><span id="tip"></span>
        </div>
    
        
    </body>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>    
        //为数组原型链增加一个判断2个数组的是否相等的方法
        //第一个参数为待比较的数组，第二个参数为是否采用严格模式，true表示采用严格模式，即元素数值和格式均需相等，false只需元素数值相等即可
        Array.prototype.equals = function (array,is_strict = false) {
            if (!array) return false;
            if (this.length != array.length) return false;
            for (var i = 0, l = this.length; i < l; i++) {
                if (this[i] instanceof Array && array[i] instanceof Array) {
                    if (!this[i].equals(array[i])) return false;       
                }  
                if(is_strict){
                    if (this[i] !== array[i]) return false;
                }else{
                    if (this[i] != array[i]) return false;
                }    
            }       
            return true;
        }
    
        //例子
        // var a = [1];
        // var b = ["1"];
        // console.log(a.equals(b)) //true
        // console.log(a.equals(b,true))  //false
    
        $(function(){
            var captcha = {
                /*
                 * 初始化页面
                 */
                onInit: function() {
                    // 页面数据初始化
                    var clicked_no;
                    this.captchaPictureBindClick();
                    this.refreshBindClick();
                    this.submitBindClick();
                },
    
                /**
                 * 验证码图片绑定点击事件
                 */
                captchaPictureBindClick: function(){
                    localStorage.removeItem('clicked_no');
                    $('.caption-img>img').click(function(e){
                        var x = e.clientX - $('#caption-div').offset().left - 12;
                        var y = e.clientY - $('#caption-div').offset().top - 12;
                        var data_no = $(this).data('no');
                        $(this).parent().prepend('<img class="clk-img" src="clk-img.jpg" alt="" style="top:'+ y +'px;left:'+ x +'px;"/>');//添加小图标
                        if(!$(this).hasClass('clicked')){ //未点击
                            clicked_no = localStorage.getItem('clicked_no') || '';
                            clicked_no += data_no;//拼接选中图片的索引值
                            localStorage.setItem('clicked_no',clicked_no);//写入图标编号
                            $(this).addClass('clicked'); //已点击状态，再次点击无效
                        }
                        
                        $('.clk-img').off().click(function(e){//点击图标消失
                            localStorage.setItem('clicked_no',localStorage.getItem('clicked_no').replace($(this).siblings('img').data('no'), ''));//删掉对应的图片索引值
                            var siblings_length = $(this).siblings('.clk-img').length;
                            if(!siblings_length){
                                $(this).siblings('img').removeClass('clicked');//恢复可点击有效状态
                            }
                            $(this).remove();//该图标删除
    
                        })
                    });
                },
    
                /**
                 * 刷新按钮绑定点击事件
                 */
                refreshBindClick: function(){
                    $('#refresh').click(function(){
                        location.reload();
                    })
                },
    
                /**
                 * 提交按钮绑定点击事件
                 */
                submitBindClick: function(){
                    $('#submit').click(function(){
                        captcha_no_arr = captcha_no.split('');//对默认的索引字符串拆分成数组
                        clicked_no_arr = localStorage.getItem('clicked_no').split('');//对选中的图片索引字符串拆分成数组
                        clicked_no_arr.sort();//对数组进行升序排序
                        if(captcha_no_arr.equals(clicked_no_arr)){//比较两个数组是否一样
                            $('#tip').html('恭喜！验证通过……');
                            setTimeout(function(){
                                location.href = 'http://www.12306.cn';
                            }, 1500);
                        }else{
                            $('#tip').html('请点击正确的验证码');
                        }
                    })
                }
            }
    
            captcha.onInit();
        })
    </script>
    </html>

DROP TABLE IF EXISTS `captcha`;
    CREATE TABLE `captcha` (
      `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
      `url` varchar(100) CHARACTER SET utf8 NOT NULL,
      `name` varchar(100) CHARACTER SET utf8 NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1;
    
    
    -- ----------------------------
    -- Records of captcha
    -- ----------------------------
    INSERT INTO `captcha` VALUES ('1', '1.jpg', '猕猴桃');
    INSERT INTO `captcha` VALUES ('2', '2.jpg', '草莓');
    INSERT INTO `captcha` VALUES ('3', '3.jpg', '芒果');
    INSERT INTO `captcha` VALUES ('4', '4.jpg', '苹果');
    INSERT INTO `captcha` VALUES ('5', '5.jpg', '橙子');
    INSERT INTO `captcha` VALUES ('6', '6.jpg', '车厘子');
    INSERT INTO `captcha` VALUES ('7', '7.jpg', '杨桃');
    INSERT INTO `captcha` VALUES ('8', '8.jpg', '水蜜桃');
    INSERT INTO `captcha` VALUES ('9', '9.jpg', '菠萝');
    INSERT INTO `captcha` VALUES ('10', '10.jpg', '红毛丹');
    INSERT INTO `captcha` VALUES ('11', '11.jpg', '石榴');
    INSERT INTO `captcha` VALUES ('12', '12.jpg', '提子');
    INSERT INTO `captcha` VALUES ('13', '13.jpg', '西瓜');

效果截图：

![20180410114817687][]

![20180410114828462][]

![20180410114838879][]

[20180410114817687]: /images/20220527/3a9cc52b2fc94f57b3455f27ff5b6a2d.png
[20180410114828462]: /images/20220527/90b9d82a7a52425dad8ecae65ba8ef29.png
[20180410114838879]: /images/20220527/cf4521f550834db3bbb14f3360774946.png