<!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', '西瓜');Effect screenshot:
