JavaScript购物车项目
一、登录界面制作过程：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
height: 100%;
margin: 0px;
}
body{
background: url(wallhaven-436216.jpg) center/cover;
}
form{
background: rgba(255,255,255,.1);
position: absolute;
padding: 0px 20px;
left: 50%;
top: 50%;
/* 在自己的基础上往右边和下面走-50% */
transform: translate(-50%,-50%);
border-radius: 10px;
box-shadow: 6px 6px 10px black;
}
input{
border: 1px solid gray;
border-radius: 20px;
height: 40px;
width: 200px;
font-size: 25px;
}
button{
width: 80px;
height: 40px;
border: 1px solid black;
border-radius: 20px;
margin: 0px 20px;
}
input:focus{
box-shadow: 9px 5px 15px #FFC0CB;
}
body{
/* background-image: url(img/21.jpg); */
background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
}
.tit{
color: ;
text-align: center;
}
#asd{
background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
}
#aaa{
background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
}
</style>
</head>
<body>
<form action="">
<h3 class="tit">
登录
</h3>
<p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
<p style="text-align: center;">
<button id="asd" onclick="oo()">登录</button>
<button id="aaa" onclick="on()">注册</button>
<!-- <a href="http://127.0.0.1:8848/Javaxm/index04.html">点我进注册</a> -->
</p>
</form>
<script>
//用来检查名字是否合规
function checkLabel(obj,rex,tip) {
var length = obj.value.length
var label = obj.parentElement.getElementsByClassName("error")[0]
if (length > 0) {//里面有内容
//内容在正则匹配之间
if (rex.test(obj.value)) {
label.textContent = ""
// location.href="index04.html"
return true
window.location.href="http://127.0.0.1:8848/Javaxm/index04.html";
}
//不在区间之内
label.textContent = tip
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
// myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
// var f1 = checkLabel(userName)
// var f2 = checkLabel(userEmail)
// var f3 = checkLabel(userPwd)
// return f1 && f2 && f3
// }
function on(){
window.open('http://127.0.0.1:8848/Javaxm/index04.html')
}
function oo(){
alert("登录成功")
window.open('http://127.0.0.1:8848/Javaxm/index06.html')
}
</script>
</body>
</html>
执行结果：
二、注册界面制作过程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
/*body有margin*/
margin: 0px;
padding: 0px;
}
body,
html {
width: 100%;
height: 100%;
background-image: url(wallhaven-436216.jpg);
background-size: cover;
}
.contain {
background: #A6C1EE;
position: absolute;
top: 50%;
left: 50%;
/*
transform 变换
translate 平移
*/
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
}
p {
font-size: 20px;
color: white;
}
input {
display: block;
width: 100%;
height: 35px;
border: none;
margin: 10px 0px;
font-size: 20px;
}
button {
width: 150px;
padding: 10px 0px;
display: block;
margin: auto;
}
.css{
color: #FFFFFF;
text-align: center;
}
body{
/* background-image: url(img/21.jpg); */
background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
}
#aca{
background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
}
</style>
</head>
<body>
<div class="contain">
<h3 class="css">
注册
</h3>
<p>名字：<input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
<p>密码：<input type="password" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
<button id="aca" onclick="oo()">注册</button>
</div>
<script type="text/javascript">
function oo(){
alert("注册成功")
window.open('http://127.0.0.1:8848/Javaxm/index02.html?')
}
//用来检查名字是否合规
function checkLabel(obj,rex,tip) {
var length = obj.value.length
var label = obj.parentElement.getElementsByClassName("error")[0]
if (length > 0) {//里面有内容
//内容在正则匹配之间
if (rex.test(obj.value)) {
label.textContent = ""
// location.href="index04.html"
return true
window.location.href="http://127.0.0.1:8848/Javaxm/index04.html";
}
//不在区间之内
label.textContent = tip
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
// //添加提交事件(会具备返回值)
// myForm.onsubmit = () => {
// //阻止表单的提交 需要返回 false
// // return checkName()&&checkPwd()&&checkEmail()
// var f1 = checkLabel(userName)
// var f2 = checkLabel(userEmail)
// var f3 = checkLabel(userPwd)
// return f1 && f2 && f3
// }
</script>
</body>
</html>
执行结果：
三、购物车制作过程：
<!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;
}
#out {
text-align: right;
font-size: 40px;
}
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;
}
.id {
font-size: 10px;
}
body {
/* background-image: url(img/21.jpg); */
background-image: linear-gradient(to right, #C1C1C1, #EEEEEE);
}
#aq {
background-image: linear-gradient(to right, lightblue, silver);
}
#aw {
background-image: linear-gradient(to right, lightblue, silver);
}
#ae {
background-image: linear-gradient(to right, lightblue, silver);
}
#ar {
background-image: linear-gradient(to right, lightblue, silver);
}
#at {
background-image: linear-gradient(to right, lightblue, silver);
}
</style>
</head>
<body>
<h1>商品表</h1>
<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">
<!-- onmousemove="show('img/1.jpg',event)" onmouseout="hidden()" -->
<img src="img/1.jpg" height="100px" width="100px" />
</td>
<td class="left">水果软糖</td>
<td class="sum">88.00元</td>
<td>
<input id="aq" type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td align="center">
<!-- onmousemove="show('big_2.jpg',event)" onmouseout="hidden()" -->
<img src="img/101.jpg" height="100px" width="100px" />
</td>
<td class="left">摩天轮玩具糖</td>
<td class="sum">188.00元</td>
<td align="center">
<input id="aw" type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td align="center">
<!-- onmousemove="show('big_3.jpg',event)" onmouseout="hidden()" -->
<img src="img/102.jpg" height="100px" width="100px" />
</td>
<td class="left">金稻谷75克大棉花糖</td>
<td class="sum">288.00元</td>
<td align="center">
<input id="ae" type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td align="center">
<!-- onmousemove="show('big_4.jpg',event)" onmouseout="hidden()" -->
<img src="img/103jpg.jpg" height="100px" width="100px" />
</td>
<td class="left">上好佳鲜虾片薯片</td>
<td class="sum"> 888.00元</td>
<td>
<input id="ar" type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td align="center">
<!-- onmousemove="show('big_5.jpg',event)" onmouseout="hidden()" -->
<img src="img/104jpg.jpg" height="100px" width="100px" />
</td>
<td class="left">小浣熊干脆面</td>
<td class="sum">8888.00元</td>
<td align="center">
<input id="at" type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
</td>
</tr>
</table>
<div id="photo" onmouseout="hidden()" onmousemove="shows()"><img src="images/big_1.jpg" id="big" /></div>
<!-- <div style="height:2000px;"></div> -->
<h1>购物车</h1>
<table id="a">
<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(this)">购买</button></td> -->
</tr>
</tfoot>
</table>
<div id="out">
<a href="http://127.0.0.1:8848/Javaxm/js/index07.html" onclick="oo()">退出</a>
</div>
<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 =
`
${name}
${price}
${price}
// //拿到行中对应的多选框
// var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
// //判断多选框是否被选中
// if(ck.checked){
// //删除该行
// rs[i].outerHTML=""
// }
// }
// calcAll()
// }
function oo(){
alert("退出成功")
window.open('http://127.0.0.1:8848/Javaxm/index07.html')
}
</script>
</body>
</html>
执行结果：
四、退出功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
text-align: center;
font-size: 200px;
}
h2{
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<h1 >欢迎下次光临</h1>
<h2>Thanks for using</h1>
</body>
</html>
点右下角的那个退出
然后跳到另一个界面：
我的项目到此结束。