HTML 实现购物网站

最新推荐文章于 2024-06-01 11:51:44 发布

外太空程序员

最新推荐文章于 2024-06-01 11:51:44 发布

阅读量1w

点赞数 22

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/qq_48516121/article/details/127264963

版权

一、程序代码：

1.HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>结算清单</title>
    <script src="js.js"></script>
    <link rel="stylesheet" href="qd.css">

</head>
<body>
<table id="cartTable">
    <thead>
    <tr>
        <th><label><input id="selectAll" class="check-all check" type="checkbox"/>&nbsp;全选</label></th>
        <th>序号</th>
        <th>商品</th>
        <th>书籍名称</th>
        <th>分类</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
        <td>1</td>
        <td class="goods"><img src="images/phone1.jpg" alt="" /><span>jQuery实战</span></td>
        <td class="sm">jQuery实战</td>
        <td>技术</td>
        <td class="sj">2015-11-19</td>
        <td class="price">35.00</td>
        <td class="count">
            <span class="reduce">-</span>
            <input class="count-input" type="text" value="1" />
            <span class="add">+</span></td>
        <td class="subtotal">35.00</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
        <td>2</td>
        <td class="goods"><img src="images/phone1.jpg" alt="" /><span>jQuery实战2</span></td>
        <td class="sm">jQuery实战2</td>
        <td>技术</td>
        <td class="sj">2015-11-19</td>
        <td class="price">35.00</td>
        <td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
        <td class="subtotal">35.00</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
        <td>3</td>
        <td class="goods"><img src="images/phone2.jpg" alt="" /><span>红楼梦</span></td>
        <td class="sm">红楼梦</td>
        <td>文学</td>
        <td class="sj">2015-11-19</td>
        <td class="price">35.00</td>
        <td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
        <td class="subtotal">35.00</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
        <td>4</td>
        <td class="goods"><img src="images/phone2.jpg" alt="" /><span>红楼梦2</span></td>
        <td class="sm">红楼梦2</td>
        <td>文学</td>
        <td class="sj">2015-11-19</td>
        <td class="price">35.00</td>
        <td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
        <td class="subtotal">35.00</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
        <td>5</td>
        <td class="goods"><img src="images/phone3.jpg" alt="" /><span>生活的书</span></td>
        <td class="sm">生活的书</td>
        <td>生活</td>
        <td class="sj">2015-11-19</td>
        <td class="price">35.00</td>
        <td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
        <td class="subtotal">35.00</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>
    <tr>
        <td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
        <td>6</td>
        <td class="goods"><img src="images/phone3.jpg" alt="" /><span>生活的书2</span></td>
        <td class="sm">生活的书2</td>
        <td>生活</td>
        <td class="sj">2015-11-19</td>
        <td class="price">35.00</td>
        <td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
        <td class="subtotal">35.00</td>
        <td class="operation"><span class="delete">删除</span></td>
    </tr>

    </tbody>
</table>

<div class="foot" id="foot">
    <div class="fr closing" onclick="showTotal()">结 算</div>
    <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
    <div class="fr selected">已选商品
        <span id="selectedTotal">0</span>件

    </div>
</div>
</body>
</html>

1.2JS代码

window.onload = function() {
    var oSelect = document.getElementById("selectAll");
    var aItems = document.getElementsByClassName("check-one");
    var oSum = document.getElementById("priceTotal");
    var oGoods = document.getElementById("selectedTotal");

    // 全选
    oSelect.onclick = function() {
        if (oSelect.checked) {
            for (var i = 0; i < aItems.length; i++) {
                if (aItems[i].checked) {

                } else {
                    oSelect.checked = true;
                    aItems[i].checked = true;
                    getStart();
                }
            }
        } else {
            //全消
            for (var i = 0; i < aItems.length; i++) {
                if (aItems[i].checked) {
                    aItems[i].checked = false;
                    oSum.innerText = 0;
                    oGoods.innerText = 0;
                } else {}
            }
        }
    }
}

function getStart() {
    var oSelect = document.getElementById("selectAll");
    var aItems = document.getElementsByClassName("check-one");
    var oSum = document.getElementById("priceTotal");
    var oGoods = document.getElementById("selectedTotal");

    var aSubtotal = document.getElementsByClassName("subtotal");
    var aCountInput = document.getElementsByClassName("count-input");
    var a = 0;

    for (var i = 0; i < aItems.length; i++) {
        if (aItems[i].checked) {
            chooseIt(i);
            a++;
            if (a == 3) {
                oSelect.checked = true; //当所有选项都选到时,全选按钮自动勾选
            }
        } else {
            oSelect.checked = false; //任意一个选项没勾选,全选按钮不选
            chooseIt(i);
        }
    }
}

function getSum() {
    var temp = 0;
    var oSum = document.getElementById("priceTotal");
    var aItems = document.getElementsByClassName("check-one");
    var aSubtotal = document.getElementsByClassName("subtotal");

    //循环,计算选中的商品的总价格
    for (var j = 0; j < aItems.length; j++) {
        if (aItems[j].checked) {
            temp += parseInt(aSubtotal[j].innerText);
        } else {
            temp += 0;
        }
    }

    oSum.innerText = temp;
}

function getGoods() {
    var num = 0;
    var oGoods = document.getElementById("selectedTotal");
    var aItems = document.getElementsByClassName("check-one");
    var aCountInput = document.getElementsByClassName("count-input");

    //循环,计算选中的商品的总数量
    for (var i = 0; i < aItems.length; i++) {
        if (aItems[i].checked) {
            num += parseInt(aCountInput[i].value);
        } else {
            num += 0;
        }
    }

    oGoods.innerText = num;
}

function getTotal(n) {
    var aPrice = document.getElementsByClassName("price");
    var aCountInput = document.getElementsByClassName("count-input");
    var aSubtotal = document.getElementsByClassName("subtotal");

    //计算单件商品的总价
    var oMoney = parseInt(aPrice[n].innerText) * parseInt(aCountInput[n].value);
    aSubtotal[n].innerText = oMoney;
}

function getPlus(n) {
    var aCountInput = document.getElementsByClassName("count-input");

    //增加单件商品的数量
    var temp = parseInt(aCountInput[n].value) + 1;
    aCountInput[n].value = temp;
}

function getReduce(n) {
    var aCountInput = document.getElementsByClassName("count-input");

    //减少单件商品的数量
    var temp = parseInt(aCountInput[n].value) - 1;
    aCountInput[n].value = temp;

    //当剪到数量为1件时,停止减
    if (aCountInput[n].value < 1) {
        aCountInput[n].value = 1;
    }
}

function showTotal() {
    var money = document.getElementById("priceTotal").innerText;
    alert("你总共花了" + money + "money");
}

function chooseIt(i) {
    var aAdd = document.getElementsByClassName("add");
    var aReduce = document.getElementsByClassName("reduce")
    var aDel = document.getElementsByClassName("delete");
    var oTab = document.getElementById("cartTable");

    aAdd[i].onclick = function() {
        getPlus(i); //增加单件商品数量
        getTotal(i); //计算单间商品总价
        getSum(); //计算总商品价格
        getGoods(); //计算总商品数量
    }

    aReduce[i].onclick = function() {
        getReduce(i); //减少单件商品数量
        getTotal(i);
        getSum();
        getGoods();
    }

    aDel[i].onclick = function() {
        var oDialog = confirm("确定要删除吗?");
        if (oDialog) {
            oTab.tBodies[0].removeChild(aDel[i].parentNode.parentNode);
            getGoods();
            getSum();
        }
        getStart(); //更新表格中行的数量
    }
    getGoods(); //显示初始总商品数量(在勾选了该商品,但未增加数量时,显示默认数量1)
    getSum(); //显示初始商品总价(在勾选了该商品,但未增加数量时,显示默认总价为1件商品的金额)
}

1.3CSS代码

* {
    margin: 0;
    padding: 0;
}
a {
    color: #666;
    text-decoration: none;
}
body {
    padding: 20px;
    color: #666;
}
.fl{
    float: left;
}
.fr {
    float: right;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    text-align: center;
    width: 1400px;
}
th, td {
    border: 1px solid #CADEFF;
}
th {
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}
td {
    padding: 10px;
    color: #444;
}
tbody tr:hover {
    background: RGB(238,246,255);
}
.checkbox {
    width: 60px;
}
.goods {
    width: 80px;
    /* background-color: red; */
    text-align: center;
}
.sm {
    width: 120px;
    /* background-color: red; */
    text-align: center;
}
.sj {
    width: 150px;
    /* background-color: red; */
    text-align: center;
}
.goods img{
    margin-left: 70px;
    width: 80px;
    /* border: #A7CBFF 2px solid; */

    display: inline-block;
    /* float: left; */
    text-align:center;
}
.goods span {
    display: block;
    width: 80px;
    margin-top: 20px;
    text-align: center;
    margin-left: 70px;
    /* float: left; */
}
.price {
    width: 80px;
}
.count {
    width: 90px;
}
.count .add, .count input, .count .reduce {
    float: left;
    margin-right: -1px;
    position: relative;
    z-index: 0;
}
.count .add, .count .reduce {
    height: 23px;
    width: 17px;
    border: 1px solid #e5e5e5;
    background: #f0f0f0;
    text-align: center;
    line-height: 23px;
    color: #444;
}
.count .add:hover, .count .reduce:hover {
    color: #f50;
    z-index: 3;
    border-color: #f60;
    cursor: pointer;
}
.count input {
    width: 50px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
    z-index: 2;
}
.subtotal {
    width: 80px;
    color: red;
    font-weight: bold;
}
.operation {
    width: 80px;
}
.operation span:hover, a:hover {
    cursor: pointer;
    color: red;
    text-decoration: underline;
}
img {
    width: 100px;
    height: 80px;
    /*border: 1px solid #ccc;*/
    margin-right: 10px;
    float: left;
}

.foot {
    width: 1400px;
    margin-top: 10px;
    color: #666;
    height: 48px;
    border: 1px solid #c8c8c8;
    background-color: #eaeaea;
    background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
    position: relative;
    z-index: 8;
}
.foot div, .foot a {
    line-height: 48px;
    height: 48px;
}
.foot .select-all {
    width: 100px;
    height: 48px;
    line-height: 48px;
    padding-left: 5px;
    color: #666;
}
.foot .closing {
    border-left: 1px solid #c8c8c8;
    width: 100px;
    text-align: center;
    color: #000;
    font-weight: bold;
    background: RGB(238,238,238);
    cursor: pointer;
}
.foot .total{
    margin: 0 20px;
    cursor: pointer;
}
.foot  #priceTotal, .foot #selectedTotal {
    color: red;
    font-family: "Microsoft Yahei";
    font-weight: bold;
}
.foot .selected {
    cursor: pointer;
}
.foot .selected .arrow {
    position: relative;
    top:-3px;
    margin-left: 3px;
}
.foot .selected .down {
    position: relative;
    top:3px;
    display: none;
}
.show .selected .down {
    display: inline;
}
.show .selected .up {
    display: none;
}
.foot .selected:hover .arrow {
    color: red;
}
.foot .selected-view {
    width: 935px;
    border: 1px solid #c8c8c8;
    position: absolute;
    height: auto;
    background: #ffffff;
    z-index: 9;
    bottom: 48px;
    left: -1px;
    display:none;
}
.show .selected-view {
    display: block;
}
.foot .selected-view div{
    height: auto;
}
.foot .selected-view .arrow {
    font-size: 16px;
    line-height: 100%;
    color:#c8c8c8;
    position: absolute;
    right: 330px;
    bottom: -9px;
}
.foot .selected-view .arrow span {
    color: #ffffff;
    position: absolute;
    left: 0px;
    bottom: 1px;
}
#selectedViewList {
    padding: 20px;
    margin-bottom: -20px;
}
#selectedViewList div{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 80px;
    border: 1px solid #ccc;
    margin: 10px;
}
#selectedViewList div span {
    display: none;
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: RGBA(0,0,0,.5);
    cursor: pointer;
}
#selectedViewList div:hover span {
    display: block;
}

二、效果图