一道很老的前端笔试题

时间 2019-11-29

原文原文链接

今天看了一个关于前端的笔试题（2010年的）有点老题目也不算难，在这里放上本身的解决方案。javascript

1.用CSS实现布局 css

让咱们一块儿来作一个页面
首先，咱们须要一个布局。
请使用CSS控制3个div，实现以下图的布局 html

附上代码（所有写在一块儿）：前端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div{
    border: 1px #000 solid;
}
#first{
    width: 100px;
    height: 100px;
    margin-left: -310px;
    float: left;
}
#second{
    width: 100px;
    height: 100px;
    margin-left: -310px;
    margin-top:110px;
    float: left;
}

#third{
    width: 200px;
    height: 210px;
    margin-left:110px;
    float:left;
}
</style>

<body>
    <div id="third">
    </div>
    <div id="first">
    </div>
    <div id="second">
    </div>
</body>
</html>

2.用javascript优化布局 java

因为咱们的用户群喜欢放大看页面，因而咱们给上一题的布局作一次优化。 jquery

当鼠标略过某个区块的时候，该区块会放大25%，而且其余的区块仍然固定不动 json

效果以下：框架

代码以下(jquery版)：布局

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
$(function(){
    $("#first").mouseover(function(){
        $("#first").animate({width:"150px",height:"150px"});
    })
})

</script>

开始本身写了个运动框架发现没法同时传输多值，因此仿写了个json传输的代码以实现上述功能：优化

<script type="text/javascript">

function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}
function startMove(obj, json, fnEnd)
{
    clearInterval(obj.timer);
    var attr;
    obj.timer=setInterval(function (){
        
        var bStop=true;                
        for(attr in json)
        {
            var iCur=0;
            iCur=parseInt(getStyle(obj, attr));
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
            
            obj.style[attr]=iCur+iSpeed+'px';
            
            if(iCur!=json[attr])
            {
                bStop=false;
            }
        }
        
        if(bStop)
        {
            clearInterval(obj.timer);
            if(fnEnd)
            {
                fnEnd();
            }
        }
    }, 30);
}


window.onload=function(){
    var oTest=document.getElementById("first");
    oTest.onmouseover=function(){
        startMove(this,{"width":"200","height":"200"},false);
    }
}
</script>

我的写的运动框架中传输的参数分别为move(obj,str,iTarget)，因此只能过对单个参数进行操做，若是同时进行事件绑定，后面的事件会对上一个事件进行覆盖只显示后一个效果，代码以下：我的感受仍是json用的比较少因此才会形成第一印象传输单个值的思路：

function getStyle(obj,name){
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];//ie
    }
    else
    {
        alert("1");
        return getComputedStyle(obj,false)[name];
    }
}


function move(obj,str,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var curr=0;
        curr=parseInt(getStyle(obj,str));
        alert(curr);
        var iSpeed = (iTarget-curr)/8;
        if(iSpeed>0)
            iSpeed = Math.floor(iSpeed);
        else
            iSpeed = Math.ceil(iSpeed);
        if(curr==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            obj.style[str]=curr+iSpeed+"px";

        }

    },30)
}
window.onload=function(){
    var oFrist = document.getElementById("first");
    oFrist.onmouseover=function(){
        move(this,"width",200);
    };
    oFrist.onmouseover=function(){
        move(this,"height",200);
    };
}