用JavaScript+html+css制作当当购物车

置顶浅浅一笑^*^

已于 2023-07-07 16:16:25 修改

阅读量2w

点赞数 44

于 2020-03-13 01:50:54 首次发布

本文链接：https://blog.csdn.net/weixin_46409887/article/details/104832790

版权

在这里插入图片描述
cartStyle.css

body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto;  font-family: "微软雅黑";}
.logo{margin: 10px 0;}
.logo span{
    display: inline-block;
    float: right;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}
.cartList{
    background: url("../img/shoppingBg.jpg") no-repeat;
    height: 414px;
    overflow: hidden;
}
.cartList ul{
    float: right;
    width: 450px;
}
.cartList ul:nth-of-type(1){
    margin-top: 125px;
}
.cartList ul:nth-of-type(2){
    margin-top:70px;
}
.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{
    float: right;
    clear: both;
    margin-top: 60px;
}
.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-top: 5px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: bold;}
.content div:last-of-type{border: 1px #ff0000 solid; padding: 5px;}

html

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

<div class="content">
    <div class="logo">
        <img src="img/dd_logo.jpg"><span>关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <!-- 单价 -->
            <li>¥<input name="price" type="text" value="21.90"></li>
            <!-- 加减-->
            <li><input name="minus"  type="button" value="-"><input name="amount" type="text" value="1"><input name="plus" type="button" value="+"></li>
            <!--  总价 -->
            <li id="price0">¥21.90</li>
            <li><p >移入收藏</p><p>删除</p></li>
        </ul>
        <ul>
            <!-- 单价 -->
            <li>¥<input name="price" type="text" value="24.00"></li>
            <!-- 加减-->
            <li><input name="minus" type="button" value="-"><input name="amount" type="text" value="1"><input name="plus"  type="button" value="+"></li>
            <!--  总价 -->
            <li id="price1">¥24.00</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <!--总结算 -->
            <li id="totalPrice"></li>
            <!--结算按钮 -->
            <li><span>结 算</span></li>
        </ol>
    </div>
    <!-----------------显示结算的div---js----------->
    <div id="cc"></div>
</div>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>

index.js

//获取标签
var danjia=document.getElementsByName("price");//单价
var jian=document.getElementsByName("minus");//-
var add=document.getElementsByName("amount");//数量
var jia=document.getElementsByName("plus");//+
var zongjia1=document.getElementById("price0");//总价1
var zongjia2=document.getElementById("price1");//总价2
var zongjia=document.getElementById("totalPrice");//合计:
var jiesuan=document.getElementsByTagName("span");//关闭按钮和结算按钮
var js=document.getElementById("cc");//结算页面
//函数封装
function sum() {
    zongjia1.innerText="￥"+Math.round(danjia[0].value*add[0].value*100)/100+"0";//1.单价*数量
    zongjia2.innerText="￥"+danjia[1].value*add[1].value+"."+"00";//2.单价*数量
}
function fn1(){
    var sum1=Math.round(danjia[0].value*add[0].value*100)/100+danjia[1].value*add[1].value;
    zongjia.innerHTML="￥"+sum1+"0";
    js.innerHTML="<p>您本次购买的信息如下:</p><p>白岩松: 白说: "+zongjia1.innerText+"</p><p>岛上书店: "+zongjia2.innerText+"</p><p>商品总计:"+zongjia.innerText+"</p>";
}
//--单击事件
for(var i=0;i<jian.length;i++){
    jian[i].index=i;
    jian[i].onclick=function() {
        console.log(this.index);
       if(add[this.index].value<=1){
           alert("数里最小值为1");
       } else{
           add[this.index].value--;
           sum();
       }
    }
}
//++单击事件
for(var i=0;i<jia.length;i++){//数量无上限
    jia[i].index=i;
    jia[i].onclick=function() {
        console.log(this.index);
            add[this.index].value++;
            sum();

    }
}

//结算事件
jiesuan[1].onclick=fn1;
//关闭事件
jiesuan[0].onclick=function() {
    window.close();//关闭整个浏览器;
};

浅浅一笑^*^

关注

44
点赞
踩
240

收藏

觉得还不错? 一键收藏
11
评论
用JavaScript+html+css制作当当购物车

body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}ul,li,ol{list-style: none;}.content{width: 810px; margin: 0 auto; font-family: "微软雅黑";}.logo{margin: 10px 0;}.logo span{ display: inline-block...
复制链接

扫一扫