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

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;}

"en">
    "UTF-8">
    
    "css/cartStyle.css" rel="stylesheet" type="text/css">



"content">
    
"logo">
        "img/dd_logo.jpg">关闭
    
    
"cartList" id="cartList">
        

            
            
¥"price" type="text" value="21.90">
            
            
"minus"  type="button" value="-">"amount" type="text" value="1">"plus" type="button" value="+">
            
            
"price0">¥21.90
            
移入收藏
删除
        
        

            
            
¥"price" type="text" value="24.00">
            
            
"minus" type="button" value="-">"amount" type="text" value="1">"plus"  type="button" value="+">
            
            
"price1">¥24.00
            
移入收藏
删除
        
        

            
            
"totalPrice">
            
            
结 算
        
    
    
    
"cc">

//获取标签
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="
您本次购买的信息如下:
白岩松: 白说: "+zongjia1.innerText+"
岛上书店: "+zongjia2.innerText+"
商品总计:"+zongjia.innerText+"
";
}
//--单击事件
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();//关闭整个浏览器;
};