Php爬虫,爬取数据,识图猜成语
一、寻找数据
1,寻找相关网站数据
http://www.hydcd/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/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/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同号)
更多推荐
php爬虫
发布评论