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

最新推荐文章于 2024-03-14 16:42:41 发布

sensus森森

最新推荐文章于 2024-03-14 16:42:41 发布

阅读量938

点赞数 2

分类专栏： PHP JavaScript 文章标签： 12306网站图片验证码 JS数组比较

本文链接：https://blog.csdn.net/qq_27682041/article/details/79879059

版权

PHP 同时被 2 个专栏收录

97 篇文章 1 订阅

订阅专栏

JavaScript

12 篇文章 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', '西瓜');

效果截图：