京东2018秋招前端笔试编程题

最新推荐文章于 2024-05-07 11:55:37 发布

cuihu811371804

最新推荐文章于 2024-05-07 11:55:37 发布

阅读量796

点赞数 1

分类专栏： javaScript杂记文章标签：京东前端编程

本文链接：https://blog.csdn.net/cuihu811371804/article/details/77902534

版权

javaScript杂记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要求看起来挺简单吧，效果如下
这里写图片描述
要求就是有个add函数，用于添加，然后每一行给个删除按钮，然后总计里面会变动，先上代码再说话：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--code here-->
  <title>demo</title>
  <style>
    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>

window.onload=function(){
  var doc = window.document ;
  var cl = doc.getElementsByTagName('tbody')[0];
  cl = cl.getElementsByTagName('tr')[0];
  cl = cl.cloneNode(true) ;
  function add(item){
    var clo = cl.cloneNode(true) ;
    var k = doc.getElementsByTagName('tbody')[0];
    var name = clo.getElementsByTagName('td')[0];
    name.innerHTML = item.name;
    var price = clo.getElementsByTagName('td')[1];
    price.innerHTML = item.price;
    globalPrice.changePrice(item.price,1);
    var a = clo.getElementsByTagName('a')[0];
    a.onclick = function(){
      //console.log('fd');
      changeDel(this);
    };
    k.appendChild(clo);
  }
  function bind(){
    var allt = (doc.getElementsByTagName('tbody')[0]).getElementsByTagName('tr');
    for(var i=0; i<allt.length;i++){  
      (function(n){
         var a = allt[n].getElementsByTagName('a')[0];
        a.onclick =function(){
          changeDel(this);
        };
      })(i)
    }
  }
  function changeDel(that){
        var tr = that.parentNode.parentNode ;
          var price = tr.getElementsByTagName('td')[1];
          price = price.innerHTML;
          price = parseFloat(price);
          globalPrice.changePrice(price,-1);
          that.parentNode.parentNode.parentNode.removeChild(that.parentNode.parentNode);
  }
  var globalPrice = {allPrice:0};
  globalPrice.changePrice=function(price,flag){
     price *=flag ;
     var priceTag = 
     (doc.getElementsByTagName('tfoot')[0]).getElementsByTagName('td')[0];
     var nowPriceTag = priceTag.innerHTML
     var nowPrice =(nowPriceTag.match(/^[\d|\.]+/i))[0];
     nowPrice=parseFloat(nowPrice);
     nowPrice +=price ;
     var tmp = nowPrice*100 ;
     tmp = parseInt(tmp);
     nowPrice = tmp.toString() ;
     var length = nowPrice.length ;
     tmp='';
     for(var i=0;i<length-2;i++)
     {
      tmp+=nowPrice[i] ;
     }
     tmp+=('\.'+nowPrice[length-2]+nowPrice[length-1]);
     console.log(tmp);
     nowPrice = tmp;
     console.log(nowPrice);
     var time = (nowPriceTag.match(/\d+/g))[2];
     time = parseInt(time);
     time +=flag  ;
     time = time.toString() ;
     //console.log(time);
      nowPriceTag=nowPriceTag.replace(/^[\d|\.]+/i,nowPrice) ;
      //console.log(nowPriceTag);
     nowPriceTag=nowPriceTag.replace(/\(\d+/i,'('+time) ;
     priceTag.innerHTML=nowPriceTag;

  }
  bind();
  add({'name':32,'price':32});
  add({'name':'fda','price':43});
}
</script>
</body>
</html>

简单不代表好做

先说个教训，开始看着以为简单，后面想着想着，突然觉得，这个控制浮点数精度真是麻烦，然后再看，add添加，是代表那个示例也要做个删除做好吧，还以为和之前阿里那个会搞个序号控制什么的，后来突然发现根本不用这么麻烦，而且，浮点数精度，要舍去小数位，哪来的精度可说（当然，出现-1也不应该）

简单设计

大概就是，控制总计显示的部分可以独立出来，然后删除增加做个控制开关就是，然后，先给示例加个点击，然后为add做

细节

新手问题

先说一个很基本的东西，可能是学js看了很多随意的，觉得字符串可以随便玩，但实际上，字符串哪里都一样，可以读但是不能改,该是常量就得是常量，另外说个const a =[];a[1]=3,这类似cpp里面的指针常量，int const *,可怜我还想了半天（半路出家js）

关于this

这次remove直接霸气用this，然后为了复用，就做成函数，这个时候注意onclick写成的函数，一定要给他一个闭包的机会，这样才能传递this变量，详细参考相关资料（或者另一篇文章）

其它

讲真，没啥特别好说的了，，，，祝自己好运

cuihu811371804

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
京东2018秋招前端笔试编程题

要求看起来挺简单吧，效果如下要求就是有个add函数，用于添加，然后每一行给个删除按钮，然后总计里面会变动，先上代码再说话：<!DOCTYPE html><html><head> <meta charset="utf-8">  <title>demo</title> <style> body,html{ padding: 0;
复制链接

扫一扫