JavaScript实现购物车

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       .wrap{
           width: 800px;
           margin: 0 auto;
       }
       .box,#box{
           width: 800px;
           border: 2px solid green;
           position: relative;
           top: 0;
           padding: 10px;
       }
       .check,p,span,.num,.add,.minus{
       /*   position: absolute;
           left: 0;
           top: 0;*/
           display: inline-block;
       }
       img{
           width: 82px;
           height: 82px;
           display: inline-block;
       }
       p{
           margin: 0 40px;
           color: #999999;
       }
       .price {
           vertical-align: middle;
           margin: 0 40px;
           font-size: 20px;
           color: red;
       }
       .num{
           width: 20px;
           height: 20px;
           border:1px solid;
           line-height: 20px;
           text-align: center;
           margin-left: 40px;
       }
       #selecteAll,#dele,#move,#product,#proNum,#textP,#totalPri{
           display: inline-block;
           color: #666666;
           font-size: 16px;
           margin: 15px;
       }
       #proNum,#totalPri,#textP{
           margin:15px 0px;
       }
       #product{
           margin-right: 0px;
       }
       #accounts{
           display: block;
           float: right;
           margin-top: 40px;
       }
       #box::after{
           content: "";
           display: block;
           clear: both;
       }
       #over{
           margin-left: 30px;
       }
   </style>
</head>
<body>
   
   <div class="wrap">
       
       <div id="box">
           <input type="checkbox" id="selecteAll">全选
           <span id="dele">删除选中商品</span>
           <span id="move">移动到我的关注</span>
           <span id="product">一共选中</span>
           <span id="proNum">件商品</span>
           <span id="textP">,总价格为(不含运费)$</span>
           <span id="totalPri">元</span>
           <input type="button" value="结算" id="over">
       </div>
   </div>
</body>
<script>
   //获取变量
   var wrap = document.querySelector(".wrap");
   var box = document.querySelector(".box");
   var img = document.querySelector("img");
   // for循环生成下面产品
   for(var i = 1 ; i < 6 ; i++){
       list();
       // 调用函数
   }
   // 创建列表函数
   function list(){
       var count = 0;
       // 创建大盒子
       var box = document.createElement("div");
       box.className = "box";
       // 创建勾选
   var check = document.createElement("input");
       check.className = "check";
       // 为选框设置点击事件
       check.onclick = function(){
           if (check.checked == true) {
               count = 1;
               num.innerHTML = count;
           }else{
               count=0;
               num.innerHTML = count;
           }
       }
       // 设置type类型
       check.setAttribute("type","checkbox");
       // 创建图片
       var imgs = document.createElement("img");
       imgs.src = "img/img"+i+".png";
       // 创建文本
       var text = document.createElement("p");
       text.innerHTML = "绿色认证好蔬菜";
       // 创建价格
       var price = document.createElement("span");
       price.innerHTML = "20.00"
       price.className = "price";
       // 创建数量
       var num = document.createElement("div");
       num.className = "num";
       num.innerHTML = count;
       // 创建+按钮
       var add = document.createElement("input");
       add.setAttribute("type","button");
       add.className = "add";
       add.value = "+";
       // 在每次生成的box中调用add点击事件
       add.onclick = function(){
           // 当点击add时check会选中
           check.checked = true;
           count+=1;
           console.log(count);
           num.innerHTML = count;
       }
       // 创建-按钮
       var minus = document.createElement("input");
       minus.setAttribute("type","button");
       minus.className = "minus"
       minus.value = "-";
       // 在每次生成的box中调用minus的点击事件
       minus.onclick = function(){
           if (count > 0 ) {
               count--;
               console.log(count);
               num.innerHTML = count;

           }else{
               check.checked = false;
               count = 0;
               num.innerHTML = count;
               console.log(count);
           }
       }
       // 将所有创建标签写入wrap中
       wrap.appendChild(box);
       box.appendChild(check);
       box.appendChild(imgs);
       box.appendChild(text);
       box.appendChild(price);
       box.appendChild(num);
       box.appendChild(add);
       box.appendChild(minus);
   }
   // 结算行设置
   // 获取变量
   var chek = document.querySelectorAll(".check");
   var number = document.querySelectorAll(".num");
   var pri = document.querySelectorAll(".price");
   // 点击全选
   selecteAll.onclick = function(){
       if (selecteAll.checked) {
           for(var i = 0;i < chek.length;i++){
           var count = 0;
           chek[i].checked = true;
           count = 1;
           number[i].innerHTML = count;
           }
       }
   }
   // 点击删除
   dele.onclick = function(){
       for(var i = 0 ; i < chek.length ; i++){
           var count = 0
           number[i].innerHTML = count;
           chek[i].checked = false;
           selecteAll.checked = false;
       }
   }
   // 点击结算
   over.onclick = function(){
           var proNums = 0;
           var total = 0;
           console.log(111);
       for(var i = 0 ; i < 5 ; i++){
           // console.log(111);
           console.log(chek[i]);
           if (chek[i].checked) {
               // 数量
               console.log(111);
               console.log(number[i].innerHTML);
               proNums += Number(number[i].innerHTML);
               total += Number(pri[i].innerHTML)*Number(number[i].innerHTML);
           }
       }
       proNum.innerHTML = proNums+"件商品" ;
       totalPri.innerHTML = total+"元";
   }
</script>
</html>

JavaScript实现购物车

相关推荐