京东秋招笔试题汇总
首先给出第一个编程题：要求实现一个添加方法add，传入一个对象，对象有name和price属性，要求执行add方法后，列表中添加一行。实现bind方法，点击click按钮删除按钮所在的行。HTML和CSS已经给定了，如下：
//html部分
<table id="jsTrolley">
<thead><tr><th>名称th><th>价格th><th>操作th>tr>thead>
<tbody>
<tr><td>产品1td><td>10.00td><td><a href="javascript:void(0);">删除a>td>tr>
<tr><td>产品2td><td>30.20td><td><a href="javascript:void(0);">删除a>td>tr>
<tr><td>产品3td><td>20.50td><td><a href="javascript:void(0);">删除a>td>tr>
tbody>
<tfoot><tr><th>总计th><td colspan="2">60.70(3件商品)td>tr>tfoot>
table>//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>//js部分
function add(items) {
var tbody = document.getElementById('jsTrolley').getElementsByTagName('tbody')[0];
(items || []).forEach(function (item) {
var tr = document.createElement('tr');
tr.innerHTML = '' + item.name
+ ' ' + item.price.toFixed(2) + ' 删除 ';
tbody.appendChild(tr);
});
update();
}
add({name:'fkewe',price:134});
function bind() {
var table = document.getElementById('jsTrolley');
table.addEventListener('click', function (event) {
var el = event.target;
if (el.tagName.toLowerCase() === 'a') {
tr = el.parentNode.parentNode;
tr.parentNode.removeChild(tr);
update();
}
});
}
bind();
function update() {
var table = document.getElementById('jsTrolley');
var tbody = table.getElementsByTagName('tbody')[0];
var tfoot = table.getElementsByTagName('tfoot')[0];
var tr = [].slice.call(tbody.getElementsByTagName('tr'), 0);
var total = 0;
tr.forEach(function (tr) {
total += +(tr.getElementsByTagName('td')[1].innerHTML.trim());
});
tfoot.getElementsByTagName('td')[0].innerHTML = total.toFixed(2) + '(' + tr.length + '件商品)';
}完整的购物车实现效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现购物车功能title>
<style>
* {
margin: 0;
padding: 0;
}
a {
color: #666;
text-decoration: none;
}
body {
padding: 20px;
color: #666;
}
.fl{
float: left;
}
.fr {
float: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
text-align: center;
width: 937px;
}
th, td {
border: 1px solid #CADEFF;
}
th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
td {
padding: 10px;
color: #444;
}
tbody tr:hover {
background-color: aqua;
}
.checkbox {
width: 60px;
}
.goods {
width: 300px;
}
.goods span {
width: 180px;
margin-top: 20px;
text-align: left;
float: left;
}
.price {
width: 130px;
}
.count {
width: 90px;
}
.count .add, .count input, .count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add, .count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
}
.count .add:hover, .count .reduce:hover {
color: #f50;
z-index: 3;
border-color: #f60;
cursor: pointer;
}
.count input {
width: 50px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
z-index: 2;
}
.subtotal {
width: 150px;
color: red;
font-weight: bold;
}
.operation {
width: 80px;
}
.operation span:hover, a:hover {
cursor: pointer;
color: red;
text-decoration: underline;
}
img {
width: 100px;
height: 80px;
/*border: 1px solid #ccc;*/
margin-right: 10px;
float: left;
}
.foot {
width: 935px;
margin-top: 10px;
color: #666;
height: 48px;
border: 1px solid #c8c8c8;
background-color: #eaeaea;
/*background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));*/
position: relative;
z-index: 8;
}
.foot div, .foot a {
line-height: 48px;
height: 48px;
}
.foot .select-all {
width: 100px;
height: 48px;
line-height: 48px;
padding-left: 5px;
color: #666;
}
.foot .closing {
border-left: 1px solid #c8c8c8;
width: 100px;
text-align: center;
color: #000;
font-weight: bold;
background-color: aqua;
cursor: pointer;
}
.foot .total{
margin: 0 20px;
cursor: pointer;
}
.foot #priceTotal, .foot #selectedTotal {
color: red;
font-family: "Microsoft Yahei";
font-weight: bold;
}
.foot .selected {
cursor: pointer;
}
.foot .selected .arrow {
position: relative;
top:-3px;
margin-left: 3px;
}
.foot .selected .down {
position: relative;
top:3px;
display: none;
}
.show .selected .down {
display: inline;
}
.show .selected .up {
display: none;
}
.foot .selected:hover .arrow {
color: red;
}
.foot .selected-view {
width: 935px;
border: 1px solid #c8c8c8;
position: absolute;
height: auto;
background: #ffffff;
z-index: 9;
bottom: 48px;
left: -1px;
display:none;
}
.show .selected-view {
display: block;
}
.foot .selected-view div{
height: auto;
}
.foot .selected-view .arrow {
font-size: 16px;
line-height: 100%;
color:#c8c8c8;
position: absolute;
right: 330px;
bottom: -9px;
}
.foot .selected-view .arrow span {
color: #ffffff;
position: absolute;
left: 0px;
bottom: 1px;
}
#selectedViewList {
padding: 20px;
margin-bottom: -20px;
}
#selectedViewList div{
display: inline-block;
position: relative;
width: 100px;
height: 80px;
border: 1px solid #ccc;
margin: 10px;
}
#selectedViewList div span {
display: none;
color: #ffffff;
font-size: 12px;
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 18px;
line-height: 18px;
text-align: center;
background-color: aliceblue;
cursor: pointer;
}
#selectedViewList div:hover span {
display: block;
}
style>
head>
<body>
<table id="cartTable">
<thead>
<tr>
<th><label><input class="check-all check" type="checkbox"/> 全选label>th>
<th>商品th>
<th>单价th>
<th>数量th>
<th>小计th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/>td>
<td class="goods"><img src="" alt=""/><span>Casio/卡西欧 EX-TR350span>td>
<td class="price">5999.88td>
<td class="count"><span class="reduce">span><input class="count-input" type="text" value="1"/><span class="add">+span>td>
<td class="subtotal">5999.88td>
<td class="operation"><span class="delete">删除span>td>
tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/>td>
<td class="goods"><img src="" alt=""/><span>Canon/佳能 PowerShot SX50 HSspan>td>
<td class="price">3888.50td>
<td class="count"><span class="reduce">span><input class="count-input" type="text" value="1"/><span class="add">+span>td>
<td class="subtotal">3888.50td>
<td class="operation"><span class="delete">删除span>td>
tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/>td>
<td class="goods"><img src="" alt=""/><span>Sony/索尼 DSC-WX300span>td>
<td class="price">1428.50td>
<td class="count"><span class="reduce">span><input class="count-input" type="text" value="1"/><span class="add">+span>td>
<td class="subtotal">1428.50td>
<td class="operation"><span class="delete">删除span>td>
tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/>td>
<td class="goods"><img src="" alt=""/><span>Fujifilm/富士 instax mini 25span>td>
<td class="price">640.60td>
<td class="count"><span class="reduce">span><input class="count-input" type="text" value="1"/><span class="add">+span>td>
<td class="subtotal">640.60td>
<td class="operation"><span class="delete">删除span>td>
tr>
tbody>
table>
<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选label>
<a class="fl delete" id="deleteAll" href="javascript:;">删除a>
<div class="fr closing">结 算div>
<div class="fr total">合计：￥<span id="priceTotal">0.00span>div>
div>
<script type="text/javascript">
//
var checkAll=document.getElementsByClassName("check-all");
var checkbox=document.getElementsByClassName("check");
var table=document.getElementById("cartTable");
var deleteAll=document.getElementById("deleteAll");
var tr=table.children[1].rows;
var priceTotal=document.getElementById("priceTotal");
for(var i=0;ifunction () {
if(this.className.indexOf("check-all")>=0){
for(var j=0;jthis.checked;
}
}
if(!this.checked){
for(var j=0;jfalse;
}
}
getTotal();
}
}
checkAll[0].checked=true;
checkAll[0].onclick();
function getSubtotal(tr) {
var cell=tr.cells;
var price=cell[2];
var subtotal=cell[4];
var amount=tr.getElementsByTagName("input")[1];
var span=tr.getElementsByTagName("span")[1];
subtotal.innerHTML=(parseInt(price.innerHTML)*parseInt(amount.value)).toFixed(2);
if(amount.value==1){
span.innerHTML="";
} else {
span.innerHTML="-";
}
}
for(var i=0;ifunction (e) {
var e=e||window.event;
// 通过事件对象的target属性获取触发元素
var el=e.target||e.srcElement;
var cls=el.className;
var count=this.getElementsByTagName("input")[1];
var value=parseInt(count.value);
switch (cls){
case "add":
count.value=value+1;
getSubtotal(this);
break;
case "reduce":
count.value=value-1;
getSubtotal(this);
break;
case "delete":
var conf=confirm('Are you sure?');
if(conf){
this.parentNode.removeChild(this);
}
break;
}
getTotal();
}
tr[i].getElementsByTagName('input')[1].οnkeyup=function () {
var val=parseInt(this.value);
if(isNaN(val)||val<=0){
val=1;
}
if(this.val!=val){
this.val=val;
}
getSubtotal(this.parentNode.parentNode);
getTotal();
}
}
function getTotal() {
var selected=0;
var totalPrice=0;
for(var i=0;iif(tr[i].getElementsByTagName("input")[0].checked){
var num=parseInt(tr[i].getElementsByTagName("input")[1].value);
var eachPrice=parseFloat(tr[i].getElementsByTagName('td')[4].innerHTML);
selected+=num;
totalPrice+=parseInt(num*eachPrice);
}
}
priceTotal.innerHTML=totalPrice;
}
script>
body>
html>
关于正则表达式的匹配
var re="something";
var expression=/pattern/flags;
var pattern2=new RegExp("[bc]at","i");
//检测有用性：
expression.test(re);
pattern2.test(re);
pattern.exec(re);