三天《HTML5移动开发》集训的意外收获

　　现在我们大学生最不缺少的就是理论，最需要提高的就是实际操作的能力。“挖牛”工作室和学院联系了“千锋教育”培训机构，在校内进行三天的《HTML5移动开发》集训。需要熟悉HTML、CSS、JavaScript、XML等知识，熟练运用Hbuilder、Google Chrome浏览器调试工具，三天集训时间虽短，收获颇多。
　　第一天，首先从HTML5 开发行业现状讲起，前端开发行业发展迅速，技术更新速度令人咂舌。老师是前端开发大牛，听听他成长的故事和对学习的建议很有帮助，我在大二学习过了《HTML5和CSS3》，自学过了JavaScript，但是毕竟还是照本宣科的时候多，很多项目还是按照书本上的照做的，这样跟得上前端开发行业的步伐？老师从开始就拿实际项目来讲授，照片墙，了解了hover、rotate等知识。接着我们使用CSS3做了一个按钮，调整照片的边距，然后让我们输出数字，使用冒泡排序，说实话近来一直以Java为核心，然后练着Android，c语言真是有些生疏了，不过还是憋了半天写出来了。下午我们加入了js只做了一个简易的计算器。
　　
calcmain.css

@charset "utf-8";
#jisuanqi{
    width: 240px;
    height: 400px;
    background-color: #5B5B5B;
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0; 
}
#out{
    width: 240px;
    height: 100px;
    /*文字颜色*/
    color: white;
    text-align: right;
    font-size: 20px;
    line-height: 100px;
}
#jisuanqi a{
    float: left;
    width: 60px;
    height: 60px;
    background: #ccc ;
    color: black;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
}
#jisuanqi a:nth-child(2){
    width: 180px;
}
#jisuanqi a:nth-child(16){
    width: 120px;
}

//两个数和计算符号
var numb1="";
var numb2="";
var fuhao="";

//打印框
var lab=document.getElementById("out");
var btns=document.getElementsByTagName("a");

for(var i=0;i<btns.length;i++){
    var btn=btns[i];
    //拿到每一个按钮，然后获取到点击他是数字还是符号，是符号的话就去判断他是哪一个符号
    btn.onclick=function(){
        //获取点击上的文本
        var text=this.innerHTML;
        switch (text){
        case "AC":
        numb1="";
        numb2="";
        lab.innerHTML="";
        fuhao="";
        break;
        case "-":
        //符号的变量变成减号
        fuhao="-";
        break;
        case "+":
        fuhao="+";
        break;
        case "*":
        fuhao="*";
        break;
        case "/":
        fuhao="/";
        break;
        case "=":
        var f_numb1=parseFloat(numb1);
        var f_numb2=parseFloat(numb2);

        switch(fuhao){
            case "+":
            lab.innerHTML=f_numb1+f_numb2;
                break;
            case "-":
            lab.innerHTML=f_numb1-f_numb2;
                break;
            case "*":
            lab.innerHTML=f_numb1*f_numb2;
                break;
            case "/":
            lab.innerHTML=f_numb1/f_numb2;
                break;
        }


        break;
        default:
        //判断符号是否有值，没有值相当于还在拼接第一个数
        if(fuhao == ""){
            numb1=numb1+text;
            lab.innerHTML=numb1;
        }else{
            numb2=numb2+text;
            lab.innerHTML=numb2;
        }
        break;
        }
    }
}