一、登录注册介绍

界面代码展示

<style>html,body{height: 100%;margin: 0px;}body{background: url(img/1.jpeg) center/cover;}form{background: rgba(255,255,255,.3);/* position: absolute; *//* 间距 */padding: 20px 40px;/* left: 50%;top: 35%; */border-radius: 10px;box-shadow: 6px 6px 10px black;}#login{position: absolute;left: 50%;top: 35%;}#register{position: absolute;right: 50%;top: 30%;}input{border: 1px solid gainsboro;border-radius: 20px;height: 40px;width: 300px;font-size: large;margin: 10px 0px;}button{width: 100px;height: 50px;border: 1px solid gainsboro;border-radius: 30px;margin: 10px 30px;}
</style><!-- 登录界面 ------------------------------------------------------------------>
<div id="login"><form action="" id="myLogin"><h1>欢迎来到登录界面</h1><p><font size="5" color="black">账号：</font><input type="text" id="userName1" placeholder="请输入账号" onfocus="value=''"/></p><p><font size="5" color="black">密码：</font><input type="text" id="userPwd1" placeholder="请输入密码" onfocus="value=''"/></p><p style="text-align: center;"><button type="button" onclick="fun01(1)">登录</button><button type="button" onclick="fun01(2)">注册</button></p></form>
</div><!-- 注册界面 ------------------------------------------------------------------>
<div id="register" style="display: none;"><form action="" id="myRegister"><h1>欢迎来到注册界面</h1><p><font size="5" color="black">账号：</font><input type="text" id="userName" onfocus="value=''"/></p><p><font size="5" color="black">密码：</font><input type="text" id="userPwd" onfocus="value=''"/></p><p style="text-align: center;"><button onclick="fun01(3)">注册</button><button type="button" onclick="fun01(4)">返回</button></p></form>
</div>

登录跟注册是在同一个界面中，注册界面先是设置了隐藏，当点击注册时，隐藏登录的div，显示注册的div，注册成功后会跳转到登录界面

js代码展示

<script>function fun01(n){var login=document.getElementById("login")var register=document.getElementById("register")if(n==1){ //登录var f1 = checkLabel(userName1,/^\d{6,10}$/,'账号是6-10的纯数字')var f2 = checkLabel(userPwd1,/^\w{8,12}$/,'密码的长度是8-12')if(f1&&f2===true){alert("登录成功")location.href="main.html"}}else if(n==2){ //注册login.style.display="none"register.style.display="block"}else if(n==3){ //注册界面的注册按钮myRegister.onsubmit=()=>{var f1 = checkLabel(userName,/^\d{6,10}$/,'账号是6-10的纯数字')var f2 = checkLabel(userPwd,/^\w{8,12}$/,'密码的长度是8-12')if(f1&&f2===true){alert("注册成功")}return f1&&f2}}else{ //返回按钮login.style.display="block"register.style.display="none"}}function checkLabel(obj,rex,tip) {var length=obj.value.lengthif (length > 0) {//里面有内容//内容在正则匹配之间if (rex.test(obj.value)) {return true}//不在区间之内obj.value=tipreturn false}//里面没有内容obj.value = "请输入"return false}</script>

账号跟密码做了正则判断，账号是6~10的纯数字，密码的长度是8~12，可包含数字，字母，特殊字符。

注意：我这里并没有写账号与密码是否一致的判断，登录只要满足上面的正则判断即可登录成功，想要这些功能的可自行添加

界面展示

当登录成功后，会跳转我们的购物车界面。

二、购物车界面以及部分功能介绍

界面代码展示

<style>img{width:300px;height:300px;}button{border-radius: 20px;}.h3{text-align: center;}tr{margin: 20px 20px;}table{border-top: 1px solid #333;border-left: 1px solid #333;width:100%;height:50px;}td{border-right: 1px solid #333;border-bottom: 1px solid #333;text-align: center;}div{display: inline-block;margin: 0px 85px 0px 0px;}
</style><h2 class="h3">购物车</h2><br ><table id="table"><tr><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"></td><td><img src="img/4.jpg" ></td><td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">109.9</td><td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td><td class="sum">109.9</td><td><button onclick="calcRow('+',this.parentElement.parentElement)">+</button><button onclick="calcRow('-',this.parentElement.parentElement)">-</button><button class="dele">删除</button></td></tr><tr><td><input type="checkbox"></td><td><img src="img/5.jpg" ></td><td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">78.6</td><td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td><td class="sum">78.6</td><td><button onclick="calcRow('+',this.parentElement.parentElement)">+</button><button onclick="calcRow('-',this.parentElement.parentElement)">-</button><button class="dele">删除</button></td></tr><tr><td><input type="checkbox"></td><td><img src="img/8.jpg" ></td><td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">119.9</td><td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td><td class="sum">119.9</td><td><button onclick="calcRow('+',this.parentElement.parentElement)">+</button><button onclick="calcRow('-',this.parentElement.parentElement)">-</button><button class="dele">删除</button></td></tr><tr><td><input type="checkbox"></td><td><img src="img/10.jpg" ></td><td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">65.9</td><td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td><td class="sum">65.9</td><td><button onclick="calcRow('+',this.parentElement.parentElement)">+</button><button onclick="calcRow('-',this.parentElement.parentElement)">-</button><button class="dele">删除</button></td></tr></table><br><button onclick="delCKRow()">删除所选的商品</button><h1>总价: $<font color="green" id="allPrice">0.0</font></h1><hr ><h3 class="h3">猜你喜欢</h3><div id=""><img class="a" src="img/6.jpg" ><p>黑色连衣裙</p><p>￥<span class="b">95.5</span></p><button onclick="addRow(this.parentElement)">加入购物车</button></div><div id=""><img class="a" src="img/7.jpg" ><p>小众战袍穿搭红色连衣裙</p><p>￥<span class="b">139.9</span></p><button onclick="addRow(this.parentElement)">加入购物车</button></div><div id=""><img class="a" src="img/9.jpg" ><p>茶羽中 水手服学院风套装</p><p>￥<span class="b">129.9</span></p><button onclick="addRow(this.parentElement)">加入购物车</button></div><div id=""><p><img class="a" src="img/11.jpg" ></p><p>短袖T恤裙</p><p>￥<span class="b">69.9</span></p><button onclick="addRow(this.parentElement)">加入购物车</button></div>

js代码展示

<script>//计算当前所有商品的总价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].textContentsum+=parseFloat(s1)}//给页面赋值,只要小书店后两位allPrice.textContent=sum.toFixed(2)}//删除选中的行function delCKRow() {//获得页面中所有的行var rs=document.getElementsByTagName("tr")//将集合collection变成数组arrayrs=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 of is){i.checked=status}}//删除功能function del(){//找到trvar tr=this.parentElement.parentElement//根据tr拿到父元素 根据父元素删除tr.parentElement.removeChild(tr)}function load(){//拿到表格中所有的按钮var but=document.getElementsByClassName("dele")for(let i of but){//i是表格中每一个按钮i.onclick=del //给每个按钮都具备del方法}}load()//增加一行数据function addRow(btu){var t=btu.getElementsByClassName('a')[0].getAttribute("src")// console.log(t)var p=btu.getElementsByClassName('b')[0].textContent// console.log(p.textContent)//在表格中插入一行table.innerHTML+=`<tr><td><input type="checkbox"></td><td><img src="`+t+`" ></td><td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">`+p+`</td><td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td><td class="sum">`+p+`</td><td><button onclick="calcRow('+',this.parentElement.parentElement)">+</button><button onclick="calcRow('-',this.parentElement.parentElement)">-</button><button class="dele">删除</button></td></tr>`load() //给新增的按钮设置点击事件}//页面数值变化重新计算价格function calcRow(rex,tr) {//rex是运算符号//tr是当前对应的行var td=tr.getElementsByClassName("count")[0]if(rex==="+"){td.textContent=td.textContent*1+1}if(rex==="-"){td.textContent-=1}calc(tr)}//写一个函数：算出当前一行中的价格并完成赋值function calc(tr) {//value只有在input或者select//其他的内容全部使用textContent,innerHTMLvar price=tr.getElementsByClassName("price")[0].textContentvar count=tr.getElementsByClassName("count")[0].textContentif(isNaN(price*1)){tr.getElementsByClassName("price")[0].textContent=0price=0}if(isNaN(count*1)){tr.getElementsByClassName("count")[0].textContent=0count=0}//使用单价*数量算出总价 并赋值给对应元素tr.getElementsByClassName("sum")[0].textContent=(price*count).toFixed(2)calcAll()}//窗口的加载事件  会在整个页面加载完成之后执行window.onload=()=>{//获得页面中所有的行var rs=document.getElementsByTagName("tr")for(let i=1;i<rs.length;i++){calc(rs[i])}}
</script>

界面展示

分享的比较简陋，希望大家认真阅读，有更好的意见可以在评论区提哦

JavaScript网页购物车相关推荐

JavaScript 网页购物车项目
今天是JavaScript的一个汇总,最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下,大家可以看一下,然后自己也可以写一个网页购物车项目噢,然后我们的JavaScript ...
javascript网页设计期末作业购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业购物网站如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业购物网站网页实 ...
mvc模式网页购物车
本学期学习JSP和Servlet后,老师要求使用MVC模式下编写一个网页购物车,以下是一些主要代码及开发心得这个是包的截图先是注册页面,编写一个表单,表单方法调用另一个JSP页面(因为我这个页面是 ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.6节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
Javascript网页滚动方法
Javascript网页滚动方法作者:不详来源于:源码下载吧发布时间:2007-6-6 16:24:26 [ 字体:大中小 ] 我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
7款Flash和Javascript网页视频播放器
Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多--. 也许你 ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——第6章使用表格
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.1节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码常见网页设计作业题材有个 ...

JavaScript网页购物车

一、登录注册介绍

二、购物车界面以及部分功能介绍

JavaScript网页购物车相关推荐

最新文章

热门文章