原生JS 简单购物车网页

以下是代码：

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;//找父标签tdvar p2=p1.parentNode;//找父标签trvar 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;
}

原生JS 简单购物车网页相关推荐

如何用原生jS做购物车
如何用原生jS做购物车今天给大家分享如何用原生js做购物车,我们都逛过淘宝.京东这样购物网站,像这种购物网站,购物车是肯定少不了的 ,我们在天猫上购物,一开始一个页面有很多种商品,然后你在这里面看中 ...
java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
H5原生js简单拼图游戏
H5原生js简单拼图游戏演示地址效果展示源码 index.html puzzle.css puzzle.js 源码下载演示地址链接: 演示地址效果展示源码 index.html < ...
怎样编写html购物车结算页面,原生JS实现购物车结算功能
原生JS实现购物车结算功能 @charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;t ...
原生js简单实现五指棋
原生js简单实现五指棋无聊之时可以玩玩,浏览器直接打开,简单又不失趣味! 如图: 上代码: <div id="bigBackground"><!-- 棋盘水平线 ...
html,css,js,简单的网页留言板
效果如图: 实现代码如下: html代码: <!DOCTYPE html> <html> <head lang="en"> <meta c ...
用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
原生JS简单的无缝自动轮播
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...
学校留言板网页html和css,html,css,js,简单的网页留言板
效果如图: 实现代码如下: html代码: 简单的网页留言板简单的网页留言板 index.js代码: ///** // * Created by Administrator on 2014/11/2 ...

原生JS 简单购物车网页

原生JS 简单购物车网页相关推荐

最新文章

热门文章