`
秦瑶123
  • 浏览: 14975 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

POS机 网页版 之商品列表制作

    博客分类：
  • html
 
阅读更多

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); " onclick="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();//刷新页面
}

 
 

 

 

分享到：
| html 一些标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics