京東2018校招Web前端工程師筆試有感

極客範兒發表於2017-09-08
Web前端工程師筆試

　　在牛客網練習過近兩年的題，最後的筆試也在牛客網上。
　　這次筆試根據我的印象，考察了ES6的新規範，JS的基礎考察了不少，JQuery涉及了一部分，網路協議有一道，關於HTML5和CSS的新規範也有相當一部分。操作DOM物件的有兩三道，canvas有一道。最後的兩道程式設計答題，一道用JS寫函式，一道我用java完成的。前端知識考察的比較多，演算法考的比前一年少。前端是我想發展的方向，加油！
　　聽大佬講這種型別的考試是可以用兩臺電腦的。不要以學習為目的，以進去為目的，進去以後再學習也是可以的。不過我是老實人，都是靠自己原有知識儲備答的題。
　　JavaScript第一道答題時購物車的問題。自己設計程式，可以實現刪除每件商品和商品總價。完成了一個小程式僅供參考。
　　

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <style type="text/css">  
body,html{  
    padding: 0;  
    margin: 0;  
    font-size: 14px;  
    color: #000000;  
}  
table{  
    border-collapse: collapse;  
    width: 100%;  
    table-layout: fixed;  
}  
thead{  
    background: #3d444c;  
    color: #ffffff;  
}  
td,th{  
    border: 1px solid #e1e1e1;  
    padding: 0;  
    height: 30px;  
    line-height: 30px;  
    text-align: center;  
}  
    </style>  
</head>  
<body>  
<table id="jsTrolley">  
    <thead><tr><th>名稱</th><th>價格</th><th>操作</th></tr></thead>  
    <tbody>  
        <tr><td>產品1</td><td>10.00</td><td><a href="javascript:void(0);">刪除</a></td></tr>  
        <tr><td>產品2</td><td>30.20</td><td><a href="javascript:void(0);">刪除</a></td></tr>  
        <tr><td>產品3</td><td>20.50</td><td><a href="javascript:void(0);">刪除</a></td></tr>  
    </tbody>  
    <tfoot><tr><th>總計</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>  
</table>  

<script type="text/javascript">  



function add(items) {  

    sum = 60.70;  
    for(var i =0 ;i<items.length ;i++){  
        var add = document.createElement("tr");  
        var src = document.getElementsByTagName("tbody");  
        add.innerHTML = "<td>"+items[i].name+"</td><td>"+items[i].price+"</td><td><a href='javascript:void(0);'>刪除</a></td>";  
        src[0].appendChild(add);  
        sum +=items[i].price;  
    }  
    //var num = 3 +items.length;  
    var tableObj = document.getElementById("jsTrolley");  
    var num = tableObj.rows.length -2;  
    tableObj.rows[4+items.length].cells[1].innerText  =sum.toFixed(2)+"("+num+"件商品)";  

}  

function bind() {  

    var arr = document.getElementsByTagName("a");  
    var src = document.getElementsByTagName("tbody");  
    s = src[0];  
    var len = arr.length;  
    for(var i =0 ;i<len ;i++)  
    {  
        arr[i].setAttribute("onclick","foo(s,this)");  
    }  


}  

function foo(x,y){  
    var tar = y.parentNode.parentNode;  
    x.removeChild(tar);  
    var v = y.parentNode.previousSibling.innerHTML;  
    sum -=v;  
    //console.log(sum);  
    var tableObj = document.getElementById("jsTrolley");  
    var num = tableObj.rows.length -2;  
    //console.log(sum2.toFixed(2)+"---"+num2);  
    tableObj.rows[tableObj.rows.length-1].cells[1].innerText = sum.toFixed(2)+"("+num+"件商品)";  

}     

var items = [{name:'ilv',price:10.0},{name:'ilv2',price:10.0}];  

add(items);  
bind();  


function show(){  
    var tableRowInfo ="";  
    tableObj = document.getElementById("jsTrolley");  
    for(var i =0 ;i<tableObj.rows.length ; i++){  

        for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){  
            tableRowInfo  +=  tableObj.rows[i].cells[j].innerText + " ";  
        }  
        console.log(tableRowInfo); // 列印每行資訊  
        tableRowInfo ="";     
    }  
}  
show();  


</script>  


</body>  
</html>

前端部分的程式碼可以線上除錯還是比較人性化的。

相關文章