原生JS 简单购物车网页

最新推荐文章于 2024-05-28 18:30:26 发布

Aimercat

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1.6k

点赞数 4

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/aimercat/article/details/109440209

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下是代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车:)</title>
    <link rel="stylesheet" type="text/css" href="./css/shopstyle.css">
</head>
<body style="background-color: rgba(233, 233, 233, 0.719);">
    <div class="homepage">
        <h1 class="biaoti">购物车</h1>
        <h2 class="biaoti">商品一览</h2>
        <ul class="all">
            <li><a href="#" onclick="tianjia(this)" id="gooods1">Sony Wi-1000x</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods2">Nike M2K</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods3">C语言入门经典</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods4">拯救者R7000P</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods5">华为Mate40pro</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods6">iphone12 pro</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods7">AIR FORCE 1</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods8">JavaScript高级程序设计(第3版)</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods9">算法图解</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods10">AirPods</a></li>
            <li><a href="#" onclick="tianjia(this)" id="gooods11">Sony A6000L</a></li>
        </ul>

    </div>
    <div class="homepage">
    <table id="shopingcar">
        
        <tr>
            <th>名称</th>
            <th>类别</th>
            <th>数量</th>
            <th>单价</th>
            <th>操作</th>
        </tr>
       <!-- 
            <tr>
            <td>AirPods</td>
            <td>TWS耳机</td>
            <td>
                <div class="num">
                    <button class="num2">+</button>
                    <p class="num2">1</p>
                    <button class="num2">-</button>
                </div>
            </td>
            <td>￥839</td>
            <td><button>删除</button></td>
            </tr>
        -->
       
       
    </table>
    <p id="sum">总价格是：0</p>
    </div>
    <script src="./js/shoppingcar.js"></script>

</body>
</html>

CSS

tr,td
{
    border: 1px solid black;
    padding: 2%;
    
}
th
{
    padding: 1%;
    background-color: rgba(71, 149, 250, 0.795);
}
table
{
    position: relative;
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.homepage
{
    background-color: white;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border:2px dashed #F7EEEE;
    border-radius:5px;
  
}
.biaoti
{
    text-align: center;
}
button
{
    width: 30px;/*设置按钮宽度*/
    height: 30px;/*设置按钮高度*/
    color:white;/*字体颜色*/
    background-color:cornflowerblue;/*按钮背景颜色*/
    border-radius: 3px;/*让按钮变得圆滑一点*/
    border-width: 0;/*消去按钮丑的边框*/
    margin: 0;
    outline: none;/*取消轮廓*/
    font-family:Microsoft Yahei;/*字体设置为楷体*/
    font-size: 17px;/*设置字体大小*/
    text-align: center;/*字体居中*/
    cursor: pointer;/*设置鼠标箭头手势*/
    }
button:hover/*鼠标移动时的颜色变化*/
{
    background-color: rgb(96, 96, 255);
}
.all
{
    list-style-type: none;
    
}
.all>li
{
    display: inline;
    float: left;
    margin: 1%;

}
a
{
    text-decoration: none;
    color: #000;
}
a:hover
{
    color: rgb(95, 95, 95);
}
.num2
{
    position: relative;
    margin: auto;
    
}
.num
{
    position: relative;
    margin: auto;
}
.plus
{
    position: relative;
    margin: 0;
    padding: 0;
}


//商品对象，包括商品所有参数的键值对
var wi1000x=
{
    name:"索尼WI1000X",
    leibie:"电子产品",
    num:1,
    price:1099,
}
var nike=
{
    name:"耐克M2K",
    leibie:"鞋类",
    num:1,
    price:599,
}
var cyuyan=
{
    name:"C语言入门经典",
    leibie:"书籍",
    num:1,
    price:39,
}
var r7000p=
{
    name:"拯救者R7000P",
    leibie:"电子产品",
    num:1,
    price:7999,
}
var mate40p =
{
    name:"华为mate40pro",
    leibie:"电子产品",
    num:1,
    price:6999,
}
var iphone12pro =
{
    name:"iphone12 pro",
    leibie:"电子产品",
    num:1,
    price:8999,
}
var airforce =
{
    name:"耐克Air Force 1",
    leibie:"鞋类",
    num:1,
    price:699,
}
var js =
{
    name:"avaScript高级程序设计(第3版)",
    leibie:"书籍",
    num:1,
    price:49,
}
var suanfa =
{
    name:"算法图解",
    leibie:"书籍",
    num:1,
    price:50,
}
var airpods =
{
    name:"Airpods第二代",
    leibie:"电子产品",
    num:1,
    price:749,
}
var a6000l =
{
    name:"Sony A6000L",
    leibie:"相机",
    num:1,
    price:4599,
}
//



var a=new Array([4]);//保存商品属性的数组遍历
var i=0;//forin循环计数器
var sum=0;//总价钱



//forin遍历对象对商品参数进行赋值
function forin(temp)
{   
    i=0;
    for(x in temp)
    {   
        a[i]=temp[x];
        i++;
    }
}
function tianjia(obj)
{
    var goods;
    goods=obj.id;
    switch(goods)//赋值
    {
        case 'gooods1':forin(wi1000x);
        break;
        case "gooods2":forin(nike);
        break;
        case "gooods3":forin(cyuyan);
        break;
        case "gooods4":forin(r7000p);
        break;
        case "gooods5":forin(mate40p);
        break;
        case "gooods6":forin(iphone12pro);
        break;
        case "gooods7":forin(airforce);
        break;
        case "gooods8":forin(js);
        break;
        case "gooods9":forin(suanfa);
        break;
        case "gooods10":forin(airpods);
        break;
        case "gooods11":forin(a6000l);
        break;
    }
    //console.log(a);
    //创建新表格
    var a1=document.getElementById("shopingcar");
    var tr=document.createElement("tr");
    a1.appendChild(tr);
    tr.innerHTML="<td>"+a[0]+"</td>"+"<td>"+a[1]+"</td>"+"<td>"+"<button class='num2' id='plus' οnclick='plus(this)'>"+"<p class='plus'>"+"+"+"</p>"+"</button>"+"<p class='plus'>"+a[2]+"</p>"+"<button class='num3' id='sub' οnclick='sub(this)'>"+"<p class='plus'>"+"-"+"</p>"+"</button>"+"</td>"+"<td>"+a[3]+"</td>"+"<td>"+"<button οnclick='del(this)'>"+"X"+"</button>"+"</td>";

    sum=sum+a[3];
    zongjiage();
    return sum;
}
//function sum()
//{
//    sum=sum+a[3];
//}
function del(obj)//删除商品
{
    var p1=obj.parentNode;//找父标签td
    var p2=p1.parentNode;//找父标签tr
    var p3=p2.children[2];
    var p4=p3.children[1];
    var num=p4.innerHTML;
    num=Number(num);
    a=document.getElementById("shopingcar");
    a.removeChild(p2);
    tmp=p1.previousElementSibling.innerHTML;
    tmp=Number(tmp);
    sum=sum-tmp*num;
    zongjiage();
    return sum;
}
//计算总价钱

function plus(obj)//加数量
{
    var p1=obj;
    var a;
    a=p1.nextElementSibling.innerHTML;
    a=Number(a);
    a=a+1;
    p1.nextElementSibling.innerHTML=a;//给数量切换数值
    var p2=p1.parentNode;//找父级标签
    var p3=p2.nextElementSibling;//找下一个兄弟标签
    var tmp=p3.innerHTML;//找当前标签的价格
    tmp=Number(tmp);
    //console.log(tmp);
    sum=sum+tmp;
    zongjiage();
    return sum;
}
function sub(obj)//减数量
{
    var p1=obj;
    var a;
    a=p1.previousElementSibling.innerHTML;
    a=Number(a);
    if(a>1)
    {
        a=a-1;
        p1.previousElementSibling.innerHTML=a;//给数量切换数值
        var p2=p1.parentNode;//找父级标签
        var p3=p2.nextElementSibling;//找下一个兄弟标签
        var tmp=p3.innerHTML;//找当前标签的价格
        tmp=Number(tmp);
        //console.log(tmp);
        sum=sum-tmp;
        zongjiage();
        return sum;
    }

}
function zongjiage()//算总价格
{
    var s=document.getElementById("sum");
    s.innerHTML="总价格是:"+sum;
}

Aimercat

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
原生JS 简单购物车网页

初学WEB开发，折腾了一下午，勉强写了个购物车出来，心得体会还是不少，但我感觉我的代码不够最优化，也有很多要改进的地方，希望大神能帮忙改一下，给点建议啥的以下是代码：HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫