前言
有幸在公司组织下,参加了2017年中国技能大赛(网站设计)决赛,决赛完毕,公布一下大赛源码,及相关感悟吧!
关于大赛
大赛是市一级大赛,还有开幕式等仪式。比赛为期一天,分为上午和下午场,考试题目请查看:https://github.com/confidence68/Tic-Tac-Toe_byexam/blob/master/%E5%86%B3%E8%B5%9B%E8%AF%95%E9%A2%98/%E7%BD%91%E7%AB%99%E8%AE%BE%E8%AE%A1_%E5%86%B3%E8%B5%9B%E6%A0%B7%E9%A2%98.pdf
上午场主要是页面重构,制作自适应网站,不过时间比赛时间只有2个小时,时间很紧。
下午场只要制作Tic-Tac-Toe游戏,用php制作。时间也是2个小时。
我考试之前做了一遍题目,题目已经上传了github,https://github.com/confidence68/Tic-Tac-Toe_byexam/tree/master/Tic-Tac-Toe
感悟
考试和公司写代码有很大差别,最主要差别就是时间紧,有限时间内,把相关知识点完善。争取得分点最大化,这才是高分的关键。
我参加这次考试,虽然考试前,已经做了一下题目,感觉题目会做。但是考试的时候,还是时间不够!有很多问题,做的比较差!
问题一:
模块一简单的图片切换效果!因为网站资料有限,考试时是断网的。图片切换的话,只能自己写!我线下写了一个最简单的图片切换效果,代码如下:
//图片切换
var changeimageArray=[
'Images/photo_gallery/photo-1.png',
'Images/photo_gallery/photo-2.png',
'Images/photo_gallery/photo-3.png',
'Images/photo_gallery/photo-4.png',
'Images/photo_gallery/photo-5.png'
];
var interTime=2000,currentindex=0,bgindex=1;
function changeImgae(){
if(currentindex==changeimageArray.length-1){
currentindex=0,bgindex=1;
}else{
currentindex++,bgindex++;
if(bgindex==changeimageArray.length){
bgindex=0;
}
}
$("#imagechange").attr("src",changeimageArray[currentindex]).hide(500);
$("#imagechange").show();
$(".imgslide").css({"background-image":"url("+changeimageArray[bgindex]+")","background-size":"100% auto"});
};
var slidetag=setInterval(changeImgae,interTime);
$(".imgslide").hover(function(){
clearInterval(slidetag)
},function(){
slidetag=setInterval(changeImgae,interTime);
})
html代码如下:
<div class="imgslide">
<img class="imgzw" id="imagechange" src="Images/photo_gallery/photo-1.png">
</div>
我是设置2张图片,切换效果使用hide和show,鼠标移到图片上去,图片停止切换。移开,图片继续自动切换!
但是考试的时候,我也是这么写的,因为整个考试时间只有2个小时,还有整个页面的布局,这个效果我写只用了3分钟时间,但是写出来之后,发现没有效果!无奈之下,考试时间已到,我只能交卷了。交卷之后发现,我if语句双等号写成了单等号赋值!一个小小的粗心,导致这个题目错误!悲殆!
问题二:
Tic-Tac-Toe这个游戏制作,我之前写过,之前的源码已经放到github上面了。但是考试的时候,时间太紧,第一个图片上传压缩,考试的时候发现上传没反应。简单找了一下原因,还是没有找到,因此,就做其他题目了。
图片上传到指定目录,然后压缩成60*60的比例!我是如下写的:
<?php
if(@is_uploaded_file($_FILES['photo']['tmp_name'])){//@符合可以屏蔽错误
$upfile=$_FILES["photo"];
//获取数据里面的值
$name=iconv("UTF-8","gb2312", $upfile["name"]);//上传文件名称
$type =$upfile["type"];//上传文件类型
$size=$upfile["size"];//上传文件大小
$tmp_name =$upfile["tmp_name"];//上传文件临时存放路径
$template =$_REQUEST["template"];
//判断上传文件类型
switch ($type){
case 'image/pjpeg';
$okType =true;
break;
case "image/jpeg";
$okType =true;
break;
case 'image/png';
$okType =true;
break;
}
if($okType){
/**
* 0:文件上传成功<br/>
* 1:超过了文件大小,在php.ini文件中设置<br/>
* 2:超过了文件的大小MAX_FILE_SIZE选项指定的值<br/>
* 3:文件只有部分被上传<br/>
* 4:没有文件被上传<br/>
* 5:上传文件大小为0
*/
$error=$upfile["error"];//上传后系统返回错误
if($error!=0){
echo '<script>$(".alert",".alert-spacing-error").html("<span class=underline>图片大小错误:</span> 请确认图片尺寸是否正确!!</article>")</script>';
}else{
cut_img($tmp_name,60,60,$name, $type);
setcookie("headerimg", "pictures/".$name, time()+2592000);
header("Location: index.php");
exit();
}
}
}
//图片裁剪函数
function cut_img($img,$width,$height,$imgname,$img_type){ //要裁剪突破的宽度、高度、图片类型
list($imageWidth, $imageHeight) = getimagesize($img);
if($img_type=='image/pjpeg' || $img_type=='image/jpeg'){
$s = imagecreatefromjpeg($img);
} else if($img_type == "image/png"){
$s = imagecreatefrompng($img);
}
$width = imagesx($s)<$width?imagesx($s):$width; //如果图片的宽比要求的小,则以原图宽为准
$height = imagesy($s)<$height?imagesy($s):$height;
$bg = imagecreatetruecolor($width,$height);
imagecopyresampled($bg,$s,0,0,0,0,$width,$height,$imageWidth,$imageHeight);//生成50*50缩略图
imagejpeg($bg,"pictures/".$imgname);//移动目录
imagedestroy($s); //关闭图片
imagedestroy($bg);
}
?>
我在线下写的是没有问题的,但是考试的时候,我也是这么写的,但是图片没有到指定的目录。
我仔细看了一下,imagejpeg 这个函数的一个参数写错了!
好郁闷,因为一个参数写错了,我上传图片压缩这个模块估计没有分数了!
总结
模块一因为if语句双等号写错了,导致网站效果没有出来,这个是粗心所致,后面一定要注意,做事要细心!
模块二上传图片,一个函数的参数写错了,导致整个上传图片压缩没有效果。这说明我php知识还是不扎实!