JavaScript 网页购物车项目

今天是JavaScript的一个汇总，最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下，大家可以看一下，然后自己也可以写一个网页购物车项目噢，然后我们的JavaScript的学习也到此结束啦！下周开始给大家更新新的课程。

一.登录界面

登录界面：1.账号：必须11位数字，以1开头

2.密码：6-8位数字

3.验证码：点击验证码可以切换

4.点注册注册账号

5.登录成功后跳转到商城界面

下方是登录界面的图片，登录的界面代码放在下方给大家

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录界面</title><style>/* 登录 *//* 设置背景图片大小 */body{/* 设置背景 */background-image: url(img/33.gif);background-size:  cover;width: 100%;height: 100%;             }/* 设置表单 */form{/* rgba透明色 */background: rgba(255,255,255,.1);/*绝对布局可四处移动,内容有多大就多大 */position:absolute;padding: 30px 50px;left:55%;top:40%;border-radius: 10px;box-shadow: 3px 6px 10px black;}#zcForm{position:absolute;left:55%;top:30%;}/* 设置input标签 */input{/* 设置边框 */border : 1px solid gray;border-radius:20px;/* 调节边框的大小 */height:25px;width:200px;}.a{height:25px;width:100px;}.b{border-radius:0px;height:25px;width:45px;/* 间隔距离 */margin:0px 20px;}button{margin:20px 0px;width:70px;height:30px;}/* 注册字体 */.zc{position:absolute;left:80%}.bu{background:white;border-radius:10px;}/* 注册 */</style></head><body><form id="dlForm" onsubmit="return  dlUser()"><table><!-- 标题 --><tr><!-- style="text-align:center"设置居中 --><td style="text-align:center" colspan="2"><h3>欢迎来到漫野</h3></td> </tr><!-- 用户名 --><tr><td><img src="img/5.png" width="50px" height="50px"></td> <td><input id="userName" placeholder="请输入账号"></td> </tr><!-- 密码 --><tr><td><img src="img/密码.png" width="40px" height="40px"></td> <td><input id="userPwd" placeholder="请输入密码"></td> </tr><!-- 验证码 --><tr><td><img src="img/验证码.png" width="40px" height="40px"></td><td><input class="a" id="userYzm"><!-- readonly不能修改 --><input id="yzm1" class="b" readonly onclick="yzm()"></td></tr><!-- 登录按钮 --><tr><td colspan="2" style="text-align:center"><button class="bu"><a id="dl" onclick="dlUser()">登录</a></button></td></tr><!-- 注册账号 --><tr><td colspan="2"><a class="zc" onclick="zcUser()">注册账号</a></td></tr></table></form><!--------------------------------------------------------------------------------------><!-- 注册表单 --><form id="zcForm" onsubmit="return zcUser()"><table><!-- 标题 --><tr><td colspan="2" style="text-align:center"><h3>注册漫野账号</h3></td></tr><!-- 用户名 --><tr><td><img src="img/5.png" width="50px" height="50px"></td><td ><input id="zcName" placeholder="请输入注册账号"></td></tr><!-- 密码 --><tr><td><img src="img/密码.png" width="40px" height="40px"></td><td><input id="zcPwd" placeholder="请输入注册密码"></td></tr><!-- 邮箱--><tr><td><img src="img/邮箱.png" width="40px" height="40px"></td><td ><input id="zcEm" placeholder="请输入注册邮箱号"></td></tr><!-- 验证码 --><tr><td><img src="img/验证码.png" width="40px" height="40px"></td><td><input class="a" id="zcYzm"><!-- readonly不能修改 --><input class="b" readonly onclick="yzm()" id="zcYz"></td></tr><!-- 注册按钮 --><tr><td colspan="2" style="text-align:center"><button text="button" onclick="zcUser()"  class="bu">注册</button></td></tr><tr><td colspan="2"><span onclick="balck()">返回</span></td></tr></table></form><!----------------------------------------------------------------------------------------- -->   <script>// 登录方法// 验证码方法window.onload=()=>{zcForm.style.display="none";yzm();}//点击验证码切换验证码function yzm(){var yz=document.getElementsByClassName("b");var i=Math.floor(Math.random()*10)var j=Math.floor(Math.random()*10)var k=Math.floor(Math.random()*10)var l=Math.floor(Math.random()*10)for(let f of yz){f.value=i+""+j+""+k+""+l+"";}}// 验证用户名 用户密码 验证码是否满足要求，满足的话function dlUser(){// 拿到用户 密码 验证码的值var d1=userName.value;var d2=userPwd.value;var d3=userYzm.value;// 拿到验证框的值var  yzm=yzm1.value;// 正则var rexName=/^\d{11}$/;var rexPwd=/^\w{6,8}$/;// 判断用户名和用户密码 验证码是否满足验证if(rexName.test(d1)&&rexPwd.test(d2)&&d3==yzm){// 登录成功以后跳转界面window.open("main.html");return true;}else{alert("用户账号和密码或者验证码不正确");return false;}}    // 注册的方法// 1.覆盖原本的表单function zcUser(){// 登录界面不显示dlForm.style.display="none";// 注册界面显示出来zcForm.style.display="block";// 拿到用户框，密码框，邮箱，验证码；var name=zcName.value;var pwd=zcPwd.value;var email=zcEm.value;var yzm=zcYzm.value;// 拿到验证码的框里的值var zcyzm=zcYz.value;// 正则匹配var rexName=/^\d{11}$/;var rexPwd=/^\w{6,8}$/;var rexEm=/^\w+[.]\w+@\w+[.]\w+$/;if(rexName.test(name)&&rexPwd.test(pwd)&&rexEm.test(email)&&yzm==zcyzm){return true;}else{  return false;}}function balck(){// 登录界面显示dlForm.style.display="block";// 注册界面不显示出来zcForm.style.display="none";}</script></body>
</html>

二.商城中心和购物车

商城中心:1.点击商品下方的加入购物车，可以添加到我们的购物车中

2.点击上方的菜单栏中的购物车可以到购物车，点击商城，也又可以回到商城

购物车:1.点击删除商品，可以删除该商品

2.点击全选按钮，或者点击多选框，点击删除商品，也可以删除商品，点击全选在点击所选商品，可以直接清空购物车

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商城</title><style>#img{width:400px;height:300px;/* url:位置 */background:url("img/2.jpg") center/cover;position:absolute;left:36%}* {padding: 0px;margin: 0px;list-style: none;}.nav {height: 50px;background: black;}.nav>li {color: white;float: left;line-height: 50px;padding: 0px 30px;position: relative;}li {position: relative;text-align: center;}.nav>li:hover {background:;}.nav ul {background: green;width: 150px;position: absolute;left: 0px;/* display: none;*/opacity: 0;transform: rotate(0deg) scale(.5);transition: .2s;}li li:hover {background: yellow;}.nav>li:hover ul {/*display: block;*/opacity: 1;transform: rotate(360deg) scale(1);}li::after {content: "";position: absolute;width: 0;height: 5px;background: white;bottom: 10px;left: 50%;transform: translate(-50%, 0);transition: 1s;}li:hover::after {width: 80%;}/* 搜索框 */#ss{/* 设置边框 */border : 1px solid gray;border-radius:20px;/* 调节边框的大小 */height:40px;width:500px;position:absolute;left:30%;top:60px;font-size:20px;}/* 搜索图片 */#simg{width:40px;height:40px;position:absolute;left:59%;top:60px;}/* 动态图 */#img{/* 设置div id名为img设置背景图片 */width:600px;height:400px;/* url:位置 */background:url("img/1.gif") center/cover;position:absolute;left:15%;top:20%;border-radius:20px;}/* 漫野字体设置  */#my{position:absolute;left:20%;top:7%;}
/* -----------------------第一个商品--------------------------------------- *//* 第一个商品div */#divSp1{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:10%;top:100%;}/* 第一个物品img */#sp1{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc1{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz1{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg1{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*---- ------------------------第二个商品---------------------------------- */#divSp2{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:40%;top:100%;}#sp2{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc2{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz2{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg2{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第三个----------------------------------------------- *//* div标签 */#divSp3{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:70%;top:100%;}/* 图片 */#sp3{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc3{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz3{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg3{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第四个----------------------------------------------- *//* div标签 */#divSp4{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:65%;top:18%;}/* 图片 */#sp4{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc4{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz4{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg4{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第五个----------------------------------------------- *//* div标签 */#divSp5{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:10%;top:180%;}/* 图片 */#sp5{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc5{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz5{width:300px;height:40px;position:absolute;left:100px;top:350px;}/* 商品价格 */#jg5{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第五个----------------------------------------------- *//* div标签 */#divSp6{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:40%;top:180%;}/* 图片 */#sp6{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc6{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz6{width:300px;height:40px;position:absolute;left:60px;top:350px;}/* 商品价格 */#jg6{width:300px;height:40px;position:absolute;left:160px;top:405px;}            /*------------------------第七个----------------------------------------------- *//* div标签 */#divSp7{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:70%;top:180%;}/* 图片 */#sp7{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc7{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz7{width:300px;height:40px;position:absolute;left:60px;top:350px;}/* 商品价格 */#jg7{width:300px;height:40px;position:absolute;left:160px;top:405px;}
/*---------------------------------表格------------------------------------------ */table{border-top: 1px solid #333;border-left: 1px solid #333;width:100%;height:60px;font-size:25px;}/* 新增按钮的大小 */.tabelBu{width:60px;height:40px;                                                                                                                                                                                                                              0px;border-radius:20px;background:white;}/* 表格按钮的大小 */.tableBu1{width:60px;height:40px;                                                                                                                                                                                                                              0px;border-radius:20px;background:white;}/* 数量增加减按钮操作*/.tableBu2{width:20px;height:20px;                                                                                                                                                                                                                              0px;/* border-radius:20px; */background:white;}td{text-align:right;}#delalll{width:150px;height:40px;border:0px;/* border-radius:20px; */background:white;font-size:20px;}/* 热销商品 */#rx{width:200px;height:40px;background:white;position:absolute;left:160px;top:700px;}</style></head><body><div><!-- 栏目 --><ul class="nav"><li onclick="scMain()">商城</li><li id="tz" onclick="fn1()">购物车</li><li>收藏</li><li>商品分类</li><li>联系客服</li></ul></div><div id="divMain"><!-- 蕾姆老婆等你回家 --><font size="6" id="my">漫野网</font><!--搜索框--><input id="ss" placeholder="冰墩墩"><img  id="simg" src="img/搜索.png"><!--第二个div------------------------------------------------------------------- --><!-- 图片切换 --><div id="img"></div><!-- 第一张商品图 --><div id="divSp1"><img src="img/6.jpg" id="sp1"><p id="wz1">初音未来4代樱初音日本摆件玩具动漫周边</p><p id="jg3"><span>￥</span>257</p><button id="gwc1" onclick="gwc(this)">加入购物车</button></div><!-- 第二张图片 --><div id="divSp2"><img src="img/10.jpg" id="sp2"><p id="wz2">拉姆蕾姆透明亚克力立牌摆件礼物</p><p id="jg2"><span>￥</span>57</p><button id="gwc2" onmouseover="gwc(this)">加入购物车</button></div><!-- 第三张图 --><div id="divSp3"><img src="img/12.jpg" id="sp3"><p id="wz3"> 蕾姆 Q版 手办正品景品</p><p id="jg3"><span>￥</span>157</p><button id="gwc3" onclick="gwc(this)">加入购物车</button></div><!-- 第四张图片 --><div id="divSp4"><img src="img/102.jpg" id="sp4"><p id="wz4">哔哩哔哩初音未来长发公主景品手办</p><p id="jg4"><span>￥</span>157</p><button id="gwc4" onclick="gwc(this)">加入购物车</button></div><!-- 第五张图片 --><div id="divSp5"><img src="img/101.jpg" id="sp5"><p id="wz5">魔女之旅 伊蕾娜 景品手办</p><p id="jg5"><span>￥</span>257</p><button id="gwc5" onclick="gwc(this)">加入购物车</button></div><!-- 第六张图片 --><div id="divSp6"><img src="img/103.jpg" id="sp6"><p id="wz6">MG红异端强袭自由独角兽二次元机器人机甲HG手办拼装玩具</p><p id="jg6"><span>￥</span>357</p><button id="gwc6" onclick="gwc(this)">加入购物车</button></div><!-- 第七张图片 --><div id="divSp7"><img src="img/104.jpg" id="sp7"><p id="wz7">MG强袭自由独角兽红异端PG机甲初号机Eva拼装玩具男</p><p id="jg7"><span>￥</span>720</p><button id="gwc7" onclick="gwc(this)">加入购物车</button></div><div id="rx"><h1>热销商品</h1></div></div><!--------------------------------购物车表单-----------------------------------><table id="table" border="0" cellspacing="50px"><tr><td id="delalll" onclick="delCKRow()">删除选中商品</td><td colspan="6"><span id="spanSum">商品总价:￥<font id="allPrice"></font></span></td></tr><tr><td>全选  <input type="checkbox" onclick="selectAll(this.checked)" id="selAll"></td><td>商品</td><td>商品名称</td><td>商品个数</td><td>商品价格</td><td>商品总价</td><td>商品操作</td></tr><tr><td><input type="checkbox" class="cbox"></td><td><img src="img/10.jpg" width="150px" height="150px"></td><td class="tableName">拉姆蕾姆透明亚克力立牌摆件礼物</td><td><button class="tableBu2" onclick="mathAdd(this,this.parentElement.parentElement)">+</button><span class="count1">1</span> <button class="tableBu2" onclick="mathDel(this,this.parentElement.parentElement)">-</button></td><td class="price">57</td><td class="sum">57</td><td><button class="tableBu1" onclick="delRow(this.parentElement.parentElement)">删除商品</button></td></tr></table><script>var b=1;//使用循环计时器让我们的图片切换setInterval(function fn1(){img.style.backgroundImage='url("img/'+(b%3)+'.gif")';//每执行一次b就加上1b++;},2000)var count=0;// 写方法当点击按钮时把商品加入购物车function gwc(obj){count++;// 1.拿到商品图片// 2.拿到商品名称// 3.增加个数// obj按钮自己,拿到图片// 拿到价格var money=obj.previousElementSibling.textContent;// 转换纯数字var m=money.replace(/[^0-9]/ig,"");// 拿到商品名字var name=obj.previousElementSibling.previousElementSibling.textContent;// 拿到商品图片var img=obj.previousElementSibling.previousElementSibling.previousElementSibling;var imgSrc=img.getAttribute("src");// 新增行// table:是我们给表格的id名// table.insertRow(i):在表格中为i的位置插入一行var tr=table.insertRow();// row.insertCell:在行里面插列var d1=tr.insertCell();var d2=tr.insertCell();var d3=tr.insertCell();var d4=tr.insertCell();var d5=tr.insertCell();var d6=tr.insertCell();var d7=tr.insertCell();// 给每一列插内容// innerHTM可以插html标签也可以插文字d1.innerHTML='<input type="checkbox" class="cbox">'// textContent 可以插文字，无法插html标签// 商品图片d2.innerHTML='<img src='+(imgSrc)+' width="150px" height="150px">'; // 商品名称d3.innerHTML="<span class='tableName'> "+(name)+" </span>";// 商品个数d4.innerHTML="<button class='tableBu2' onclick='mathAdd(this,this.parentElement.parentElement)'>+</button><span class='count1'>  "+(count)+"  </span><button class='tableBu2' onclick='mathDel(this,this.parentElement.parentElement)'>-</button>";// 商品价格d5.innerHTML="<span class='price'> "+(m)+" </span>";// 商品总价d6.innerHTML="<span class='sum'> "+(m)+" </span>";// 商品操作d7.innerHTML="<button class='tabelBu' onclick='delRow(this.parentElement.parentElement)'>删除商品</button>";count=0;calcAll();}// 点击跳转按钮时，表格显示出来function fn1(){divMain.style.display="none";table.style.display="block";}// 点击商城function scMain(){divMain.style.display="block";table.style.display="none";}// 点+号数量加1function mathAdd(obj,tr){// 当点加时，拿到数量加1var span1=obj.nextElementSibling;// 拿到他下一个元素的值span1.textContent=span1.textContent*1+1;     calc(tr);calcAll();}// 点减号时删除商品// 点-号数量-1function mathDel(obj,tr){// 当点加时，拿到数量加1var span1=obj.previousElementSibling;// 拿到他下一个元素的值if(span1.textContent<=1){span1.textContent=1;return;}span1.textContent=span1.textContent-1;calc(tr);calcAll();}// 总价计算// 个数*价格function calc(tr) {//value只有在input或者select//其他的内容全部使用textContent,innerHTMLvar price=tr.getElementsByClassName("price")[0].textContent;var count=tr.getElementsByClassName("count1")[0].textContent;//使用单价*数量算出总价 并赋值给对应元素tr.getElementsByClassName("sum")[0].textContent=price*count;calcAll();}// 当进来时只显示主界面window.onload=()=>{table.style.display="none";var rs=document.getElementsByTagName("tr")for(let i=2;i<rs.length;i++){calc(rs[i])}calcAll();}// 删除整行//按钮点击删除该行function delRow(tr) {tr.outerHTML="";calcAll();}//计算当前所有商品的总价function calcAll() {//获得页面中所有的行var rs=document.getElementsByTagName("tr")var sum=0;for(let i=2;i<rs.length;i++){//rs[i]就是除了第一行之外的其他的行var s1=rs[i].getElementsByClassName("sum")[0].textContent;sum+=parseFloat(s1)}//给页面赋值,只要小书店后两位allPrice.textContent=sum.toFixed(2);}//删除选中的行function delCKRow() {//获得页面中所有的行var rs=document.getElementsByTagName("tr")//将集合collection变成数组arrayrs=Array.from(rs)for(let i=2;i<rs.length;i++){//拿到行中对应的多选框var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]//判断多选框是否被选中if(ck.checked){//删除该行rs[i].outerHTML=""}}calcAll()}//全选功能function selectAll(status) {var is=document.querySelectorAll("input[type='checkbox']")for (let i of is){i.checked=status}}</script></body>
</html>

JavaScript的最后一节课到这里啦，大家可以把代码拿过去运行一下。

JavaScript 网页购物车项目相关推荐

JavaScript网页购物车
今天给大家讲解一个网页购物车的案例,案例比较简陋,包含登录注册购物车界面. 在做项目之前,你要在自己项目中建一个img包,用来存储你项目中所需用到的图片,如下图所示一.登录注册介绍界面代码展示 & ...
JavaScript当当购物车项目
要求点击+/-,对应的数量和金额要进行变化而且结算总额也要进行对应变化 PS:单击减号时,要进行数量判断,数量最小为1 思路 ①:创建三个函数,单击加好,单击减号,总额的变化 ②:如何获取单价和数 ...
javascript网页设计期末作业购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业购物网站如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业购物网站网页实 ...
mvc模式网页购物车
本学期学习JSP和Servlet后,老师要求使用MVC模式下编写一个网页购物车,以下是一些主要代码及开发心得这个是包的截图先是注册页面,编写一个表单,表单方法调用另一个JSP页面(因为我这个页面是 ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
用一个网页展示项目成果
Web 我的第一个网页搭建项目主页搭建索引目录搭建运行操作此处只关注网页搭建,数据分析结果来自真实数据分析案例,这里不展示. 主页搭建 welcome.html文件内,这里引入了背景图增加了项 ...
JavaScript如何获得项目根路径
利用JavaScript代码获得项目的根地址: 完整代码: //js获取项目根路径,如: http://localhost:8083/uimcardprj function getRootPath() ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.6节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
Javascript网页滚动方法
Javascript网页滚动方法作者:不详来源于:源码下载吧发布时间:2007-6-6 16:24:26 [ 字体:大中小 ] 我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上 ...

JavaScript 网页购物车项目

一.登录界面

二.商城中心和购物车

JavaScript 网页购物车项目相关推荐

最新文章

热门文章