【5】JS美淘網(wǎng)電商項目部分效果實現(xiàn)：購物車，手風(fēng)琴，登錄注冊，放大鏡【詩書畫唱】
圖片素材：
購物車部分（有增加和刪除的效果等）：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>購物車</title>
</head>
<style type="text/css">
h1{
text-align: center;
color: yellow;
font-style: italic;
}
input{
background-color: red;
color: white;
font-size:25px;
border: none;
/* border-radius: 40%;*/
text-align: center;
}
table {
/*width: 1000px;
height: 400px;*/
margin: 0px auto;
text-align: center;
/*border-top: solid 1px blue;
border-left: solid 1px blue;*/
background-color: yellow;
border: none;
/* border-radius: 90%;*/
}
/*table{
margin: 0 auto;
}*/
body{
font-size: larger;color: crimson;
background-image: url(img/2.png);
background-repeat: no-repeat;
background-size: 100%;
}
table th,table td{
border: none;
}
</style>
<body >
<!--<div id="ZCbigToubu">
<div id="ZCdivTop1">
<div id="ZCtopLeft"><a href="#">武漢【切換城市】</a></div>
<div id="ZCdivRght">
<span>美淘，每天淘一次</span>
<span>
<a href="#">我的美淘</a>
<ul id="ZCul">
<li><a href="#">我的訂單</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的余額</a></li>
</ul>
</span>
<span><a href="#" class="ZCgwcSpan">購物車</a></span>
<span><a href="#" id="ZCdlHref">【登錄】</a></span>
<span><a href="#">【注冊】</a></span>
</div>
</div>
<div id="ZCdivTop2">
<div id="ZCdivTopLeft"><img src="img/meitao_log.jpg"></div>
<div id="ZCdivTopRight">
<form action="#" method="#">
<table>
<tr>
<td><input type="text"? align="top"/></td>
<td><input type="submit" value="搜索"? placeholder="請輸入要搜索內(nèi)容的關(guān)鍵詞"/></td>
</tr>
<tr>
<td colspan="2">
<a href="#">美的熱水器</a>
<a href="#">利浦電動牙刷</a>
<a href="#">美的電飯煲</a>
<a href="#">格力士微波爐</a>
</td>
</tr>
</table>
</form>
<div id="ZCjsSouSuoKuang">
</div>
</div>
</div>
<div id="ZCdaoHangTiao">
<ul>
<li><a href="zhuJieMian.html">首頁</a></li>
<li><a href="#">團購</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">電影</a></li>
<li><a href="#">KTV</a></li>
<li><a href="#">酒店訂票</a></li>
<li><a href="#">購物</a></li>
</ul>
</div>
</div>-->
<h1>購物車</h1>
<table
<!-- border="1" -->
>
<tr>
<!--文本th-->
<th>商品</th>
<th style="color: #0000FF;">單價(元/件)</th>
<th>顏色</th>
<th style="color: #0000FF;">庫存(件)</th>
<th>好評率</th>
<th>操作</th>
</tr>
<tr>
<td>面膜</td>
<td? >150</td>
<td>白色</td>
<td>100</td>
<td>88%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>口紅</td>
<td? >350</td>
<td>白色</td>
<td>166</td>
<td>82%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>鼠標(biāo)</td>
<td >150</td>
<td>黑色</td>
<td>99</td>
<td>75%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>鍵盤</td>
<td>120</td>
<td>黑色</td>
<td>50</td>
<td>80%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
</table>
<h1> 詩書畫唱提醒你！結(jié)算吧！</h1>
<table border="1">
<thead>
<tr>
<th>商品</th>
<th style="color: #0000FF;">單價(元/件)</th>
<th>數(shù)量(件)</th>
<th style="color: #0000FF;">金額(元)</th>
<th>刪除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center" >總計</td>
<td id="total"></td>
<td>元</td>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript">
//this ：js中指當(dāng)前對象
function add_shoppingcar(btn){
var tr=btn.parentNode.parentNode;
var tds=tr.getElementsByTagName("td");
var name=tds[0].innerHTML;
var price=tds[1].innerHTML;
var tbody=document.getElementById("goods");
var row=tbody.insertRow();//insertRow表格開頭插入新行
row.innerHTML="<td>"+name+"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='-' id='jian'? onclick='change(this,-1)'? />"+
"<input id='text' type='text' size='1' value='1' readonly='readonly' />"+
"<input type='button' value='+' id='add'? onclick='change(this,1)'? />"+
"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='X' onclick='del(this)'/>"+
"</td>"+
"</tr>"
total();
}
//增加減少數(shù)量，用n正負(fù)1來表示點擊了加減按鈕
function change(btn,n){
//獲取數(shù)量的三個input對象
var inputs = btn.parentNode.getElementsByTagName("input");
//獲取原來的數(shù)量
var amount = parseInt(inputs[1].value);
//當(dāng)amount=1時不能再點擊"-"符號
//用n<0來表示點擊了減button
if(amount<=1 && n<0){
return;
}
//根據(jù)加減來改變數(shù)量
inputs[1].value = amount + n;
//將改變后的數(shù)量值賦值給amount
amount = inputs[1].value;
//獲取表格中的行
var tr = btn.parentNode.parentNode;
//獲取所有的列
var tds = tr.getElementsByTagName("td");
//獲取單價
var price = parseFloat(tds[1].innerHTML);
//總價=單價*數(shù)量
var m = price * amount;
//將總價賦值給相應(yīng)的位置
tds[3].innerHTML = m;
//調(diào)用total方法，求總計
total();
}
function total(){
var tbody=document.getElementById("goods");
var trs=tbody.getElementsByTagName("tr");
var sum=0;
for(var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName("td");
var m=tds[3].innerHTML;
sum += parseFloat(m);
}
var total=document.getElementById("total");
total.innerHTML = sum;
}
function del(i){
var tr=i.parentNode.parentNode;
tr.parentNode.removeChild(tr);
//tr.remove(tr);
total();
}
</script>
</html>
放大鏡部分：
div.jqZoomTitle
{
z-index:5000;
text-align:center;
font-size:11px;
font-family:Tahoma;
height:16px;
padding-top:2px;
position:absolute;
top: 0px;
left: 0px;
width: 100%;
color: #FFF;
background: #999;
}
.jqZoomPup
{
overflow:hidden;
background-color: #FFF;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index:10;
border-color:#c4c4c4;
border-style: solid;
cursor:crosshair;
}
.jqZoomPup img
{
border: 0px;
}
.preload{
-moz-opacity:0.8;
opacity: 0.8;
? ?filter: alpha(opacity = 80);
color: #333;
font-size: 12px;
font-family: Tahoma;
? ?text-decoration: none;
border: 1px solid #CCC;
? ?background-color: white;
? ?padding: 8px;
text-align:center;
?/*? background-image: url(../img/meitao_log.jpg);*/
/*? ?background-repeat: no-repeat;*/
? ?background-position: 43px 30px;
width:90px;
* width:100px;
height:43px;
*height:55px;
z-index:10;
position:absolute;
top:3px;
left:3px;
}
.jqZoomWindow
{
border: 1px solid #999;
background-color: #FFF;
}
