Php爬虫，爬取数据，识图猜成语

一、寻找数据

1，寻找相关网站数据

http://www.hydcd.com/cy/fkccy/index.htm

分析网站换页特性

分析得出除了第一页，第二页开始index加页面数

 

写一个函数，专门拼接需要访问的页面

public function getcy($id=3,$num=3){
    $i=$id;
    $num=$i+$num;
    for($i;$i<$num;$i++){
        $url="http://www.hydcd.com/cy/fkccy/index".$i.".htm";
      $this->pacy($url);
        echo "第".$i."个已完成";
    }
}

 

第一个参数为起始页，第二个为爬取的页数

 

二、使用正则筛选出需要的数据并存入数据库

所有数据都是这种格式，所以正则可以这么写

$regex = "/<td width="170" height="210">(.*?)</td>/";

 

进一步筛选出图片和正确答案

 

preg_match("/<img border="0" src="(.*?)" alt="(.*?)">/",$v,$con)

 

这时$con[1]就是图片路径，$con[2]就是正确答案

 

因为图片是相对路径，我们还要拼接成可以在浏览器访问的路径

这样即可：

$con[1]="http://www.hydcd.com/cy/fkccy/".$con[1];

 

把网络图片下载到本地，并把他们存入数据库

 

下面函数是传网络图片路径，下载到本地文件夹的方法。

function GrabImage($url,$filename="",$path=''){
    if($url == ""){
        return false;
    }

    $ext=strrchr($url,".");

    if($ext != ".gif" && $ext != ".jpg" && $ext != ".bmp" && $ext != ".png"){
        echo "格式不支持！";
        return false;
    }
    if($path==""){
        $path="./Public/cyimg/";
    }
    if($filename == ""){
        $filename = uniqid()."$ext";
    }

    ob_start();
    readfile($url);
    $img=ob_get_contents();
    ob_end_clean();
    $size=strlen($img);
    $fp2=fopen($path.$filename,"a");
    if(fwrite($fp2,$img) === false){
        echo "不能写入文件".$filename;
        exit();
    }else{
        echo "保存图片成功！";
    }
    fclose($fp2);
    return $path.$filename;

}

 

 

 

到此我们的爬虫就结束了

 

 

三、写猜成语功能

1，  增加答题的难度，我们需要加上一些干扰字，可以上百度百科搜索常用字，把这些字添加字符串。随机取出16个字。

 

这里需要注意的是，因为字符串的元素是中文字符，一个中文字符在utf-8格式下相当于3个字节，所以计算字符串长度时需要除以3才是中文字符串真实的长度。

随机取一个中文字符

mb_substr($zwz,$num,1,'utf-8');

 

第一个参数是字符串，第二个参数是从哪里开始取，第三个参数是取多少个，第四个编码格式。这样循环16次，就能随机取到16个干扰字。再存入数据库。这样我们数据这方面就已经完成了。

 

2，取数据库的数据并将其打乱

目的是为了让不同用户进来看到的，和答题顺序是不一样

打乱二维数组函数

function shuffle_assoc($list) {
    if (!is_array($list)) return $list;
    $keys = array_keys($list);
    shuffle($keys);
    $random = array();
    foreach ($keys as $key)
        $random[] = $list[$key];
    return $random;
}

 

 

 

2，  将正确答案和干扰字拼接，打乱

字符串打乱有shuffle();函数，因为这里是中文字符串。所以不能直接这样用，我这边稍微做一下处理。

（1）       先把中文字符串一个一个取出来。

（2）       拼成数组再用上面的打乱二维数组的方法打乱。

（3）       再循环数组拼接成一个新的打乱的字符串。

为了避免重复计算，我们把计算的结果存入session里面，只有进入来才计算。以后的验证直接取session里面的值来比对。

至此我们的数据这一块就完成了。

四，前端页面

 

布局

<div style="text-align: center">
    <p>你答对了<spanstyle="color: red;font-weight: 500" id="zqs">{$arr.zqs}</span>道</p>

<div id="con">
    <img src="/qingshi/{$arr.cyimg}">
</div>
<div id="tsa" style="width:60%;height: 200px;margin: 0 auto"></div>
<div>
    <div style="width:55%;height: 50px;margin: 0 auto">
        <div class="an"></div>
        <div class="an"></div>
        <div class="an"></div>
        <div class="an"></div>
    </div>
    <input id="daan"  style="display: none"/>
  <!--  <buttonid="tj"> 提交</button>-->
</div>
</div>

 

样式

 

<style>
    .tsz{
        display: block;
        width: 30px;height:30px;
        line-height: 30px;
       text-align: center;
        border: 1px solid;
        margin: 5px;
        float: left;
        color: #fff;
        background-color: #9b5022;
    }
    .an{
        display: block;
        width: 30px;height:30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid;
        margin: 5px;
        float: left;

    }
</style>

 

Js

 

var ts="{$arr.ts}";
for(i=0;i<ts.length;i++){
    $("#tsa").append("<div class='tsz'>"+ts.charAt(i)+"</div>")
    if((i+1)%5==0){
        $("#tsa").append("<br/>");
    }
}

 

获取到正确答案和干扰字的组合字符串，遍历生成文字。

 

加div点击事件

$(".tsz").click(function(){
    var daana='';
    var daan=$("#daan").val();
    var dji=$(this).html();
    if(daan.length<4){
        var a = $(".an");
        for(var i=0;i<a.length;i++) {
            if ($(a[i]).html() == "") {
                $(a[i]).html(dji);
                break;
            }
        }
        for(var i=0;i<a.length;i++) {
            daana+=$(a[i]).html();
        }
        $("#daan").val(daana);
    }
    if(daan.length==3){
        tj();
    }
    console.log(dji);
})

 

点击获取当前的文字，

 

（1），遍历答案框，如果有空的就添加上去。

（2），Input为隐藏框。遍历添加后的答案框，知道当前客户点击所以文字

（3），判断如果input框值的长度是为3，说明添加后就有4个，此时就触发提交函数

提交函数，使用ajax动态修改页面

var daan=$("#daan").val()
console.log(daan);
/* if(daan=="{$arr.zq}"){
 alert("正确");*/
//  $.ajax()
$.ajax({
    type:"POST",
    url:"{:U('Home/Caicy/cheardaan')}",
    data: {daan:daan},
    dataType : 'json',
    success: function(data){

        console.log(data);
        if(data!=-1){
            $(".an").html('')
            $("#con").html('');
            $("#con").html("<img src='/qingshi/"+data.arr.cyimg+"'>")
            $("#zqs").html(data.zqs);
            $("#tsa").html('');
            var ts=data.arr.ts;
            for(i=0;i<ts.length;i++) {
                $("#tsa").append("<div class='tsz'>" + ts.charAt(i) + "</div>")
                if ((i + 1) % 5 == 0) {
                    $("#tsa").append("<br/>");
                }
            }
            $("#daan").val('');
            alert("回答正确，下一题");
            dj();
        }else{
            alert("错误");
            $("#daan").val('');
            $(".an").html('')
        }

    }
});

 

（1），发送用户选择的答案给后端验证，如果验证通过，就把返回的json，也就是下一道题相关的内容，用js动态替换掉原用的内容。如果验证失败则给用户相应的提示。

 

1，增加用户体验

$(".an").click(function(){
    var daan='';
    $(this).html('');
    var a = $(".an");
    for(var i=0;i<a.length;i++) {
        daan+=$(a[i]).html();
    }
    $("#daan").val(daan);
})

 

点击答案的某一个字，清空当前文字，再循环遍历当前答案，从而获取当前的答案。

 

 

四，

页面效果：

至此简易的看图猜成语 就完成了。

 

最后因为是个人喜好仓促写成的程序，所以方法命名上都很不规范。

样式也只写了手机端。电脑端看了会变形。

体验链接：http://120.79.164.169/game/index.php/home/Caicy

ps：因为服务器没有备案，微信端打开链接需要确认进入原页面。不然js代码会被微信端屏蔽。效果就不能看出来

如若有误或者有其他问题请与我交流:2359582968(微信qq同号)