HTML的购物车案例

购物车案例

今天我们来分享一下使用HTML语言编写的购物车案例,废话不多说,上代码。


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
/*设置表格的样式*/
    table{
/*设置表格的为绝对布局,且设置为居中对齐*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  style>
head>
<body>

<table border="">
  <tr>
    <td>全选<input type="checkbox" onclick="selectAll(this.checked)">td>
    <td>名称td>
    <td>单价td>
    <td>个数td>
    <td>总价td>
    <td>操作td>
  tr>
  <tr>
    <td><input type="checkbox">td>
    <td>草莓td>
    <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9td>
    <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3td>
    <td class="sum">19.9td>
    <td>
      <button onclick="calcRow('+',this.parentElement.parentElement)">+button>
      <button onclick="calcRow('-',this.parentElement.parentElement)">-button>
      <button onclick="delRow(this.parentElement.parentElement)">删除button>
    td>
  tr>
  <tr>
    <td><input type="checkbox">td>
    <td>西瓜td>
    <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9td>
    <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3td>
    <td class="sum">19.9td>
    <td>
      <button onclick="calcRow('+',this.parentElement.parentElement)">+button>
      <button onclick="calcRow('-',this.parentElement.parentElement)">-button>
      <button onclick="delRow(this.parentElement.parentElement)">删除button>
    td>
  tr>
  <tr>
    <td><input type="checkbox">td>
    <td>菠萝td>
    <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9td>
    <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3td>
    <td class="sum">19.9td>
    <td>
      <button onclick="calcRow('+',this.parentElement.parentElement)">+button>
      <button onclick="calcRow('-',this.parentElement.parentElement)">-button>
      <button onclick="delRow(this.parentElement.parentElement)">删除button>
    td>
  tr>
  <tr>
    <td colspan="5"><h1>总价: $<font color="green" id="allPrice">0.0font>h1>td>
    <td><button onclick="delCKRow()">删除所选的商品button>td>
  tr>
table>

<script>

  //计算当前所有商品的总价
  function calcAll() {
    //获得页面中所有的行
    var rs=document.getElementsByTagName("tr")
    var sum=0;
    for(let i=1;i<rs.length-1;i++){
      //rs[i]就是除了第一行之外的其他的行
      var s1= textContent = rs[i].getElementsByClassName("sum")[0].textContent
      sum+=parseFloat(s1)
    }
    //给页面赋值,只要小数点后两位
    allPrice.textContent=sum.toFixed(2)
  }

  //删除选中的行
  function delCKRow() {
    //获得页面中所有的行
    var rs=document.getElementsByTagName("tr")
    //将集合collection变成数组array
    rs=Array.from(rs)
    for(let i=1;i<rs.length-1;i++){
      //拿到行中对应的多选框
      var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
      //判断多选框是否被选中
      if(ck.checked){
        //删除该行
        rs[i].outerHTML=""
      }
    }
    calcAll()
  }

  //全选功能
  function selectAll(status) {
    var is=document.querySelectorAll("input[type='checkbox']")
    for (let i of is){
      i.checked=status
    }
  }

  //按钮点击删除该行
  function delRow(tr) {
    tr.outerHTML=""
    calcAll()
  }

  //页面数值变化重新计算价格
  function calcRow(rex,tr) {
    //rex是运算符号
    //tr是当前对应的行
    var td=tr.getElementsByClassName("count")[0]
    if (td.textContent>0){
      if(rex==="-"){
        td.textContent-=1
      }
    }
    if (td.textContent>-1){
      if(rex==="+"){
        td.textContent=td.textContent*1+1
      }
    }
    calc(tr)
  }

  //写一个函数:算出当前一行中的价格并完成赋值
  function calc(tr) {
    //value只有在input或者select
    //其他的内容全部使用textContent,innerHTML
    var price=tr.getElementsByClassName("price")[0].textContent
    var count=tr.getElementsByClassName("count")[0].textContent
    if(isNaN(price*1)){
      tr.getElementsByClassName("price")[0].textContent=0
      price=0
    }
    if(isNaN(count*1)){
      tr.getElementsByClassName("count")[0].textContent=0
      count=0
    }
    //使用单价*数量算出总价 并赋值给对应元素
    tr.getElementsByClassName("sum")[0].textContent=(price*count).toFixed(2)
    calcAll()
  }

  //窗口的加载事件  会在整个页面加载完成之后执行
  window.onload=()=>{
    //获得页面中所有的行
    var rs=document.getElementsByTagName("tr")
    for(let i=1;i<rs.length-1;i++){
      calc(rs[i])
    }
  }

script>
body>
html>

效果如下(页面放大200%):

HTML的购物车案例_第1张图片
关于购物车案例就到此为止了,如果有喜欢的话,希望可以给予小编三连(点赞、收藏+关注)

你可能感兴趣的:(笔记,html,javascript,前端)