html页面商品列表制作:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../host_css/title.css"> //引入css样式
<link rel="stylesheet" type="text/css" href="../host_css/item_list.css">
<script type="text/javascript" src="../js/item_list.js"></script> //引入js代码
<script type="text/javascript" src="../js/jquery-2.1.3.js"></script >
<script type="text/javascript" src="../js/title.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="host_page.html">Les'Go</a></li>
<li><a href="host_page.html">主页</a></li>
<li><a href="item_list.html">商品列表</a></li>
</ul>
<table>
<tr>
<td><img src="../image/shopping71.png"></td> //引入图片
<td><a href="cart.html" id="cart_count" >购物车()</a></td>
</tr></table>
</div>
<div class="item" >
<table class="item_list"><tr><th class="title">商品列表</th></tr>
<tr><td>
<table class="list">
<tr>
<td>分类</td>
<td>名称</td>
<td>单价(元)</td>
<td>单位</td>
<td> </td>
</tr>
<tbody id="tab"></tbody>
</table >
</td></tr>
</table>
</div>
</body>
</html>
<script>//document对象读取函数,函数里的方法对页面进行操作
$(document).ready(function(){
showItem();
item_count();
})
</script>
css样式:
.item{
margin-top: 2%;//上外边距
}
.item_list{
border: 1px solid;
border-collapse:collapse;
width: 90%;
margin-left: 5%;
font-size: 30px;
height: 500px;
}
.title{
background-color: rgb(245,245,245);
font-size: 50px;
}
.list{
border-spacing:0;
margin-left: 2%;
margin-top: 20px;
width: 96%;
margin-bottom: 40px;
}
.list tr td{
width: 20%;
text-align: center;
border: 1px solid;
}
js代码:
function lists(){
var items=[
{
classify:'饮料',
barcode: 'ITEM000000',
name: '可口可乐',
unit: '瓶',
price: 3.00
},
{
classify:'饮料',
barcode: 'ITEM000001',
name: '雪碧',
unit: '瓶',
price: 3.00
},
{
classify:'水果',
barcode: 'ITEM000002',
name: '苹果',
unit: '斤',
price: 5.50
},
{
classify:'水果',
barcode: 'ITEM000003',
name: '荔枝',
unit: '斤',
price: 15.00
},
{
classify:'生活用品',
barcode: 'ITEM000004',
name: '电池',
unit: '个',
price: 2.00
},
{
classify:'食品',
barcode: 'ITEM000005',
name: '方便面',
unit: '袋',
price: 4.50
}
];
var item='';
for(var i in items) {
var item_count =items[i];
var btn = i.toString();
item = item + '<tr>'+ '<td>' + item_count.classify + '</td><td>' + item_count.name + '</td><td>' + item_count.price + '</td><td>' + item_count.unit + '</td><td>' + '<button id='+btn+' style="color:white;background:rgb(64,139,206);font-size:20px;border-radius: 5px;border-color:rgb(67, 105, 207); " οnclick="add_item(this.id)">加入购物车</button></td>'+ '</tr>';
}
return [item,items];
}
localStorage.setItem('cart_list', JSON.stringify(lists()[0]));//将数据在本地存储
localStorage.setItem('allItems', JSON.stringify(lists()[1]));
function showItem() {
var item_data = JSON.parse(localStorage.getItem('cart_list'));//在本地取出数据
$('#tab').html(item_data);//获取id为tab改变其内容
}
function add_item(id) {
var btn = id;
var all_item = JSON.parse(localStorage.getItem('allItems'));
var cart_item = all_item[btn];
cart_item.count = 1;
var get_cart_list= JSON.parse(localStorage.getItem('shopping_cart_list'))||[];
if(get_cart_list.length == 0){
get_cart_list.push(cart_item);
}
else{
for(var i = 0; i < get_cart_list.length; i ++){
if(get_cart_list[i].barcode == cart_item.barcode){
get_cart_list[i].count ++;
break;
}
else if(get_cart_list[i].barcode != cart_item.barcode && i == get_cart_list.length-1){
get_cart_list.push(cart_item);
break;
}
}
}
localStorage.setItem('shopping_cart_list', JSON.stringify(get_cart_list));
location.reload();//刷新页面
}