简易商品购物车
<html><head>
<title>商品購物車</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0;
padding:0;
}
a{
color:#333;
text-decoration: none;
}
a:hover{
color:#333;
text-decoration:underline;
}
img{
border:0;
vertical-align: middle;
}
.blue{
color:#1965b3;
text-decoration:none;
}
.blue:hover{
color:#1965b3;
text-decoration:underline;
}
#header,#main,#footer{
width:960px;
margin:0 auto;
clear:both;
float:none;
margin-bottom: 30px;
}
/*購物車頁面樣式開始*/
.shopping_commend{
background-repeat:repeat-x;
height:21px;
border:solid 1px #999;
}
.shopping_commend_left{
float:left;
padding-left:10px;
}
.shopping_commend_right{
float:right;
padding-right:10px;
margin-top:3px;
}
.shopping_commend_right img{
cursor:pointer;
}
#shopping_commend_sort{
margin-top: 20px;
padding:5px 20px 5px 20px;
height:120px;
}
.shopping_commend_sort_left{
float:left;
width:450px;
}
.shopping_commend_list_1,.shopping_commend_list_2,.shopping_commend_list_3,.shopping_commend_list_4{
float:left;
height:30px;
line-height:30px;
}
.shopping_commend_list_1{
width:240px;
}
.shopping_commend_list_2{
width:70px;
text-align:center;
text-decoration:line-through;
color:#999;
}
.shopping_commend_list_3{
width:70px;
text-align:center;
}
.shopping_commend_list_4{
text-align:center;
width:65px;
}
.shopping_yellow{
color:#ED610C;
}
.shopping_yellow:hover{
color:#ED610C;
text-decoration:underline;
}
.shopping_list_top{
clear:both;
font-size:14px;
font-weight:bold;
margin-top:20px;
}
.shopping_list_border{
border:solid 2px #999;
}
.shopping_list_title{
background-color:#d8e4c6;
height:25px;
}
.shopping_list_title li{
float:left;
line-height:28px;
}
.shopping_list_title_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_list_title_2{
width:120px;
text-align:center;
}
.shopping_list_title_3{
width:120px;
text-align:center;
}
.shopping_list_title_4{
width:120px;
text-align:center;
}
.shopping_list_title_5{
width:70px;
text-align:center;
}
.shopping_list_title_6{
width:70px;
text-align:center;
}
.shopping_product_list{
background-color:#fefbf2;
height:40px;
}
.shopping_product_list input{
width:30px;
height:15px;
border:solid 1px #666;
text-align:center;
}
.shopping_product_list td{
line-height:35px;
border-bottom:dashed 1px #ccc;
}
.shopping_product_list_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_product_list_2{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_3{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_4{
width:120px;
text-align:center;
color:#191919;
}
.shopping_product_list_5{
width:70px;
text-align:center;
}
.shopping_product_list_6{
width:70px;
text-align:center;
}
.shopping_list_end{
background-color:#cddbb8;
height:60px;
}
.shopping_list_end li{
float:right;
}
.shopping_list_end_1{
margin:10px 10px 0;
}
.shopping_list_end_2{
font-weight:bold;
color:#BD3E00;
font-size:14px;
margin:15px 10px 0px 0px;
}
.shopping_list_end_3{
font-weight:bold;
font-size:14px;
margin:15px 0px 0px 15px;
}
.shopping_list_end_4{
border-right:solid 1px #666;
margin:10px 0px 0px 15px;
padding-right:10px;
}
.shopping_list_end_yellow{
color:#bd3e00;
}
</style>
</head>
?
<body>
<!--中間部分開始-->
<div id="main">
<!--為您推薦商品開始-->
<div id="shopping_commend_sort">
<div class="shopping_commend_sort_left">
<ul id="ul1">
<li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM編程藝術(shù)</a></li>
<li class="shopping_commend_list_2">￥39.00</li>
<li class="shopping_commend_list_3">￥29.30</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul1')" class="shopping_yellow">購買</a></li>
</ul>
<ul id="ul2">
<li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（當(dāng)當(dāng)網(wǎng)獨家首發(fā)）</a></li>
<li class="shopping_commend_list_2">￥28.00</li>
<li class="shopping_commend_list_3">￥19.40</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul2')" class="shopping_yellow">購買</a></li>
</ul>
<ul id="ul3">
<li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危機(jī)下房地產(chǎn)行...</a></li>
<li class="shopping_commend_list_2">￥32.80</li>
<li class="shopping_commend_list_3">￥25.10</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul3')" class="shopping_yellow">購買</a></li>
</ul>
<ul id="ul4">
<li class="shopping_commend_list_1">·<a href="#" class="blue">逃莊</a></li>
<li class="shopping_commend_list_2">￥36.00</li>
<li class="shopping_commend_list_3">￥27.70</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul4')" class="shopping_yellow">購買</a></li>
</ul>
</div>
<div class="shopping_commend_sort_left">
<ul id="ul5">
<li class="shopping_commend_list_1">·<a href="#" class="blue">深入淺出MySQL數(shù)據(jù)庫開發(fā)、優(yōu)...</a></li>
<li class="shopping_commend_list_2">￥59.00</li>
<li class="shopping_commend_list_3">￥47.20</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul5')" class="shopping_yellow">購買</a></li>
</ul>
<ul id="ul6">
<li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（馬未都、王剛推薦!央...</a></li>
<li class="shopping_commend_list_2">￥34.80</li>
<li class="shopping_commend_list_3">￥20.60</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul6')" class="shopping_yellow">購買</a></li>
</ul>
<ul id="ul7">
<li class="shopping_commend_list_1">·<a href="#" class="blue">都市風(fēng)水師--官場風(fēng)水小說：一...</a></li>
<li class="shopping_commend_list_2">￥39.80</li>
<li class="shopping_commend_list_3">￥30.50</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul7')" class="shopping_yellow">購買</a></li>
</ul>
<ul id="ul8">
<li class="shopping_commend_list_1">·<a href="#" class="blue">國戲（以麻將術(shù)語解讀宦海沉浮...</a></li>
<li class="shopping_commend_list_2">￥25.00</li>
<li class="shopping_commend_list_3">￥17.30</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul8')" class="shopping_yellow">購買</a></li>
</ul>
</div>
</div>
<div class="shopping_list_top">您已選購以下商品</div>
<div class="shopping_list_border">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="shopping_list_title">
<td class="shopping_list_title_1">商品名</td>
<td class="shopping_list_title_2">單品積分</td>
<td class="shopping_list_title_3">市場價</td>
<td class="shopping_list_title_4">當(dāng)當(dāng)價</td>
<td class="shopping_list_title_5">數(shù)量</td>
<td class="shopping_list_title_6">刪除</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct">
<tbody>
<tr class="shopping_product_list" id="shoppingProduct_01">
<td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露資本博弈秘密的金融...</a></td>
<td class="shopping_product_list_2"><label>189</label></td>
<td class="shopping_product_list_3">￥<label>32.00</label></td>
<td class="shopping_product_list_4">￥<label>18.90 </label>(59折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_01')" class="blue">刪除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_02">
<td class="shopping_product_list_1"><a href="#" class="blue"> 小團(tuán)圓（張愛玲最神秘小說遺稿）</a></td>
<td class="shopping_product_list_2"><label>173</label></td>
<td class="shopping_product_list_3">￥<label>28.00</label></td>
<td class="shopping_product_list_4">￥<label>17.30</label>(62折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_02')" class="blue">刪除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_03">
<td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(暢銷全球80國的世界...</a></td>
<td class="shopping_product_list_2"><label>154</label></td>
<td class="shopping_product_list_3">￥<label>24.80</label></td>
<td class="shopping_product_list_4">￥<label>15.40</label> (62折)</td>
<td class="shopping_product_list_5"><input type="text" value="2" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_03')" class="blue">刪除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_04">
<td class="shopping_product_list_1"><a href="#" class="blue">福瑪特雙桶洗衣機(jī)XPB20-07S</a></td>
<td class="shopping_product_list_2"><label>358</label></td>
<td class="shopping_product_list_3">￥<label>458.00</label></td>
<td class="shopping_product_list_4">￥<label>358.00</label> (78折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_04')" class="blue">刪除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_05">
<td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web開發(fā) （原書第4版）</a></td>
<td class="shopping_product_list_2"><label>712</label></td>
<td class="shopping_product_list_3">￥<label>95.00</label></td>
<td class="shopping_product_list_4">￥<label>71.20</label> (75折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_05')" class="blue">刪除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_06">
<td class="shopping_product_list_1"><a href="#" class="blue">法布爾昆蟲記</a>（再買￥68.30即可參加“滿199元減10元現(xiàn)金”活動）</td>
<td class="shopping_product_list_2"><label>10</label></td>
<td class="shopping_product_list_3">￥<label>198.00</label></td>
<td class="shopping_product_list_4">￥<label>130.70</label> (66折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_06')" class="blue">刪除</a></td>
</tr>
</tbody>
</table>
<div class="shopping_list_end">
<ul>
<li class="shopping_list_end_1"><input name="" type="image" ></li>
<li class="shopping_list_end_2">￥<label id="product_total">626.90</label></li>
<li class="shopping_list_end_3">商品金額總計：</li>
<li class="shopping_list_end_4">您共節(jié)省金額：￥<label class="shopping_list_end_yellow" id="product_save">233.70</label><br>
可獲商品積分：<label class="shopping_list_end_yellow" id="product_integral">1750.00</label>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="https://qunarzz.com/jquery/prd/jquery-1.7.2.js"></script>
<script type="text/javascript">
function shopping_commend_show(){
var imgid=$("#shopping_commend_arrow"); //圖片箭頭
var divid=$("#shopping_commend_sort"); //層的id
if(divid.css("display")=="none"){
divid.css("display","block");
}else{
divid.css("display","none");
}
}
//刪除
function deleteProduct(obj){
var flag=confirm("您確定要刪除此商品嗎？");
if(flag){
$("#"+obj).remove();
productCount();
}else{
return;
}
}
$(function(){
productCount();
});
//計算商品總額的方法
function productCount(){
var total=0; //總價
var save=0; //節(jié)省金額
var integral=0; //積分
var point;//每一行的單品積分
var price;//每一行的市場價
var ddprice;//每一行的當(dāng)當(dāng)價
var number;//每一行的數(shù)量
var mytable=$("#myTableProduct tr");
for(var i=0;i<mytable.length;i++){//循環(huán)每一行
point=$("#myTableProduct tr:eq("+i+") td:eq(1) label:eq(0)").html();
price=$("#myTableProduct tr:eq("+i+") td:eq(2) label:eq(0)").html();
ddprice=$("#myTableProduct tr:eq("+i+") td:eq(3) label:eq(0)").html();
number=$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val();
if(isNaN(number)){
alert("您輸入的商品數(shù)量格式有誤，請重新輸入!");
$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").select();
return;
}
total+=ddprice*number;
save+=(price-ddprice)*number;
integral+=point*number;
}
$("#product_total").html(total.toFixed(2));
$("#product_save").html(save.toFixed(2));
$("#product_integral").html(integral.toFixed(2));
}
var mycount=0;
function buyProduct(obj){
var bookName=$("#"+obj+" li:eq(0)").text().substring(1);
var bookPrice=$("#"+obj+" li:eq(1)").text().substring(1);
var ddPrice=$("#"+obj+" li:eq(2)").text().substring(1);
var flag=true;
var rebate=ddPrice/bookPrice*100;
var mytable1=$("#myTableProduct tr");
for(var i=0;i<mytable1.length;i++){//循環(huán)每一行
name=$("#myTableProduct tr:eq("+i+") td:eq(0) a:eq(0)").text();
if(name==bookName){
var sum=$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val();
sum++; //如果存在則數(shù)量加1
$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val(sum);
productCount();
return;
}
}
//如果不存在，則在已購商品列表中添加一行
mycount++;
var str="<tr class=\"shopping_product_list\" id=\"addProduct_"+mycount+"\">";
str+="<td class=\"shopping_product_list_1\"><a href=\"#\" class=\"blue\">"+bookName+"</a></td>";
str+="<td class=\"shopping_product_list_2\"><label>100</label></td>";
str+="<td class=\"shopping_product_list_3\">￥<label>"+bookPrice+"</label></td>";
str+="<td class=\"shopping_product_list_4\">￥<label>"+ddPrice+"</label> ("+rebate.toFixed(0)+"折)</td>";
str+="<td class=\"shopping_product_list_5\"><input type=\"text\" value=\"1\" onBlur=\"productCount()\"></td>";
str+="<td class=\"shopping_product_list_6\"><a href=\"javascript:deleteProduct('addProduct_"+mycount+"')\" class=\"blue\">刪除</a></td></tr> ";
$("#myTableProduct").prepend(str);
productCount();
}
</script>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/ll-taj/p/6164271.html
總結(jié)
- 上一篇： ！！！！Linux系统开发 系列
- 下一篇： 2016-5-31 问题及解决