京东秋招笔试题汇总
来源：互联网 发布：淘宝领取的优酷会员 编辑：程序博客网 时间：2024/06/05 07:54
首先给出第一个编程题：要求实现一个添加方法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>产品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>//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 = '<td>' + item.name + '</td><td>' + item.price.toFixed(2) + '</td><td><a href="javascript:void(0);">删除</a></td>'; 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 + '件商品)'; }完整的购物车实现效果：
<!DOCTYPE html><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-TR350</span></td> <td class="price">5999.88</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">5999.88</td> <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 HS</span></td> <td class="price">3888.50</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">3888.50</td> <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-WX300</span></td> <td class="price">1428.50</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">1428.50</td> <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 25</span></td> <td class="price">640.60</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">640.60</td> <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.00</span></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;i<checkbox.length;i++){ checkbox[i].onclick=function () { if(this.className.indexOf("check-all")>=0){ for(var j=0;j<checkbox.length;j++){ checkbox[j].checked=this.checked; } } if(!this.checked){ for(var j=0;j<checkAll.length;j++){ checkAll[j].checked=false; } } 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;i<tr.length;i++){ tr[i].onclick=function (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].onkeyup=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;i<tr.length;i++){ if(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);阅读全文
0 0
- 京东秋招笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- c++笔试题汇总
- noip2016d1t1 玩具谜题
- 第7章 Vue.js常用插件
- 克隆VMware虚拟机
- 最近项目用到Dubbo框架,临时抱佛脚分享一下共探讨
- 安卓ExpandableListView的简单使用
- 京东秋招笔试题汇总
- Kubernetes集群监控
- Semaphore Kernel Mode
- 用 JSON 来避免中文乱码问题
- 个人，eclipse配置备用
- 使用maven插件Tomcat7 启动成功但是404的问题
- JavaScript toLocaleString() 方法
- zigbee（题型整理1）
- iOS-图片拼接和图片旋转问题
