JavaScript自動計算價格和全選


JavaScript自動計算價格和全選,價格自增加減,復選框,反選,全選。

如圖:

如圖:

CSS代碼

@charset "gb2312";
/* CSS Document */

body{
    margin:0px;
    padding:0px;
    font-size:12px;
    line-height:20px;
    color:#333;
   }
ul,li,ol,h1,dl,dd{
    list-style:none;
    margin:0px;
    padding:0px;
    }
a{
    color:#1965b3;
    text-decoration: none;
    }    
a:hover{
    color:#CD590C;
    text-decoration:underline;
    }
img{
    border:0px;
    vertical-align:middle;
    }
#header{
    height:40px;
    margin:10px auto 10px auto;
    width:800px;
    clear:both;
    }
#nav{
    margin:10px auto 10px auto;
    width:800px;
    clear:both;
    }
#navlist{
    width:800px;
    margin:0px auto 0px auto;
    height:23px;
    }
    #navlist li{
        float:left;
        height:23px;
        line-height:26px;
    }
    .navlist_red_left{
        background-image:url(../images/taobao_bg.png);
        background-repeat:no-repeat;
        background-position:-12px -92px;
        width:3px;
        }
    .navlist_red{
        background-color:#ff6600;
        text-align:center;
        font-size:14px;
        font-weight:bold;
        color:#FFF;
        width:130px;
        }
    .navlist_red_arrow{
        background-color:#ff6600;
        background-image:url(../images/taobao_bg.png);
        background-repeat:no-repeat;
        background-position:0px 0px;
        width:13px;
        }
    .navlist_gray{
        background-color:#e4e4e4;
        text-align:center;
        font-size:14px;
        font-weight:bold;
        width:150px;
        }
    .navlist_gray_arrow{
        background-color:#e4e4e4;
        background-image:url(../images/taobao_bg.png);
        background-repeat:no-repeat;
        background-position:0px 0px;
        width:13px;
        }
    .navlist_gray_right{
        background-image:url(../images/taobao_bg.png);
        background-repeat:no-repeat;
        background-position:-12px -138px;
        width:3px;
        }
#content{
    width:800px;
    margin:10px auto 5px auto;
    clear:both;
    }
    .title_1{
        text-align:center;
        width:50px;
        }
    .title_2{
        text-align:center;
        }
    .title_3{
        text-align:center;
        width:80px;
        }
    .title_4{
        text-align:center;
        width:80px;
        }
    .title_5{
        text-align:center;
        width:100px;
        }
    .title_6{
        text-align:center;
        width:80px;
        }
    .title_7{
        text-align:center;
        width:60px;
        }
    .line{
        background-color:#a7cbff;
        height:3px;
        }
    .shopInfo{
        padding-left:10px;
        height:35px;
        vertical-align:bottom;
        }
    .num_input{
        border:solid 1px #666;
        width:25px;
        height:15px;
        text-align:center;
        }
    .cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
        background-color:#e2f2ff;
        border-bottom:solid 1px #d1ecff;
        border-top:solid 1px #d1ecff;
        text-align:center;
        padding:5px;
        }
    .cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
        border-right:solid 1px #FFF;
        }
    .cart_td_3{
        text-align:left;
        }
    .cart_td_4{
        font-weight:bold;
        }
    .cart_td_7{
        font-weight:bold;
        color:#fe6400;
        font-size:14px;
        }
    .hand{
        cursor:pointer;
        }
.shopend{
    text-align:right;
    padding-right:10px;
    padding-bottom:10px;
    }
.yellow{
    font-weight:bold;
    color:#fe6400;
    font-size:18px;
    line-height:40px;
    }
// JavaScript Document



/*改變所購商品的數量*/
function changeNum(numId,flag){/*numId表示對應商品數量的文本框ID,flag表示是增加還是減少商品數量*/
    var numId=document.getElementById(numId);
    if(flag=="minus"){/*減少商品數量*/
        if(numId.value<=1){
            alert("寶貝數量必須是大於0");
            return false;
            }
        else{
            numId.value=parseInt(numId.value)-1;
            productCount();
            }
        }
    else{/*flag為add,增加商品數量*/
        numId.value=parseInt(numId.value)+1;
        productCount();
        }
    }
    
/*自動計算商品的總金額、總共節省的金額和積分*/
function productCount(){
    var total=0;      //商品金額總計
    var integral=0;   //可獲商品積分
    
    var point;      //每一行商品的單品積分
    var price;     //每一行商品的單價
    var number;    //每一行商品的數量
    var subtotal;  //每一行商品的小計

     /*訪問ID為shopping表格中所有的行數*/
    var myTableTr=document.getElementById("shopping").getElementsByTagName("tr"); 
    if(myTableTr.length>0){
    for(var i=1;i<myTableTr.length;i++){/*從1開始,第一行的標題不計算*/
        if(myTableTr[i].getElementsByTagName("td").length>2){ //最后一行不計算
        point=myTableTr[i].getElementsByTagName("td")[3].innerHTML; 
        price=myTableTr[i].getElementsByTagName("td")[4].innerHTML;
        number=myTableTr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;
        integral+=point*number;
        total+=price*number;
        myTableTr[i].getElementsByTagName("td")[6].innerHTML=price*number;
        }
    }
    document.getElementById("total").innerHTML=total;
    document.getElementById("integral").innerHTML=integral;
    
    }
}
window.onload=productCount;

/*復選框全選或全不選效果*/
function selectAll(){
    var oInput=document.getElementsByName("cartCheckBox");
 for (var i=0;i<oInput.length;i++){
         oInput[i].checked=document.getElementById("allCheckBox").checked;
    }
}
    
/*根據單個復選框的選擇情況確定全選復選框是否被選中*/
function selectSingle(){
    var k=0;
    var oInput=document.getElementsByName("cartCheckBox");
     for (var i=0;i<oInput.length;i++){
       if(oInput[i].checked==false){
          k=1;
          break;
        }
    }
    if(k==0){
        document.getElementById("allCheckBox").checked=true;
        }
    else{
        document.getElementById("allCheckBox").checked=false;
        }
}

/*刪除單行商品*/
function deleteRow(rowId){
    var Index=document.getElementById(rowId).rowIndex; //獲取當前行的索引號
    document.getElementById("shopping").deleteRow(Index);
    document.getElementById("shopping").deleteRow(Index-1);
    productCount();
    }

/*刪除選中行的商品*/
function deleteSelectRow(){
    var oInput=document.getElementsByName("cartCheckBox");
    var Index;
     for (var i=oInput.length-1;i>=0;i--){
       if(oInput[i].checked==true){
         Index=document.getElementById(oInput[i].value).rowIndex; /*獲取選中行的索引號*/
         document.getElementById("shopping").deleteRow(Index);
         document.getElementById("shopping").deleteRow(Index-1);
        }
    }
    productCount();
    }

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘寶購物車頁面</title>
<link href="css/myCart.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/myCart.js"></script>
</head>

<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置:<a href="#">首頁</a> > <a href="#">我的淘寶</a> > 我的購物車</div>
<div id="navlist">
  <ul>
    <li class="navlist_red_left"></li> 
    <li class="navlist_red">1. 查看購物車</li> 
    <li class="navlist_red_arrow"></li>
    <li class="navlist_gray">2. 確認訂單信息</li> 
    <li class="navlist_gray_arrow"></li> 
     <li class="navlist_gray">3. 付款到支付寶</li> 
    <li class="navlist_gray_arrow"></li>   
     <li class="navlist_gray">4. 確認收貨</li> 
    <li class="navlist_gray_arrow"></li> 
    <li class="navlist_gray">5. 評價</li> 
    <li class="navlist_gray_right"></li>   
  </ul>
</div>

<div id="content">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
 <form action="" method="post" name="myform">
  <tr>
    <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全選</td>
    <td class="title_2" colspan="2">店鋪寶貝</td>
    <td class="title_3">獲積分</td>
    <td class="title_4">單價(元)</td>
    <td class="title_5">數量</td>
    <td class="title_6">小計(元)</td>
    <td class="title_7">操作</td>
  </tr>
  <tr>
    <td colspan="8" class="line"></td>
  </tr>
  <tr>
    <td colspan="8" class="shopInfo">店鋪:<a href="#">纖巧百媚時尚鞋坊</a>    賣家:<a href="#">纖巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
  </tr>
   <tr id="product1">
    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td>
    <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
    <td class="cart_td_3"><a href="#">日韓流行風時尚美眉最愛獨特米字拼圖金屬坡跟公主靴子黑色</a><br />
        顏色:棕色 尺碼:37<br />
        保障:<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
    <td class="cart_td_4">5</td>
    <td class="cart_td_5">138.00</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product1');">刪除</a></td>
  </tr>
  
  <tr>
    <td colspan="8" class="shopInfo">店鋪:<a href="#">香港我的美麗日記</a>    賣家:<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
  </tr>
   <tr id="product2">
    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td>
    <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
    <td class="cart_td_3"><a href="#">chanel/香奈爾/香奈爾炫亮魅力唇膏3.5g</a><br />
        保障:<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
    <td class="cart_td_4">12</td>
    <td class="cart_td_5">265.00</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')" class="hand"/> <input id="num_2" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product2');">刪除</a></td>
  </tr>
  
   <tr>
    <td colspan="8" class="shopInfo">店鋪:<a href="#">實體經營</a>    賣家:<a href="#">林顏店鋪</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
  </tr>
   <tr id="product3">
    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"  onclick="selectSingle()"/></td>
    <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
    <td class="cart_td_3"><a href="#">蝶妝海晳藍清瀅粉底液10#(象牙白)</a><br />
        保障:<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
    <td class="cart_td_4">3</td>
    <td class="cart_td_5">85.00</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product3');">刪除</a></td>
  </tr>
  
   <tr>
    <td colspan="8" class="shopInfo">店鋪:<a href="#">紅豆豆的小屋</a>    賣家:<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
  </tr>
   <tr id="product4">
    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td>
    <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
    <td class="cart_td_3"><a href="#">相宜促銷專供 大S推薦 最好用的LilyBell化妝棉</a><br />
        保障:<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
    <td class="cart_td_4">12</td>
    <td class="cart_td_5">12.00</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product4');">刪除</a></td>
  </tr>
  
   <tr>
   <td  colspan="3"><a href="javascript:deleteSelectRow()"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
    <td colspan="5" class="shopend">商品總價(不含運費):<label id="total" class="yellow"></label> 元<br />
    可獲積分 <label class="yellow" id="integral"></label> 點<br />
    <input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
  </tr>
  </form>
</table>

</div>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM