访问当前购物车页面节点

最新推荐文章于 2022-05-25 16:39:41 发布

月薪不过5000不改名

最新推荐文章于 2022-05-25 16:39:41 发布

阅读量1.4k

点赞数 3

本文链接：https://blog.csdn.net/Infatuatedmonkey/article/details/124356398

版权

1.效果图
（如有侵权还请速速联系）
访问当前购物车
html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>访问当当购物车页面节点</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="159.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0);"></li>
            <li id="price0">¥159.90</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="159.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1);"></li>
            <li id="price1">¥159.00</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
    <div></div>
</div>
<script type="text/javascript" src="js/shopping.js"></script>
<script type="text/javascript">
    function accounts(){
        var num1=document.getElementById("cartList").firstElementChild.firstElementChild.nextElementSibling.nextElementSibling.innerHTML||document.getElementById("cartList").firstChild.firstChild.nextSibling.nextSibling.innerHTML;
        var num2=document.getElementById("cartList").firstElementChild.nextElementSibling.lastElementChild.previousElementSibling.innerHTML||document.getElementById("cartList").firstChild.nextSibling.lastChild.previousSibling.innerHTML
        var total=document.getElementById("cartList").lastElementChild.firstElementChild.innerHTML||document.getElementById("cartList").lastChild.firstChild.innerHTML;
        var str="您本次购买的商品信息如下：<br/>白岩松：白说："+num1+"<br/>岛上书店："+num2+"<br/>商品共计："+total;
        document.getElementById("cartList").nextElementSibling.innerHTML=str;


    }
</script>
</body>
</html>

css部分

body,ul,li,div,p,h1,h2{margin: 0;padding: 0;overflow: hidden;}
ul,li{list-style: none;}
.content{width: 910px; margin: 0 auto;}
.logo{margin: 10px 0;}
.logo span{
    display: inline-block;
    float: right;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: "微软雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}
.cartList{
    background: url("../images/shoppingBg.jpg") no-repeat;
    height: 414px;
    overflow: hidden;
    background-size:100%; 
    position: relative;
}
.cartList ul{
    position: absolute;
    right: -30px;
    width: 450px; 
}
.cartList ul:nth-of-type(1){
    top: 120px;
}
.cartList ul:nth-of-type(2){
    top:230px;
}
.cartList ul li{
    font-family: "微软雅黑";
    font-size: 12px;
    color: #666666;
    text-align: center;
    line-height: 25px;
    float: left;
}
.cartList ul li input[name="price"]{
    border: none;
    background: transparent;
    width: 45px;
    text-align: center;
}
.cartList ul li input[name="amount"]{
    width: 45px;
    text-align: center;
    border: 1px solid #999999;
    border-left: none;
    border-right: none;
    height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
    height: 25px;
    border: 1px #999999 solid;
    width: 25px;
    text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
    position: absolute;
    bottom: 40px;
    right: -13px;
}
.cartList ol li{
    float: left;
}
.cartList ol li:nth-of-type(1){
    color: #ff0000;
    width: 120px;
}
.cartList ol li span{display: inline-block;
    float: right;
    width: 80px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-family: "微软雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    margin-right: 15px;
    cursor: pointer;
    font-weight: bold;}
.content div:last-of-type{border: 1px #ff0000 solid; padding: 5px;}

js部分

/**
 * Created by zongjuan.wang on 2016/6/1.
 */

/*关闭窗口*/
function close_plan(){
    window.close();
}
function collection(){
    var flag=confirm("移入收藏后，将不再购物车显示，是否继续操作?");
    if(flag==true){
        alert("移入收藏成功!");
    }
}
function del(){
    var flag=confirm("您确定要删除商品吗?");
    if(flag==true){
        alert("删除成功!");
    }
}
function minus(num){
    var prices=document.getElementsByName("price")[num].value;
    var count=parseInt(document.getElementsByName("amount")[num].value)-1;
    if(count<1){
        alert("不能再减了，再减就没有啦！");
    }
    else{
        document.getElementsByName("amount")[num].value=count;
        var totals=parseFloat(prices*count).toFixed(2);
        document.getElementById("price"+num).innerHTML="¥" +totals;
        total();
    }
}
function plus(num){
    var prices=document.getElementsByName("price")[num].value;
    var count=parseInt(document.getElementsByName("amount")[num].value)+1;
    document.getElementsByName("amount")[num].value=count;
    var totals=parseFloat(prices*count).toFixed(2);
    document.getElementById("price"+num).innerHTML="¥" +totals;
    total();
}
function total(){
    var prices=document.getElementsByName("price");
    var count=document.getElementsByName("amount");
    var sum=0;
    for(var i=0; i<prices.length;i++){
       sum+=prices[i].value*count[i].value;
    }
    document.getElementById("totalPrice").innerHTML="¥" +sum.toFixed(2);
}
total();

记录每一个前端小案例！

月薪不过5000不改名

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
访问当前购物车页面节点

1.效果图（如有侵权还请速速联系）html部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>访问当当购物车页面节点</title> <link type="text/css" rel="stylesheet" href="css/cartStyle.css" /></head><
复制链接

扫一扫