你需要了解的纯原生JS实现带有功能的前端购物车

先来介绍一下都有哪些功能叭

  1. 添加购物车,清单库存数量会对应减少,库存不足会警告
  2. 从购物车删除,库存将返回清单,总价相应变化
  3. 点击"-",数量会返回到清单库存
  4. 点击"+",清单中库存会减少,库存不足会警告
  5. 勾选或取消勾选商品总价会相应变化
  6. 总价默认计算被选中的商品,添加商品到购物车时默认被选中
  7. 可以进行全选和反选,并一键删除,库存返回清单,总价改变

好嘞,由于代码的注释已经非常的详细了,在此不再做过多的解释了,没用任何框架了,看着注释代码很易懂!

先上HTML5的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>购物车案例</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .left{
      width: 55%;
      margin: 25px;
      float: left;
    }
    .right{
      float: left;
      margin-top: 60px;
    }
    ul li{
      color: red;
      font-weight: bold;
    }
    h1{
      text-align: center;
      color: red;
    }
    table{
      border: 2px solid #aaa;
      width: 100%;
      border-collapse: collapse;
    }
    th,td{
      border: 2px solid #bbb;
      padding: 6px;
    }
    tr td:last-child{
      text-align: center;
    }
    tr td:nth-child(1) img{
      vertical-align: middle;
    }
    .num{
      text-align: center;
    }
    #allchoose{
      margin-left: 10px;
    }
    #car{
      width: 100%;
      border-collapse: collapse;
    }
    #car table{
      border: 2px solid #aaa;
      width: 100%;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
<div class="left">
  <h1>购书清单</h1>
  <table>
    <thead>
      <tr>
        <th>书名</th>
        <th>单价</th>
        <th>作者</th>
        <th>出版社</th>
        <th>库存</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="items">
      <tr>
        <td><img src="book-images/dl.jpg">深度学习</td>
        <td>100</td>
        <td>赵老师</td>
        <td>科学出版社</td>
        <td>129</td>
        <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
      </tr>
      <tr>
        <td><img src="book-images/ml.jpg">机器学习</td>
        <td>120</td>
        <td>周老师</td>
        <td>清华大学出版社</td>
        <td>6</td>
        <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
      </tr>
      <tr>
        <td><img src="book-images/cv.jpg">计算机视觉</td>
        <td>130</td>
        <td>李老师</td>
        <td>国防工业出版社</td>
        <td>666</td>
        <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
      </tr>
      <tr>
        <td><img src="book-images/dip.jpg">数字图像处理</td>
        <td>140</td>
        <td>彭老师</td>
        <td>人民邮电出版社</td>
        <td>450</td>
        <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
      </tr>
      <tr>
        <td><img src="book-images/webgl.jpg">webGL编程指南</td>
        <td>150</td>
        <td>吴老师</td>
        <td>清华大学出版社</td>
        <td>99</td>
        <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
      </tr>
      <tr>
        <td><img src="book-images/unity.jpg">Unity3D游戏开发</td>
        <td>200</td>
        <td>骆老师</td>
        <td>浙江大学出版社</td>
        <td>300</td>
        <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
      </tr>
    </tbody>
  </table>
  <h1>购物车</h1>
  <div id="car">
    <div id="allchoose">
      <input type="button" id="allSelected" value="全选">
      <input type="button" id="_Selected" value="反选">
      <input type="button" id="delete" value="删除商品">
    </div><br>
    <table>
    <thead>
      <tr>
        <th>书名</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
        <th>删除</th>
      </tr>
    </thead>
    <tbody id="goods"></tbody>
    <tfoot>
      <tr>
        <td colspan="3" align='center'>总计</td>
        <td id="total" colspan="2">0</td>
      </tr>
    </tfoot>
  </table>
  </div>
</div>
<div class="right">
  <ul>
    <li>功能介绍:</li>
    <li>添加购物车,清单库存数量会对应减少,库存不足会警告</li>
    <li>从购物车删除,库存将返回清单,总价相应变化</li>
    <li>点击"-",数量会返回到清单库存</li>
    <li>点击"+",清单中库存会减少,库存不足会警告</li>
    <li>勾选或取消勾选商品总价会相应变化</li>
    <li>总价默认计算被选中的商品,添加商品到购物车时默认被选中</li>
    <li>可以进行全选和反选,并一键删除,库存返回清单,总价改变</li>

  </ul>
</div>
  <script src="goods.js"></script>
</body>

</html>

然后是JS的代码,代码文件名为“goods.js

//控制全选
var targets=document.getElementsByName('choose')
document.getElementById('allSelected').onclick=function(){   //全选
  for (var i=0;i<targets.length;i++){
    targets[i].checked=true;
  }
  total()   //更新总价格
}
document.getElementById('_Selected').onclick=function(){    // 反选
  for (var i=0;i<targets.length;i++){
    targets[i].checked=!targets[i].checked;//取反操作
  }
  total()    //更新总价格
}

document.getElementById('delete').onclick=function(){       //删除
  var sign=targets.length    //targets的起始长度
  var _length=0
  for(var i=0;i<targets.length;i++){
    if(targets[i].checked===true){
      _length++   //被选中的targets的长度
    }
  }
  var leftL=sign-_length    //除去被选中后剩余的targets长度
  console.log(_length)
  console.log(leftL)

  while(targets.length>leftL){    //删除一行,targets长度会减少1,而i++导致每次执行删除操作只能删除一半,故再套一层循环

    // console.log("targets: "+targets.length)
    for(var i=0;i<targets.length;i++){//执行循环后,targets长度会减半
      if(targets[i].checked===true){
        del(targets[i])    //调用删除函数
      }
    }
  }
}

//将商品添加购物车
function add_book(btn){
  var tr=btn.parentNode.parentNode
  var tds=tr.getElementsByTagName('td')
  var inner_name=tds[0].innerHTML   //带上HTML标签
  var name=tds[0].innerText    //书的名字,不带HTML标签
  // console.log(inner_name)
  // console.log(name)
  var price=tds[1].innerHTML  //书的价格
  var leftAm=parseInt(tds[4].innerHTML)
  if (leftAm===0){
    alert('库存不足!')
    return //如果库存不足函数运行到这里会退出
  }
  //如果库存充足继续向下执行
  else{
    tds[4].innerHTML=leftAm-1
  }
  var tbody=document.getElementById('goods')
  var trs=tbody.getElementsByTagName('tr')
  // var row=tbody.insertRow(-1)
  //不能在此定义row,因为它会默认添加一个新的空行,会导致str的起始length是1而不是0,而且innerText获取不到任何东西就会报错,找了很久的bug原来是它!!!
  // console.log(trs.length)
  var flag=0 //定义flag来判断在购物车中是否已经存在相同书籍
  for(var i=0;i<trs.length;i++){
    var tds=trs[i].getElementsByTagName('td')
    var book_name=tds[0].innerText    //获取书的名字
    if(book_name===name){//在购物车中找到了相同的书
      flag=1
      // var input=trs[i].getElementById('num')    如果把num设置成id,获取不到内容,故改成class
      var input=trs[i].getElementsByClassName('num')[0]
      // console.log(input)
      var value=parseInt(input.value)
      // console.log(value)
      input.value=value+1
      money=parseFloat(tds[3].innerHTML)
      tds[3].innerHTML=price*(value+1)    //更新该书的总价格
    }
  }
  if(flag===0){
    var row=tbody.insertRow(-1)//-1表在当前行后插入行
    row.innerHTML="<td>"+"<input type='checkbox' name='choose' checked='true' onclick='total()'/>"+inner_name+"</td>"+
    "<td>"+price+"</td>"+
    "<td>"+
      "<input type=button value='-' onclick=change(this,-1) style='width: 20px'/>"+
      "<input type=text class=num value='1' size=1 readonly'/>"+
      "<input type=button value='+' onclick=change(this,+1) style='width: 20px'/>"+
    "</td>"+
    "<td>"+price+"</td>"+
    "<td>"+"<input type=button value='删除' onclick='del(this)'/>"+"</td>"
  }
  total()
}


//增加或者减少n本书
function change(btn,n){
  var inputs=btn.parentNode.getElementsByTagName('input')
  var amount=parseInt(inputs[1].value)
  var tds=btn.parentNode.parentNode.getElementsByTagName('td')
  // var money=parseFloat(tds[3].innerHTML)    //总价
  var price=parseFloat(tds[1].innerHTML)    //单价
  if(amount<=0 && n<0){ //数量为0时不能再减少数量
    return
  }
  var name=tds[0].innerText
  var item_trs=document.getElementById('items').getElementsByTagName('tr')
  for (var i=0;i<item_trs.length;i++){
    var item_tds=item_trs[i].getElementsByTagName('td')
    // console.log(item_tds[0].innerText)
    if(item_tds[0].innerText===name){
      var item_amount=parseInt(item_tds[4].innerHTML)
      // console.log(item_amount)
      if(n>0 && item_amount<=0){
        alert("库存不足!")
        return
      }
      item_tds[4].innerHTML=item_amount-n
    }
  }
  inputs[1].value=amount+n
  tds[3].innerHTML=price*(amount+n)
  total()
}

//点击每行的删除
function del(btn){
  var tr=btn.parentNode.parentNode
  var tds=tr.getElementsByTagName('td')
  var inputs=tds[2].getElementsByTagName('input')
  var amount=parseInt(inputs[1].value)    //获取书的数量
  var name=tds[0].innerText
  var trs=document.getElementById('items').getElementsByTagName('tr')
  for (var i=0;i<trs.length;i++){
    var tds=trs[i].getElementsByTagName('td')
    var item_name=tds[0].innerText    //清单中该书的数名字
    if(name===item_name){
      var item_amount=parseInt(tds[4].innerHTML)    //清单中该书的数量
      tds[4].innerHTML=item_amount+amount
    }
  }

  tr.remove()//移除该行
  total()

}

//计算总金额
function total(){
  var tbody=document.getElementById('goods')
  var trs=tbody.getElementsByTagName('tr')
  var sum=0   //总价
  for (var i=0;i<trs.length;i++){
    var tds=trs[i].getElementsByTagName('td')
    var input=tds[0].children[0]    //获取到input标签
    // console.log(tds[0].innerHTML)
    // console.log(input)
    var money=parseFloat(tds[3].innerHTML)
    if(input.checked===true){    //只有当商品被勾选时才会被计入总价
      sum+=money
    }
  }
  var total=document.getElementById('total')
  total.innerHTML=sum
}

最后的效果就是这样的啦^_^


 

求:购物车场景 商品价格变化JS实现代码

04-27
``` <ul class="mui-table-view" id="lists"> <li class="mui-table-view-cell rs-orderby-li"> <div class="rs-ordertop rs-over"> <div class="mui-pull-left mui-checkbox" style="margin-top: 30px;"> <input type="checkbox" class="rs-checkbox"> </div> <div class="rs-txt"> <p class="rs-txt-title">商品标题商品标题商品标题商品标题</p> <div class="rs-over"> <span class="mui-pull-left">商品价格</span> <div class="mui-numbox mui-pull-right" data-numbox-min="1"> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button> <input class="mui-input-numbox" type="number" value="商品数量"> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button> </div> </div> </div> <span class="mui-icon mui-icon-trash" style="padding-top: 35px;"></span> </div> <div class="rs-bottom"> 其它文字其它文字其它文字其它文字 </div> </li> </ul> <span id="nums">商品总金额</sapn> ``` ---------------------------------------------- 说明: 1、li标签是后台循环出来的 一个li一个商品信息 2、页面引用了mui.min.js, (商品数量的加减效果是mui.min.js实现的) **求JS代码: 1、页面加载完后计算出 所有商品及其对应数量 的金额总和 2、商品数量的增减,商品总金额要增减对应商品的金额。 3、 <input type="checkbox" class="rs-checkbox">勾选与取消勾选事件,商品总金额对应增加减少该商品数金额** 4、我在减号按钮上写了个 onclick,当商品数量是2的时候,按减号按钮,商品数量变成1,但却不执行 onclick函数了,这是mui.min.js的问题吗,(大于2的数字按减号都会执行) _*注:如果1,2,3能解决这个问题,4可忽略,需要JS代码。_
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值