今日带来的是关于JavaScript的一个简单的界面版，但是有部分功能还存在着bug需要进一步的完善，请大家谅解，如果有解决方法也可以给我留言哦

一.登录

先看效果图吧

这就是登录界面，登录界面的所有输入都是用了正则判断，点击登录的时候会提示哪里错误，只有完全输入正确才可以进行登录。点击清除会把输入的东西全部清空。输入框也设置了特效，效果图如下

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>主界面</title><style>*{padding:0; margin:0;}body{margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;font-size:12px;line-height:30px;}.center{float:none;width: 503px;clear:both;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;}.inputs {border: 1px solid #333;width:170px;float:left;}.left{width:130px;text-align:center;padding-right:5px;}.red{color:#ff0000;padding-left:10px;font-size:12px;}html,body{height: 100%;margin: 0px;}body{background: url(zp/gwc.png) center/cover;}table{background: rgba(255,255,255,.3);/* 设置成绝对布局 */position: absolute;padding:0px 20px;/* 居中设置 */left: 50%;top: 50%;/* 在自己的基础上往右边和下边走-50% */transform: translate(-50%,-50%);border-radius: 10px;box-shadow: 6px 5px 10px #000000;}table{border: 1px solid gray;border-radius: 20px;height: 250px;width: 360px;transition: 1s;}button{width: 70px;height: 30px;border: 1px solid #000000;border-radius: 20px;margin: 0px 18px;}/* 获得焦点 */input:focus{box-shadow: 9px 5px 15px #7FFFD4;zoom: 1.05;   }h3{transform: translate(85%);}span{color: red;}</style></head><body><script>function $(ElementId){return document.getElementById(ElementId);}function check(){var user=$("user");   var userId=$("userId");  userId.innerHTML="";if(user.value==""){userId.innerHTML="用户名不能为空";return false;}if(user.value.length<4 || user.value.length>12){userId.innerHTML="用户名长度为在4—12字符";return false;}for(var i=0;i<user.value.length;i++){var char=user.value.toLowerCase().charAt(i);if((!(char>=0 && char<=9))  && (!(char>='a'&& char<='z'))&&char!='_'){userId.innerHTML="用户名必须由字母、数字和下划线组成";return false;}}var pwd=$("pwd");  var pwdId=$("pwdId");    pwdId.innerHTML="";if(pwd.value==""){pwdId.innerHTML="密码不能为空";return false;}if(pwd.value.length<6 || pwd.value.length>12){pwdId.innerHTML="密码长度为在6—12字符";return false;}var repwd=$("repwd");  var repwdId=$("repwdId");    repwdId.innerHTML="";if(pwd.value!=repwd.value){repwdId.innerHTML="两次输入的密码不一致";return false;}var mail=$("email");var emailId=$("emailId");emailId.innerHTML="";if(mail.value==""){//检测Email是否为空emailId.innerHTML="电子邮件地址不能为空";return false;}if(mail.value.indexOf("@")==-1){emailId.innerHTML="电子邮件地址格式不正确\n必须包含@";return false;}if(mail.value.indexOf(".")==-1){emailId.innerHTML="电子邮件地址格式不正确\n必须包含.";return false;}return true;}function fn2(){window.location.href="ZC.html"}function fn3(){if(check()==true){window.location.href="GoWu.html"}}</script><table width="100%" border="0" cellspacing="0" cellpadding="0"><form  method="post" name="myform" onsubmit="return check()"><tr><td><h3>欢迎来到商城登录</h3></td></tr><tr><td class="left">用户名：</td><td><input id="user" type="text"  class="inputs"/><div id="userId" class="red"></div></td></tr><tr><td class="left">密码：</td><td><input id="pwd" type="password"  class="inputs"/><div id="pwdId" class="red"></div></td></tr><tr><td class="left">确认密码：</td><td><input id="repwd" type="password"  class="inputs"/><div id="repwdId" class="red"></div></td></tr><tr><td class="left">电子邮件地址</td><td><input id="email" type="text"  class="inputs"/><div id="emailId" class="red"></div></td></tr><tr><td>&nbsp;</td><td><input type="button" onclick="fn3()" value="登录" /> <input type="button" onclick="fn2()" value="注册" /><input name="cancel" type="reset" value="清除" /></td></tr></form></table></body>
</html>

二.注册

效果图：

注册的正则验证与登录一致，出生日期我是没有设置方法的

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>注册界面</title><style>*{padding:0; margin:0;}body{margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;font-size:12px;line-height:30px;}.center{float:none;width: 503px;clear:both;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;}.inputs {border: 1px solid #333;width:170px;float:left;}.left{width:120px;text-align:center;padding-right:5px;}.red{color:#ff0000;padding-left:10px;font-size:12px;}html,body{height: 100%;margin: 0px;}body{background: url(zp/gwc.png) center/cover;}table{background: rgba(255,255,255,.3);/* 设置成绝对布局 */position: absolute;padding:0px 20px;/* 居中设置 */left: 50%;top: 50%;/* 在自己的基础上往右边和下边走-50% */transform: translate(-50%,-50%);border-radius: 10px;box-shadow: 6px 5px 10px #000000;}table{border: 1px solid gray;border-radius: 20px;height: 300px;width: 350px;transition: 1s;}button{width: 70px;height: 30px;border: 1px solid #000000;border-radius: 20px;margin: 0px 18px;}/* 获得焦点 */input:focus{box-shadow: 9px 5px 15px #7FFFD4;zoom: 1.05;  }h3{transform: translate(100%);}span{color: red;}/* .a{background-color: rgba(255 ,255,255, 0.3);} */</style></head><body><script>function $(ElementId){return document.getElementById(ElementId);}function check(){var user=$("user");  var userId=$("userId");  userId.innerHTML="";if(user.value==""){userId.innerHTML="用户名不能为空";return false;}if(user.value.length<4 || user.value.length>12){userId.innerHTML="用户名长度为在4—12字符";return false;}for(var i=0;i<user.value.length;i++){var char=user.value.toLowerCase().charAt(i);if((!(char>=0 && char<=9))  && (!(char>='a'&& char<='z'))&&char!='_'){userId.innerHTML="用户名必须由字母、数字和下划线组成";return false;}}var pwd=$("pwd");  var pwdId=$("pwdId");    pwdId.innerHTML="";if(pwd.value==""){pwdId.innerHTML="密码不能为空";return false;}if(pwd.value.length<6 || pwd.value.length>12){pwdId.innerHTML="密码长度为在6—12字符";return false;}var repwd=$("repwd");  var repwdId=$("repwdId");    repwdId.innerHTML="";if(pwd.value!=repwd.value){repwdId.innerHTML="两次输入的密码不一致";return false;}var sexId=$("sexId");sexId.innerHTML="";var j=0;var sex=document.getElementsByName("sex");    for(var i=0;i<sex.length;i++){if(sex[i].checked==true){j=1;break;}}if(j==0){sexId.innerHTML="请选择性别";return false;}var mail=$("email");var emailId=$("emailId");emailId.innerHTML="";if(mail.value==""){//检测Email是否为空emailId.innerHTML="电子邮件地址不能为空";return false;}if(mail.value.indexOf("@")==-1){emailId.innerHTML="电子邮件地址格式不正确\n必须包含@";return false;}if(mail.value.indexOf(".")==-1){emailId.innerHTML="电子邮件地址格式不正确\n必须包含.";return false;}return true;}function fn1(){alert("注册成功")}function fn3(){if(check()==true){window.location.href="ZCCG.html"}}</script><div class="center"><img src="" /></div><div class="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"><form  method="post" name="myform" onsubmit="return check()"><tr><td><h3>欢迎注册:</h3></td></tr><tr><td class="left">用户名：</td><td><input id="user" type="text"  class="inputs"/><div id="userId" class="red"></div></td></tr><tr><td class="left">密码：</td><td><input id="pwd" type="password"  class="inputs"/><div id="pwdId" class="red"></div></td><tr><td class="left">确认密码：</td><td><input id="repwd" type="password"  class="inputs"/><div id="repwdId" class="red"></div></td></tr><tr><tr><td class="left">性别：</td><td><div style="float:left;"><input name="sex" type="radio" value="男" />男 <input name="sex" type="radio" value="女" />女</div><div id="sexId" class="red"></div></td></tr><tr><td class="left">电子邮件地址</td><td><input id="email" type="text"  class="inputs"/><div id="emailId" class="red"></div></td></tr><tr><td class="left">出生日期：</td><td><select id="year"><script type="text/javascript">for(var i=1900;i<=2018;i++){document.write("<option value="+i+">"+i+"</option>"); }</script></select>年<select id="month"><script type="text/javascript">for(var i=1;i<=12;i++){document.write("<option value="+i+">"+i+"</option>");  }</script></select>月<select id="day"><script type="text/javascript">for(var i=1;i<=31;i++){document.write("<option value="+i+">"+i+"</option>");    }</script></select>日</td></tr><tr><td>&nbsp;</td><td><input type="button" onclick="fn3()" value="注册" /> <input name="cancel" type="reset" value="清除" /></td></tr></form></table></div></body>
</html>

注册之后会跳转到另一个界面，然后返回登录就可以了

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>注册成功</title><style>body(){margin: 0;text-align: center;font-size: 24px;font-weight: bold;}h2{transform: translate(15%);}</style></head><body><img src="zp/top.jpg" ><br><h2>欢迎您成为商城用户！</h2><button type="button"><a href="index - 副本.html">返回登录</a></button></body>
</html>

三.购物车

效果图：

购物车图片放大功能有bug，鼠标移入可以放大移出不能缩小，购买也没实现。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>购物车</title><style type="text/css">body {font-size: 12px;line-height: 25px;}table {border-top: solid 1px #666666;border-left: solid 1px #666666;}td {text-align: center;border-right: solid 1px #666666;border-bottom: solid 1px #666666;}.left {text-align: left;padding-left: 10px;}#photo {border: solid 1px #0066CC;width: 200px;text-align: center;z-index: 2;position: absolute;display: none;top: 50px;left: 50px;background-color: #ffffff;}#big {width: 200px;}h1 {/* transform: translate(45%); */text-align: center;}table {margin: 0 auto;width: 100%;border: 2px solid #aaa;border-collapse: collapse;}table th,table td {border: 2px solid #aaa;padding: 5px;}th {background-color: #eee;}</style></head><body><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr style="font-weight:bold; font-size:13px;"><td style="width:100px;">商品图片</td><td>商品名称</td><td style="width:100px;">商品价格</td><td>操作</td></tr><tr><td align="center"><img src="data:images/small_1.jpg" onmousemove="show('big_1.jpg',event)" onmouseout="hidden()" /></td><td class="left">闪亮双色超漂漂蝴蝶耳</td><td class="sum">28.00元</td><td><input type="button" value="加入购物车" onclick="add_shoppingcart(this)" /></td></tr><tr><td align="center"><img src="data:images/small_2.jpg" onmousemove="show('big_2.jpg',event)" onmouseout="hidden()" /></td><td class="left">皇冠 09年完美芦荟胶10支装 40g/支 接受验货 去疤痕 祛痘痕 祛斑</td><td class="sum">96.00元</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this)" /></td></tr><tr><td align="center"><img src="data:images/small_3.jpg" onmousemove="show('big_3.jpg',event)" onmouseout="hidden()" /></td><td class="left">1681/诺基亚1681c/nokia 1681c</td><td class="sum">225.00元</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this)" /></td></tr><tr><td align="center"><img src="data:images/small_4.jpg" onmousemove="show('big_4.jpg',event)" onmouseout="hidden()" /></td><td class="left">欧美vivi 简洁甜美 超人气百搭公主款短袖连衣裙</td><td class="sum"> 88.00元</td><td><input type="button" value="加入购物车" onclick="add_shoppingcart(this)" /></td></tr><tr><td align="center"><img src="data:images/small_5.jpg" onmousemove="show('big_5.jpg',event)" onmouseout="hidden()" /></td><td class="left">戴尔/DELL 1014 2.2G处理器/1G/160G/DVD刻/摄像头无线</td><td class="sum">3080.00元</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this)" /></td></tr></table><div id="photo" onmouseout="hidden()" onmousemove="shows()"><img src="data:images/big_1.jpg" id="big" /></div><!-- <div style="height:2000px;"></div> --><h1>购物车</h1><table><thead><tr><th>商品</th><th>单价（元）</th><th>数量</th><th>金额（元）</th><th>删除</th></tr></thead><tbody id="goods"></tbody><tfoot><tr><td colspan="3" align="right">总计</td><td id="total"></td><td><button onclick="tk()">购买</button></td></tr></tfoot></table><script>//第一个表格function show(image, event) {var x;var y;document.getElementById("photo").style.display = "block";x = parseInt(event.clientX) + parseInt(document.documentElement.scrollLeft);y = parseInt(event.clientY) + parseInt(document.documentElement.scrollTop);document.getElementById("photo").style.top = y + "px";document.getElementById("photo").style.left = x + "px";document.getElementById("big").src = "images/" + image;}function shows() {document.getElementById("photo").style.display = "block";}function hidden() {document.getElementById("photo").style.display = "none";}window.onscroll = "show()";//------------------------------------------------------------------------------------------------               var map = new Map(); //创建一个集合function add_shoppingcart(btn) { //btn就是上面传下来的this//console.log(btn);var ntr = document.createElement("tr");//获取到商品的价格和名称var tr = btn.parentNode.parentNode; //获取到按钮的父亲 var tds = tr.children;//获取商品的名称var name = tds[0].innerHTML;//获取商品的价格var price = tds[2].innerHTML;console.log("name:" + name + ",price:" + price);//判断集合中是否又加入商品.如果有不能加入,只能加数量,没有可加入if (map.has(name)) {//如果有不能加入,只能加数量var tr1 = map.get(name);//console.log(tr1);//var btn1=tr1.getElementById("btn1");       var btn1 = tr1.getElementsByTagName("button")[1];//console.log(btn1);jia(btn1);} else {//如果没有该商品,可以正常添加ntr.innerHTML =`<td style="text-align:center;">${name}</td><td style="text-align:center;">${price}</td><td style="text-align:center;"><button onclick="jian(this)">-</button><input type="text" value="1" size="1" /><button id="btn1" onclick="jia(this)">+</button></td><td>${price}</td><td style="text-align:center;"><button onclick="del(this)">X</buttton></td>`;//将name和一行数据存入到集合中map.set(name, ntr);//找到tbody的对象var tbody = document.getElementById("goods");//把上面创建好的一行五列加入到tbody中tbody.appendChild(ntr);sum();}}function del(btn) {var tr = btn.parentNode.parentNode;tr.remove(); //删除的是DOM文档中的内容,并没有把集合中的内容删除.var tr = btn.parentNode.parentNode; //获取到按钮的父亲var tds = tr.children;//获取商品的名称var name = tds[1].innerHTML;map.delete(name); //删除的是集合中的内容sum();}function jian(btn) {var inpt = btn.nextElementSibling;var amount = inpt.value;if (amount <= 1) {return;} else {inpt.value = --amount;var trs = btn.parentNode.parentNode;console.log(trs);var price = parseInt(trs.children[1].innerHTML);trs.children[3].innerHTML = price * amount;sum();}}function jia(btn) { //形式参数//获取+号按钮左边input控件的对象var inpt = btn.previousElementSibling;//console.log(Inpt);var amount = inpt.value;//console.log(amount);inpt.value = ++amount; //把累加后的数放进去var td = btn.parentNode.previousElementSibling;//console.log(td);var price = parseInt(td.innerHTML); //取到单价的值//console.log(price);var rtd = btn.parentNode.nextElementSibling;rtd.innerHTML = price * amount;sum();}//求所有商品的累加和function sum() {//获取到tbody的对象var tbody = document.getElementById("goods");var trs = tbody.children; //得到tbody的孩子var total = 0; //用于求累加和for (i = 0; i < trs.length; i++) { //取到每一个商品的价格var price = trs[i].children[3].innerHTML;total = total + parseInt(price);}var t = document.getElementById("total");//然后把total的值放入到t对象中t.innerHTML = total;}function tk(){alert("暂未开放，敬请期待")}</script></body>
</html>

JavaScript之购物车相关推荐

JavaScript 网页购物车项目
今天是JavaScript的一个汇总,最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下,大家可以看一下,然后自己也可以写一个网页购物车项目噢,然后我们的JavaScript ...
购物车的收货地址js php,Javascript实现购物车功能的详细代码
我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一 ...
JavaScript实现购物车计算价格功能
目的实现在html界面修改购物车的件数,购物车商品价格的小计和总计要修改. 实现思路 1.当点击进入界面,刷新的时候触发body内的οnlοad=""方法,跳转到JS代码.这样做 ...
JavaScript实现购物车加减和价格运算等功能
需求说明: 单击"半闭"按钮时,关闭当前页面购物车页面单击"移入收藏"弹出收藏提示单击"删除"弹出确认删除提示单击"结算&q ...
JavaScript 实现购物车
主要功能: (1)点击全选按钮,所有商品都会被选中或取消选中,且小计.商品总数和总价同步变化. (2)点击加号按钮或减号按钮,可以增加或减少商品的数量,且小计.商品总数和总价同步变化. (3)点击删除 ...
javascript 实现购物车页面
(2020-09-10更新:修复发现的bug,优化代码) 跟商城有关系的网站,难免会有购物车的结账界面. 我用javascript实现了增加数量/减少数量,实时计算总金额,删除该商品,选中商品/反选商 ...
JavaScript网页购物车
今天给大家讲解一个网页购物车的案例,案例比较简陋,包含登录注册购物车界面. 在做项目之前,你要在自己项目中建一个img包,用来存储你项目中所需用到的图片,如下图所示一.登录注册介绍界面代码展示 & ...
JavaScript当当购物车项目
要求点击+/-,对应的数量和金额要进行变化而且结算总额也要进行对应变化 PS:单击减号时,要进行数量判断,数量最小为1 思路 ①:创建三个函数,单击加好,单击减号,总额的变化 ②:如何获取单价和数 ...
javascript 实现购物车多项物品累计求总价案例 ,价格保留两位小数
效果图: html代码: <div class="list"><!-- <div class="item"><img src ...
使用JavaScript实现简单的购物车功能
使用JavaScript完成购物车功能可以通过加入购物车按钮实现商品的添加,并且数量的加减.购物车中的删除都会进行商品库存的改变 <!DOCTYPE html> <html> ...

JavaScript之购物车

一.登录

二.注册

三.购物车

JavaScript之购物车相关推荐

最新文章

热门文章