京东秋招笔试题汇总

最新推荐文章于 2023-10-28 19:18:56 发布

奔跑的前端er

最新推荐文章于 2023-10-28 19:18:56 发布

阅读量537

点赞数 1

分类专栏：面试准备文章标签：京东笔试秋招前端

本文链接：https://blog.csdn.net/caoxinhui521/article/details/77899338

版权

面试准备专栏收录该内容

16 篇文章 1 订阅

订阅专栏

首先给出第一个编程题：要求实现一个添加方法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"/>&nbsp;全选</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"/>&nbsp;全选</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);

奔跑的前端er

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
京东秋招笔试题汇总

首先给出第一个编程题：要求实现一个添加方法add，传入一个对象，对象有name和price属性，要求执行add方法后，列表中添加一行。实现bind方法，点击click按钮删除按钮所在的行。HTML和CSS已经给定了，如下：//html部分<table id="jsTrolley"> <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></the
复制链接

扫一扫