2017 年中国技能大赛(网站设计)参赛感悟

844次浏览

前言

有幸在公司组织下,参加了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知识还是不扎实!

相关文章: