一道很老的前端筆試題

時間 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);
    };
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。