在牛客网练习过近两年的题,最后的笔试也在牛客网上。
这次笔试根据我的印象,考察了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>
前端部分的代码可以在线调试还是比较人性化的。