目录
前言
大家还记得上次给大家分享的购物车功能的实现吗？今天就来给大家分享最近做的一个个人小项目，就用到了上次给大家分享的购物车功能哦，大家快来一起动手尝试一下吧。
一、登陆界面的制作
主要运用CSS的知识来实现界面的排版制作。
效果图：
登陆界面
具有用户名和密码框，密码框做了加密(密码不可视) 点击上方黄色按钮可以翻转界面到注册界面
用户名和密码框做了表单验证（正则验证）用户名必须为英文字母，且必须在3-6位之中，密码长度必须在6-10位之中
注册界面
主要功能与登陆界面异曲同工，增加了确认密码的功能，同时也具备密码的加密 如果账号或者密码的输入不符合正则的要求（正则验证详细在上）则会在输入框中提示信息输入有误。
代码详情
详细代码如下（注册登陆界面）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
* {
padding: 0;
margin: 0;
outline: none;
border: none;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(31, 32, 41);
}
.shell {
width: 300px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
perspective: 1000px;
/* 给最外层加上一个透视，否则接下去的翻转会没有3d的效果 */
}
.top {
width: 400px;
display: flex;
cursor: pointer;
justify-content: center;
}
/* .off, */
.off {
margin-right: 40px;
color: #fff;
transition: .5s;
font: 300 30px 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.on {
color: #fff;
transition: .5s;
font: 300 30px 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.on{
opacity: .5;
margin-left: 40px;
}
.button {
width: 60px;
height: 29px;
background-color: rgb(255, 235, 167);
border-radius: 20px;
position: relative;
}
.ball {
position: absolute;
width: 25px;
height: 25px;
background-color: rgb(46, 45, 56);
border-radius: 50%;
transition: .5s;
box-shadow: 0 0 10px #000;
left: 0;
transform: translate(-1px);
}
.bottom {
width: 400px;
height: 400px;
background-image: url(image/background.png);
transform-style: preserve-3d;
/* 使元素呈现出3D效果 */
position: relative;
transition: .7s;
border-radius: 5px;
}
.bottom>div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bottom>div h2 {
color: white;
}
.bottom>div input{
width: 300px;
height: 40px;
padding:0 10px;
background-color: rgb(31, 32, 41);
color: #fff;
}
.bottom>div button{
width: 90px;
height: 40px;
color: #333;
font-size: 15px;
background-color: rgb(255, 235, 167);
border-radius: 4px;
transition: .3s;
margin-bottom: 10px;
cursor: pointer;
box-shadow:0 0 10px rgb(255, 235, 167);
}
.bottom>div button:hover{
}
.signIn {
transform: translateZ(70px);
/* 在这里我们将卡片里面内容和卡片有一个距离，这样子会更有立体感 */
}
.signUp {
position: absolute;
top: 0;
transform: translateZ(-70px) rotateY(180deg);
/* 我们给反面加上距离的时候，前往不要忘记给反面的内容也翻转一下，否则就会出现这种卡片转过来了，里面的内容也反了 */
}
/* 标题字体 */
.no{
margin-left: 100px;
margin-top:-50px;
color: white;
font-size: 35px;
font-family:"bodoni mt";
}
.go{
margin-left: 120px;
margin-top: 50px;
}
</style>
<body>
<div class="shell">
<div class="top">
<span class="off">SIGN IN</span>
<div class="button">
<div class="ball"></div>
</div>
<span class="on">SIGN UP</span>
</div>
<br>
<br>
<br>
<br>
<div class="bottom">
<div class="signIn">
<form id="myF">
<!-- <h1>Sign in</h1> -->
<h2 class="no">Sign in</h2>
<br>
<br>
<input type="text" placeholder="Username" id="usen1" >
<br>
<br>
<br>
<input type="password" placeholder="Password" id="usep1" >
<br>
<br>
<br>
<button onclick="login_1()" class="go">GO</button>
</form>
</div>
<div class="signUp">
<form id="myF_2">
<h2 class="no">Sign up</h2>
<br>
<input type="text" placeholder="Username" id="usen2" >
<br>
<br>
<br>
<input type="password" placeholder="Password" id="usep2" >
<br>
<br>
<br>
<input type="password" placeholder="Confirm password" id="usep3" >
<br>
<br>
<br>
<button class="go">GO</button>
</div>
</form>
</div>
</div>
<script>
// 登录验证焦点事件
// 用户框失去焦点后验证value值
// function onBlur_1(){
// //拿到用户框和密码框框的值
// var valueA=document.getElementsByTagName("input")[0].value;
// var valueB=document.getElementsByTagName("input")[1].value;
// var valueC=document.getElementsByTagName("input")[2].value;
// var s="输入信息不能为空";
// if(!valueA||!valueB){//用户未输入信息
// usen1.value=s;
// usep1.value=s;
// }
// if(!valueC){//用户未输入信息
// usen2.value=s;
// usep2.value=s;
// }
// if(valueA===s||valueB===s){//清空输入框
// usen1.value="";
// usep1.value="";
// usen2.value="";
// usep2.value="";
// }
// }
//登录按钮设置表单验证
function login_1(){
var valueA=usen1.value;
var valueB=usep1.value;
var length=valueA.length
if (length > 0) {//里面有内容
//内容在正则匹配之间
var rex=/^[a-zA-Z]{3,6}$/;
var rex2=/^\w{6,10}$/;
if (rex.test(usen1.value)&&rex2.test(usep1.value)) {
usen1.value = ""
usep1.value = ""
window.open('Main.html')
return true
}
//不在区间之内
usen1.value = "信息输入有误"
usep1.value = "信息输入有误"
return false
}
//里面没有内容
usen1.value = "请先输入信息"
usep1.value = "请先输入信息"
return false
}
let button = document.querySelector('.button')
let ball = document.querySelector('.ball')
let bottom = document.querySelector('.bottom')
let off = document.querySelector('.off')
let on = document.querySelector('.on')
let index = 0
button.addEventListener('click', () => {
if (index == 0) {
index = 1
ball.style.left = 61 + '%'
on.style.opacity = 1
off.style.opacity = .5
bottom.style.transform = "rotateY(180deg)"
} else {
index = 0
ball.style.left = 0
on.style.opacity = .5
off.style.opacity = 1
bottom.style.transform = "rotateY(0deg)"
}
})
// 每当点击按钮的时候，index的值就会发生变化，如果index为0的话，那么点击的时候index变为1，反之变为0
// 当index的值为0时，按钮里的球划到右边，并且将右边字的透明度变为1，下面的登录卡旋转180度，为注册
// 当index的值为1时，按钮里的球划到左边，并且将右边字的透明度变为0.5，下面的登录卡旋转回0度，为登录
</script>
</body>
</html>二、商城界面
1.商品促销界面
效果图：
详情解析:
给商品促销界面增加按钮，让按钮变至透明，给按钮添加点击事件（onclick）从而达到商城界面与购物车界面的切换（界面覆盖）从而实现不需要数据库的商品加减操作，一个简单的购物车项目就这样完成了
代码详情：
商城及购物车界面代码详情：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<style type="text/css">
#d{
width: 100%;
height: 3500px;
background-image: url(image/019ac85c3d42d4a80121fbb0e81825.jpg@1280w_1l_2o_100sh.jpg);
background-size: cover;
}
.buy{
background-color: #808080;
margin-top: 0px;
margin-left: 1130px;
width: 280px;
height: 100px;
border: none;
background: transparent;
}
.btn1{
background-color: #CCCBCB;
margin-top: 1460px;
margin-left: 1052px;
width: 340px;
height: 100px;
border-radius: 20px;
border: none;
background: transparent;
}
.btn2{
background-color: #CCCBCB;
margin-top:0px;
margin-left: 27px;
width: 340px;
height: 200px;
border-radius: 20px;
background: transparent;
border: none;
}
.btn3{
background-color: #CCCBCB;
margin-top: 400px;
margin-left: 327px;
width: 340px;
height: 200px;
border-radius: 20px;
background: transparent;
border: none;
}
.btn4{
background-color: #CCCBCB;
margin-top: -200px;
margin-left: 500px;
width: 120px;
height: 200px;
border-radius: 20px;
background: transparent;
border: none;
}
.btn5{
background-color: #CCCBCB;
margin-top: 200px;
margin-left: 240px;
width: 120px;
height: 200px;
border-radius: 20px;
background: transparent;
border: none;
}
.btn6{
background-color: #CCCBCB;
margin-top: 200px;
margin-left: 250px;
width: 120px;
height: 200px;
border-radius: 20px;
background: transparent;
border: none;
}
.btn7{
background-color: #CCCBCB;
margin-top: 0px;
margin-left: 290px;
width: 320px;
height: 200px;
border-radius: 20px;
background: transparent;
border: none;
}
.btn8{
background-color: #CCCBCB;
margin-top: 50px;
margin-left: 250px;
width: 120px;
height: 150px;
border-radius: 20px;
background: transparent;
border: none;
}
.btn9{
background-color: #CCCBCB;
margin-top: 50px;
margin-left: 250px;
width: 120px;
height: 150px;
border-radius: 20px;
background: transparent;
border: none;
}
#d2{
display: none;
width: 100%;
height: 1800px;
background-size: cover;
background-image: url(image/微信图片编辑_20220312010931.jpg);
}
table{
width: 100%;
height: 300px;
font-size: 30px;
/* border: 1px solid #747474; */
margin-left: 45 0px;
}
#p1{
background-image: url(image/1.png);
width: 400px;
height: 300px;
}
.btn{
padding: 10px;
border-radius: 20px;
}
.btna{
padding: 10px;
border-radius: 20px;
}
.btns{
padding: 10px;
}
.tr1{
background-color: #F0E68C;
}
input{
width: 100px;
height: 30px;
}
</style>
</head>
<body >
<div id="d">
<button type="button"class="buy" onclick="buy(this)"></button>
<button type="button" class="btn1" onclick="addRow(this)"></button>
<button type="button" class="btn2" ></button>
<button type="button" class="btn3" onclick="addRow2(this)"></button>
<!-- <button type="button" class="btn4" >333</button>
<button type="button" class="btn5">444</button>
<button type="button" class="btn6" >555</button>
<button type="button" class="btn7">666</button>
<button type="button" class="btn8">777</button>
<button type="button" class="btn9" >888</button> -->
</div>
<div id="d2">
<table border="" id="table">
<tr class="tr1">
<td>全选<input type="checkbox" onclick="selectAll(this.checked)"></td>
<td>商品图片</td>
<td>商品的价格</td>
<td>商品数量</td>
<td>该商品的总价</td>
<td>该商品的操作</td>
</tr>
<tr>
<td><input type="checkbox" class="ck"></td>
<td><img src="image/0.jpg" width="400px" height="300px"></td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">930</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
<td class="sum">0</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)" class="btna">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)"class="btna">-</button>
<button onclick="delRow(this.parentElement.parentElement)"class="btn">删除</button>
</td>
</tr>
<tr >
<td><input type="checkbox" class="ck"></td>
<td><img src="image/2.jpg" width="400px" height="300px"></td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">888</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
<td class="sum">0</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)" class="btna">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)"class="btna">-</button>
<button onclick="delRow(this.parentElement.parentElement)"class="btn">删除</button>
</td>
</tr>
</table>
<br>
<button onclick="delCKRow()" class="btns">删除所选的商品</button>
<button type="button" onclick="delCKRow2()" class="btns">购买商品</button>
<h1>总价: $<font color="green" id="allPrice">0.0</font></h1>
<button type="button" class="btns" onclick="buy2(this)">主页</button>
</table>
</div>
<script type="text/javascript">
function buy(btn){//显示购物车
d.style.display="none";
d2.style.display="block"
}
function buy2(btn){//显示主页
d.style.display="block";
d2.style.display="none";
}
//计算当前所有商品的总价
function calcAll() {
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
var sum=0;
for(let i=1;i<rs.length;i++){
//rs[i]就是除了第一行之外的其他的行
var s1=rs[i].getElementsByClassName("sum")[0].textContent
console.log(s1)
sum+=parseFloat(s1)
}
//给页面赋值,只要小书店后两位
allPrice.textContent=sum.toFixed(2)
}
//删除选中的行
function delCKRow() {
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
//将集合collection变成数组array
rs=Array.from(rs)
for(let i=1;i<rs.length;i++){
//拿到行中对应的多选框
var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
//判断多选框是否被选中
if(ck.checked){
//删除该行
rs[i].outerHTML=""
}
}
calcAll()
}
//购买后删除选中的行
function delCKRow2() {
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
//将集合collection变成数组array
rs=Array.from(rs)
for(let i=1;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 in is){
is[i].checked=status
}
}
//按钮点击删除该行
function delRow(tr) {
tr.outerHTML=""
calcAll()
}
//页面数值变化重新计算价格
function calcRow(rex,tr) {
//rex是运算符号
//tr是当前对应的行
var td=tr.getElementsByClassName("count")[0]
console.log(td)
if(rex==="+"){
td.textContent=td.textContent*1+1
}
if(rex==="-"){
td.textContent-=1
}
calc(tr)
}
//写一个函数：算出当前一行中的价格并完成赋值
function calc(tr) {
//value只有在input或者select
//其他的内容全部使用textContent,innerHTML
var price=tr.getElementsByClassName("price")[0].textContent
var count=tr.getElementsByClassName("count")[0].textContent
if(isNaN(price*1)){
tr.getElementsByClassName("price")[0].textContent=0
price=0
}
if(isNaN(count*1)){
tr.getElementsByClassName("count")[0].textContent=0
count=0
}
//使用单价*数量算出总价 并赋值给对应元素
tr.getElementsByClassName("sum")[0].textContent=(price*count).toFixed(2)
calcAll()
}
function addRow() {
table.innerHTML+=`<tr>
<td><input type="checkbox" class="ck"></td>
<td><img src="./Image/1.png" width="400px" height="300px"></td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">1300</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
<td class="sum">1300</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)" class="btna">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)"class="btna">-</button>
<button onclick="delRow(this.parentElement.parentElement)"class="btn">删除</button>
</td>
</tr>`
calcAll()
}
function addRow2() {
table.innerHTML+=`<tr>
<td><input type="checkbox" class="ck"></td>
<td><img src="./Image/2.png" width="400px" height="300px"></td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">690</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
<td class="sum">690</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)" class="btna">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)"class="btna">-</button>
<button onclick="delRow(this.parentElement.parentElement)"class="btn">删除</button>
</td>
</tr>`
calcAll()
}
//窗口的加载事件 会在整个页面加载完成之后执行
window.onload=()=>{
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
for(let i=1;i<rs.length;i++){
calc(rs[i])
}
calcAll()
}
</script>
</body>
</html>操作指南：
1.登录注册界面：
1.点击上方黄色按钮实现登录注册界面的翻转切换
2.姓名需要纯英文，长度必须要在3-6之间
3.密码长度需要在6-10之间，若不符合正则约束，则会提示信息输入有误
2.商城界面
1.点击按钮 GO 且登陆成功过后会进入到商城界面，可以点击“立即购买”按钮购买商品 ，可以将商品添加至购物车
2.点击收藏店铺的按钮可以进入购物车界面，查看购物车中的商品
3.购物车界面
1.点击购物车进入后会有两件原始商品，点击全选可以进行商品的全选操作，以便于清空购物车或者同时购买多种商品。
2.点击 + 或者 - 按钮可以对商品数量进行操作，在数量变化时，总价会根据数量进行实时变化
3.点击删除按钮可以进行单项商品的删除，删除后下方的总价也会进行更新
5.主页按钮：点击可以返回商城界面添加商品
总结
关于这个购物车的小项目就分享到此了，大家还有感兴趣的JS小知识可以在评论区留言关注哦，大家快来一起动手，看看关于JS，你到底了解多少呢？
想要了解更多有趣的代码技巧，关注博主，精彩下期继续。