javascript购物车源码

最新推荐文章于 2023-06-30 11:11:40 发布

爱上python的猴子

最新推荐文章于 2023-06-30 11:11:40 发布

阅读量849

点赞数

本文链接：https://blog.csdn.net/ma20120607/article/details/43850511

版权

html/xml 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <title>购物车</title>
    <style>
      td
      {
         width:120px;
         text-align:center;
      }
      input
      {
         text-align:center;
      }
    </style>
    <script>
       var sub=document.getElementsByName("sub");
       var add=document.getElementsByName("add");
      function choose()
      {
          var pd=document.getElementsByName("pro");
          var flag=document.getElementById("all").checked;
          for(var i=0;i<pd.length;i++)
          {
             pd[i].checked=flag;
          }
          if(flag)
          {
            var temp=0;
            for(var i=1;i<=pd.length;i++)
            {
             sub[i-1].disabled=false;
             add[i-1].disabled=false;
             temp=temp+parseInt(document.getElementById("st"+i).value);
            }
            document.getElementById("tp").innerHTML=temp;
          }
          else
          {
            document.getElementById("tp").innerHTML=0;            
            for(var i=0;i<pd.length;i++)
            {
             sub[i].disabled=true;
             add[i].disabled=true;                    }
          }
      }
      function chose(num)
      {
          var pd=document.getElementsByName("pro");
          var flag=true;

          for(var i=0;i<pd.length;i++)
          {
             if(pd[i].checked==false)
             {
                flag=false;
              }
          }
           for(var i=0;i<sub.length;i++)
            {
               if(pd[num-1].checked)
               {
                 if(num==(i+1))
                 {
                  sub[i].disabled=false;
                  add[i].disabled=false;
                  break;
                 }
                }
                else
               {
                 if(num==(i+1))
                 {
                  sub[i].disabled=true;
                  add[i].disabled=true;
                  break;
                 }
                }
            }
          if(flag)
          {
             document.getElementById("all").checked=true;
          }
          else
          {
             document.getElementById("all").checked=false;
           }          
      }
      function operator(oper,sp,n,s)
      {
         var num=document.getElementById("num"+n).value;
         if(oper=="+")
         {
             num++;
             document.getElementById("num"+n).value=num;
             document.getElementById("st"+s).value=sp*num;
         }
         else
         {
             num--;
             if(num==0)
             {
                alert("数量不能少于一件");
             }
             else
             {
             document.getElementById("num"+n).value=num;
             document.getElementById("st"+s).value=sp*num;
             }
         }
      }
    </script>
  </head>
  <body>
   <center>
   <h3>购物清单</h3>
   <form>
    <table border="1">
      <tr>
        <td><input type="checkbox" id="all" οnclick="choose()"/>全选</td>
        <td>商品名称</td>
        <td>商品单价</td>
        <td>商品数量</td>
        <td>商品总价</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="pro" οnclick="chose(1)"/></td>
        <td>数码相机</td>
        <td>￥1200</td>
        <td>
          <input type="button" value="-" disabled="true" name="sub" οnclick="operator('-',1200,1,1)">
          <input type="text" value="1" id="num1" size="2">
          <input type="button" value="+" disabled="true" name="add" οnclick="operator('+',1200,1,1)"> 
        </td>
        <td>
          <input type="text" value="1200" size="2" readonly="true" id="st1">
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" name="pro"  οnclick="chose(2)"/></td>
        <td>三星手机</td>
        <td>￥4998</td>
        <td>
          <input type="button" value="-" disabled="true" name="sub" οnclick="operator('-',4988,2,2)">
          <input type="text" value="1" size="2" id="num2">
          <input type="button" value="+" disabled="true"  name="add" οnclick="operator('+',4988,2,2)"> 
        </td>
        <td>
          <input type="text" value="4998" size="2" id="st2" readonly="true">
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" name="pro"  οnclick="chose(3)"/></td>
        <td>诺基亚手机</td>
        <td>￥480</td>
        <td>
          <input type="button" value="-"disabled="true"  name="sub" οnclick="operator('-',480,3,3)">
          <input type="text" value="1" size="2" id="num3">
          <input type="button" value="+" disabled="true"  name="add" οnclick="operator('+',480,3,3)"> 
        </td>
        <td>
          <input type="text" value="480" size="2" readonly="true" id="st3">
        </td>
      </tr>
    </table>
   </form>
   </center>
   总价格:￥<span id="tp">0</span>
  </body>
</html>

爱上python的猴子

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript购物车源码

购物车 td { width:120px; text-align:center; } input { text-align:center; } var sub=document.getElementsByName("sub");
复制链接

扫一扫