JavaScript实现网页购物车
作者：客行.
这篇文章主要为大家详细介绍了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就加上1
b++;
},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";
}
// 点+号数量加1
function mathAdd(obj,tr){
// 当点加时，拿到数量加1
var span1=obj.nextElementSibling;
// 拿到他下一个元素的值
span1.textContent=span1.textContent*1+1;
calc(tr);
calcAll();
}
// 点减号时删除商品
// 点-号数量-1
function mathDel(obj,tr){
// 当点加时，拿到数量加1
var 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,innerHTML
var 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变成数组array
rs=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的最后一节课到这里啦，大家可以把代码拿过去运行一下。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。