HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的购物车-京东商城</title>
<!--=============js代码==============-->
<link rel="stylesheet" type="text/css" href="css/购物车.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/city.js"></script>
<script type="text/javascript" src="js/购物车.js"></script>
</head>
<body>
<!--顶部导航条
======================================================-->
<div id="nav">
<!--左边-->
<ul id="nav-left">
<li id="li1"><img src="img/yt_home.png"/><a href="#">京东首页</a></li>
<!--<li id="li2"><img src="img/yt_address.png"/><font>北京</font></li>-->
<li id="li2">
<div id="selcted-city">
<img src="img/yt_address.png"/><font>北京</font>
</div>
<div id="citys">
</div>
</li>
</ul>
<!--右边-->
<ul id="nav-right">
<li><a href="#">你好,请登录</a></li>
<li><a href="#" class="line" style="color: red;">免费注册</a>|</li>
<li><a href="#" class="line">我的订单</a>|</li>
<li><a href="#" class="line">我的京东</a>|</li>
<li><a href="#" class="line">京东会员</a>|</li>
<li><a href="#" class="line">企业采购</a>|</li>
<li><font class="line">客户服务</font>|</li>
<li><font class="line">网站导航</font>|</li>
<li><a href="#">手机京东</a></li>
</ul>
</div>
<!--中间购物车内容
======================================================-->
<div id="content">
<div id="search"></div>
<div id="no-goods">
<div id="">
<img src="img/yt_car.png"/>
<font>购物车内暂时没有商品，登录后将显示您之前加入的商品</font>
</div>
</div>
<div id="goods">
<table cellspacing="0">
<tr height="40px" bgcolor="#cccccc" >
<td class="td1">
<input type="checkbox" name="check-all" id="check-all" value="" />
<label for="check-all">全选</label>
</td>
<td class="td2">商品</td>
<td class="td3">单价</td>
<td class="td4">数量</td>
<td class="td5">小计</td>
<td class="td6">操作</td>
</tr>
</table>
<div id="account">
<a id="del" href="">删除选中商品</a>
<button>结算</button>
<p>总共选中了<a href="">0</a>件商品 总计:<a href="">￥0.00</a></p>
</div>
</div>
</div>
<!--底部
======================================================-->
<div id="bottom"></div>
</body>
</html>
js文件
1.购物车js
$(function(){
//=====================添加城市=====================
var citysNode = $('#citys')
for(cityName in cities){
//创建城市节点
var cityNode = $('<div><font>'+cityName+'</font></div>')
//添加
citysNode.append(cityNode)
}
//默认第一个是白色
$('#citys font:first').css({
'color':'white',
'background-color': 'red'
})
$seletedFontNode = $('#citys font:first')
//添加点击事件
$('#citys').on('click', 'div font', function(){
//更新背景和字体颜色
$(this).css({
'color':'white',
'background-color': 'red'
})
$seletedFontNode.css({
'color':'#999999',
'background-color': 'rgba(0,0,0,0)'
})
$seletedFontNode = $(this)
//更新选中的城市
$('#selcted-city font').text(this.innerText)
//隐藏城市选项
$('#citys').css('display','none')
})
$('#li2').on('mouseover', function(){
$('#citys').css('display','block')
})
$('#li2').on('mouseleave', function(){
$('#citys').css('display','none')
})
//=====================购物车商品=====================
//1.请求商品数据
allGoods = [
{
big_img:'img/a1.jpg',
price: 245,
description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
},
{
big_img:'img/a2.jpg',
price: 123,
description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
},
{
big_img:'img/a3.jpg',
price: 67,
description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
}
]
//2.创建商品对应的标签
for(var i=0; i<allGoods.length;i++){
//拿到每个商品数据
goodsObj = allGoods[i]
//给商品创建对应的节点
$td1 = $('<td class="td1"><input type="checkbox"/></td>')
$td2 = $('<td class="td2 goodsInfo"><img class="goods-pic" src='+goodsObj['big_img']+'/><p>'+goodsObj['description']+'</p></td>')
$td3 = $('<td class="td3">￥'+goodsObj['price']+'.00</td>')
$td4 = $('<td class="td4"><button id="down">-</button><input value="1"/><button id="up">+</button></td>')
$td5 = $('<td class="td5">￥'+goodsObj['price']+'.00</td>')
$td6 = $('<td class="td6 td6-del">删除</td>')
$trNode = $('<tr></tr>')
$trNode.append($td1)
$trNode.append($td2)
$trNode.append($td3)
$trNode.append($td4)
$trNode.append($td5)
$trNode.append($td6)
//插入表格
$('#goods table').append($trNode)
}
//绑定事件
$('.td4 #down').on('click', function(){
var inputNode = $(this).parent().children()[1]
var num = $(inputNode).val()
if(num == 1){
alert('商品至少一个!')
return
}
//数量减1
num--
$(inputNode).val(num)
//重新计算小计
var $totalNode = $(this).parent().next() //总计
var $priceNode = $(this).parent().prev() //单价
var total = Number($priceNode.text().slice(1,10000))*num
$totalNode.text('￥'+ total+'.00')
})
$('.td4 #up').on('click', function(){
var inputNode = $(this).parent().children()[1]
var num = $(inputNode).val()
//数量减1
num++
$(inputNode).val(num)
//重新计算小计
var $totalNode = $(this).parent().next() //总计
var $priceNode = $(this).parent().prev() //单价
var total = Number($priceNode.text().slice(1,10000))*num
$totalNode.text('￥'+ total+'.00')
})
})
image.png
网友评论