css+js+ajax+html实现京东项目
2024-06-04 07:38:47
css+js+ajax+html实现京东项目
项目开始老样子先上效果图 ：
登录页面
注册页面
首页
商品详情页面
购物车页面
接下来我们开始上代码
HTML登录页面代码块
```html
<!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>Document</title><link rel="stylesheet" href="../size/font-awesome-4.7.0/css/font-awesome.css"><link rel="stylesheet" href="../css/denlu.css">
</head><body><header><div class="logo"><img src="../img/logo.png" alt=""><span>欢迎注册</span></div><div class="login"><i class="fa fa-commenting-o" aria-hidden="true"></i> <a href="">登录页面调查问卷</a></div></header><div class="tip"><p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p></div><section><div class="box"><h4>京东不会以任何理由要求您转账汇款，谨防诈骗</h4><div class="loginway"><span class="saoma">扫码登录</span><span>账户登录</span></div><form action="" id="logForm"><div class="user"><span><i class="fa fa-user" aria-hidden="true"></i></span><input type="text" placeholder="邮箱/用户名/登录手机" id="usename"></div><div class="pass"><span><i class="fa fa-lock" aria-hidden="true"></i></span><input type="password" placeholder="密码" id="pwdword"></div><div class="forget"><a href="">忘记密码</a></div><input type="button" value="登录" id="login" onclick="lo()"></form><div class="foot"><span class="qq"><i class="fa fa-qq" aria-hidden="true"></i></span><a href="">QQ</a><span>|</span><span class="wechat"><i class="fa fa-weixin" aria-hidden="true"></i> </span><a>微信</a><span class="right"><i class="fa fa-angle-right" aria-hidden="true"></i> </span><a href="../html/zhuce.html" class="li">立即注册</a></div></div></section><script src="../js/denlu.js"></script>
</body></html>
css登录页面代码块
*{margin: 0;padding: 0;
}
header span{font-size: 20px;font-weight: 700;}
header{display: flex;justify-content: space-between;padding: 0 30px;margin: 0 auto;vertical-align: middle;width: 1000px;height: 80px;line-height: 80px;
}
header div:last-child{color: red;
}
header a{text-decoration: none;color: black;
}
.tip{width: 100%;height: 40px;background-color: #FFF8F0;}
p{width: 1000px;height: 40px;margin: 0 auto;font-size: 14px;line-height: 40px;
}
section{width: 1300px;height: 600px;margin: 0 auto;background-image: url(../img/loginBg.png);background-repeat: no-repeat;background-size: cover;position: relative;
}
.box{width: 400px;height: 500px;position: absolute;background-color: white;top: 30px;right: 200px;
}
h4{background-color: blanchedalmond;font-size: 15px;text-align: center;height: 30px;line-height: 30px;
}
.loginway{height: 80px;font-size: 20px;color: red;line-height: 80px;border-bottom: 1px solid #ccc;margin-bottom: 50px;
}
.saoma{color: black;margin-left: 40px;margin-right: 150px;
}
.user,.pass,#login{width: 360px;height: 40px;margin: 0 auto;border: 1px solid #ccc;margin-top: 20px;
}
.user span,.pass span{float: left;font-size: 20px;text-align: center;height: 40px;width: 40px;line-height: 40px;border: none;background-color: #ccc;}
.user input,.pass input{float: left;height: 39px;border: none;width: 320px;
}
a{text-decoration: none;color: black;font-size: 12px;
}
.forget{width: 360px;height: 40px;line-height: 40px;margin: 0 auto;margin-top: 20px;text-align: right;
}
#login{margin-left: 20px;background-color: red;color: white;font-weight: 700;font-size: 20px;
}
.foot{position: absolute;bottom: 0;width: 400px;height: 50px;
line-height: 50px;background-color: #F4F4F4;
}
.qq,.wechat,.right{display: inline-block;text-align: center;height: 24px;width: 24px;line-height: 24px;border-radius: 50%;color: white;font-size: 12px;
}
.qq{background-color: #10A8FF;margin-left: 30px;
}
.wechat{background-color: green;
}
.right{background-color: red;font-size: 20px;margin-left: 150px;
}
.li{font-size: 16px;
}
js登录页面代码块
function cre() {if (window.XMLHttpRequest) {return new XMLHttpRequest();} else {return new ActiveXObject('Microsoft.XMLHTTP');}
}
var xhr;
function lo() {var form = document.getElementById('logForm');var usename = document.getElementById('usename').value;var password = document.getElementById('pwdword').value;if (usename !== '' && password !== '') {xhr = cre();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {var lo =JSON.parse(xhr.responseText);console.log(lo);console.log(lo.data.username,typeof lo.code);if(lo.code === 2){localStorage.setItem('user',xhr.responseText);window.location = "http://127.0.0.1:5501/html/shouye.html";}}}}xhr.open('post', 'http://192.168.0.254:3000/login');xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send("username=" + usename + "&password=" + password);}}
HTML注册页面代码块
<!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>Document</title><link rel="stylesheet" href="../css/zhuce.css">
</head>
<body><header><div class="logo"><img src="../img/logo.png" alt=""><span>欢迎注册</span></div><div class="login">已有账号<a href="../html/denlu.html"> 请登录</a></div></header><section><form id="for"><input type="text" placeholder="手机号或者邮箱" onchange="user(this)" id="acc"><span></span><br><input type="password" placeholder="8-10位数字和英文字母组成的密码" onchange="pwd(this)" id="pass"><span></span><br><input type="password" placeholder="重复密码" onchange="repeatPwd(this)" id="repass"><span></span><br><input type="button" value="提交注册" onclick="sub()"></form></section><footer><ul><li><a href="">关于我们</a></li><li>|</li><li><a href="">联系我们</a></li><li>|</li><li><a href="">人才招聘</a></li><li>|</li><li><a href="">商家入驻</a></li><li>|</li><li><a href=""></a></li><li>|</li><li><a href="">广告服务</a></li><li>|</li><li><a href="">手机京东</a></li><li>|</li><li><a href="">友情链接</a></li><li>|</li><li><a href="">销售联盟</a></li><li>|</li><li><a href="">京东社区</a></li><li>|</li><li><a href="">京东公益</a></li><li>|</li><li><a href="">English Site</a></li></ul><p>Copyright©2004-2020京东JD.com版权所有</p></footer><script src="../js/zhuce.js"></script>
</body>
</html>
css注册页面代码块
*{margin: 0;padding: 0;
}
header span{font-size: 20px;font-weight: 700;}
header{display: flex;justify-content: space-between;padding: 0 30px;margin: 0 auto;vertical-align: middle;width: 1500px;height: 80px;line-height: 80px;border-bottom: 1px solid #ccc;
}
header a{text-decoration: none;color: red;
}
section{width: 500px;margin: 0 auto;
}
section input{margin-top: 20px;width: 300px;height: 40px;
}
section input:last-child{background-color: red;width: 304px;color: white;border: none;
}
footer{width: 1000px;margin: 0 auto;margin-top: 10px;
}
ul{list-style: none;
}
li{float: left;color: #B3A6C4;margin-left: 5px;}
li a{color: #B3A6C4;text-decoration: none;
}
p{clear: both;margin-left: 250px;color: #B3A6C4;
}
js注册页面代码块
function crea() {if (window.XMLHttpRequest) {return new XMLHttpRequest();} else {return new ActiveXObject('Microsoft.XMLHTTP');}
}
var xhr;
function user(us){var reg1 = /^1[3578]\d{9}$/;var reg2 = /^\w{2,8}@[0-9a-zA-Z]{3,6}(.com)$/;if(reg1.test(us.value) || reg2.test(us.value)){us.nextElementSibling.innerHTML = '√';us.nextElementSibling.style.color = 'green';return true;}else{us.nextElementSibling.innerHTML = '请输入正确的用户'us.nextElementSibling.style.color = 'red';return false;}
}
function pwd(pas){var flagvar reg3 = /^([a-z]|\d|[A-Z]){8,10}$/;if(reg3.test(pas.value)){pas.nextElementSibling.innerHTML = '√';pas.nextElementSibling.style.color = 'green';flag = true;}else{pas.nextElementSibling.innerHTML = '请输入正确的密码'pas.nextElementSibling.style.color = 'red';flag = false;}var repass = document.getElementById('repass');if(repass.value){repeatPwd(repass);}return flag;
}
function repeatPwd(rep){var pass= document.getElementById('pass');if(rep.value == ''){rep.nextElementSibling.innerHTML = '密码不能空';rep.nextElementSibling.style.color = 'red';return false;}else if(pass.value == rep.value){rep.nextElementSibling.innerHTML = '√';rep.nextElementSibling.style.color = 'green';return true;}else{rep.nextElementSibling.innerHTML = '与上面密码不一致'rep.nextElementSibling.style.color = 'red';return false;}
}
function sub(){var form =document.getElementById('for');var userFlag = user(form.acc);var pwdFlag = pwd(form.pass);var repFlag = repeatPwd(form.repass);if(userFlag && pwdFlag && repFlag){xhr = crea();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {if(xhr.responseText ==='注册成功'){window.location = "../html/shouye.html";}else{alert('注册失败,请重新注册');}}}}xhr.open('post', 'http://192.168.0.254:3000/regsterUser');xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send("username=" + form.acc.value + "&password=" + form.pass.value);}
}
html首页代码块
<!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>Document</title><link rel="stylesheet" href="../css/shouye.css"><link rel="stylesheet" href="../size/font-awesome-4.7.0/css/font-awesome.css">
</head><body><header><div class="nav"><div class="location"><span><i class="fa fa-home" aria-hidden="true"></i></span><a href="./shouye.html">京东首页</a><span><i class="fa fa-map-marker" aria-hidden="true"></i></span><a href="">杭州</a></div><div class="infor"><ul id="userName"><li><a href="../html/denlu.html">你好，请登录</a></li><li><a href="../html/zhuce.html" class="zhuce">免费注册</a></li><li><a href="">我的订单</a></li><li><a href="../html/gouwuche.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i>我的购物车</a></li><li><a href="">客户服务</a></li></ul></div></div></header><div class="search"><img src="../img/logo.png" alt=""><div class="input"><input type="text"><button>搜索</button></div></div><section><div></div><div></div><div class="lunbo"><div class="point"><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a></div><img src="" alt="" id="picture"></div><div></div><div></div></section><div class="main"><aside><h3>商品精选<span>广告</span></h3></aside><div class="center"><div class="center2" id="cen"></div></div></div><footer><ul class="foot"><li>品类齐全，轻松购物</li><li>多仓直发，极速配送</li><li>正品行货，精致服务</li><li>天天低价，畅选无忧</li></ul></footer><script src="../js/shouye.js"></script>
</body></html>
css首页代码块
*{margin: 0;padding: 0;
}
a{text-decoration: none;color: #9F9A97;
}
li{list-style-type: none;
}
header{width: 100%;height: 40px;line-height: 40px;background-color: #CCCCCC;margin: 0 auto;
}
.nav,.search{width: 1700px;margin: 0 auto;
}
.location{float: left;
}
.infor{float: right;
}
.infor ul li{margin-left: 20px;float: left;
}
.infor ul li a:hover{color: red;
}
.zhuce{color: red;
}
/* 以上页眉 */
.search{margin-top: 40px;height: 60px;
}
.search img{float: left;
}
.search .input{float: right;
}
.search .input input,.search .input button{border: 1px solid black;height: 30px;float: left;
}
.search .input input{width: 300px;
}
.search .input button{background-color: #715A52;color: white;height: 32px;width: 50px;border: none;;
}
/* 以上搜索框 */
section{margin-top: 15px;background-color: #E5292F;height: 450px;width: 100%;display: grid;grid-template-columns: 105px 350px 1000px 350px auto;}
section div{border-right: 1px solid white;
}
#picture{width: 999px;height: 450px;border: none;
}
.lunbo{position: relative;
}
.point{border: none;width: 300px;height: 40px;bottom: 0;left: 390px;position: absolute;
}
.point a{width: 30px;height: 30px;border-radius: 50%;background-color: #999999;float: left;margin-left: 10px;opacity: 0.7;
}
/* 以上轮播图 */
.main{width: 1700px;height: 4000px;border: 1px solid #ccc;margin: 0 auto;margin-top: 20px;
}
aside{width: 300px;height: 4000px;border: 1px solid #ccc;border-top: none;border-left: none;float: left;
}
h3{padding-left: 20px;border-bottom: 1px solid #ccc;height: 40px;line-height: 40px;
}
h3 span{margin-left: 150px;font-size: 17px;color: #B5B5B5;
}
.leftBook{width: 250px;margin: 10px auto;
}
.leftPicture{width: 250px;height: 250px;
}
.leftPrice{color: red;font-size: 30px;
}
.leftIntroduce{margin-top: 10px;
}
.center{margin-top: 30px;width: 1397px;float: left;
}
.center2{width: 1300px;height: 4000px;margin: auto;display: grid;grid-template-columns: repeat(4,318px);grid-template-rows: repeat(8,470px);gap: 10px;
}
.center div{border: none;}
.center2{margin: 0 auto;
}
.center2 img{width: 280px;
}
.center3{padding-left: 15px;margin: 0 auto;border: 1px solid transparent;
}
.center2 a button{width: 180px;height: 30px;text-align: center;margin-top: 5px;color: red;font-size: 18px;font-weight: 800;background-color: white;border: 1px solid #ccc;
}
h4{color: red;font-size: 35px;margin-bottom: 10px;
}
.active{margin-top: 5px;border: none;
}
.zi{display: inline-block;width: 40px;height: 30px;line-height: 30px;padding-left: 5px;background-color: red;font-weight: 800;color: white;border: none;border-radius: 5px;
}
.fang{display: inline-block;width: 60px;height: 30px;line-height: 30px;padding-left: 5px;border: 1px solid blue;color: blue;margin-left: 2px;border-radius: 5px;font-weight: 800;
}
.miao{display: inline-block;width: 40px;height: 30px;line-height: 30px;padding-left: 5px;font-weight: 800;border: 1px solid red;color: red;margin-left: 2px;border-radius: 5px;
}
.center3:hover{transform: translateY(-10px);border: 1px solid #ccc;box-shadow: 0 0 5px 5px #ccc;
}
/* 以上是中间部分 */
footer{margin-top: 20px;width: 100%;height: 120px;background-color: #ccc;padding-top: 35px;
}
.foot{width: 1700px;height: 42px;margin: 0 auto;line-height: 42px;display: flex;justify-content: space-between;font-size: 20px;font-weight: 700;
}
.foot li{padding-left: 60px;
}
.foot li:nth-child(1){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px 0px;
}
.foot li:nth-child(2){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -42px;
}
.foot li:nth-child(3){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -85px;
}
.foot li:nth-child(4){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -128px;
}
js首页代码块
function createRequest() {if (window.XMLHttpRequest) {return new XMLHttpRequest();} else {return new ActiveXObject('Microsoft.XMLHTTP');}
}
var ip = 'http://192.168.0.254:3000/';
window.onload = function () {var list = document.getElementById('userName');var user = localStorage.getItem('user')var username = JSON.parse(user);if (username !== null) {var li = document.createElement('li');var a = document.createElement('a');a.innerHTML = 'welcome' + username.data.username;li.appendChild(a);list.appendChild(li);}var xhr = createRequest();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {var allPicture = JSON.parse(xhr.responseText);console.log(allPicture[0].img)var picture = document.getElementById('picture');var point = document.getElementsByClassName('point');var a = point[0].children;var timer;var index = 0;function backg() {for (var i = 0; i < a.length; i++) {a[i].style.backgroundColor = '#999999';}}timer = setInterval(function () {index %= allPicture.length;picture.src = ip + allPicture[index].imgbackg();a[index].style.backgroundColor = '#FFFFFF'index++;}, 1000)for (var j = 0; j < a.length; j++) {a[j].num = j;a[j].onmouseover = function () {clearInterval(timer);picture.src = ip + allPicture[this.num].imgbackg();a[this.num].style.backgroundColor = '#FFFFFF'}a[j].onmouseout = function () {timer = setInterval(function () {index %= allPicture.length;picture.src = ip + allPicture[index].imgbackg();a[index].style.backgroundColor = '#FFFFFF'index++;}, 1000);}}}}}xhr.open('get', 'http://192.168.0.254:3000/showImages')xhr.send();
}
var arrr = [];
function left() {var xhr = createRequest();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {var books1 = JSON.parse(xhr.responseText);books1.map(function (item) {var asid = document.getElementsByTagName('aside');var div = document.createElement('div');div.className = 'leftBook';var a = document.createElement('a');var h2 = document.createElement('h2');h2.className = 'leftPrice';var p = document.createElement('p');p.className = 'leftIntroduce';div.appendChild(a);div.appendChild(h2);div.appendChild(p);asid[0].appendChild(div);p.innerHTML = item.name;h2.innerHTML = '¥' + item.price;console.log(item);a.innerHTML = '<img src="' + ip + item.img + '" οnclick="go(\'' + item.skuId + '\',\'' + item.img + '\',\'' + item.name + '\',\'' + item.price + '\')">';})}}}xhr.open('get', 'http://192.168.0.254:3000/showADBooks')xhr.send();
}
left();
function center() {var xhr = createRequest();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {var book2 = JSON.parse(xhr.responseText);book2.map(function (item) {var cen = document.getElementById('cen');var div0 = document.createElement('div');var div2 = document.createElement('div');var a2 = document.createElement('a');var a3 = document.createElement('a');var h4 = document.createElement('h4');var p = document.createElement('p');var span1 = document.createElement('span');var span2 = document.createElement('span');var span3 = document.createElement('span');div0.className = 'center3';div0.appendChild(a2);div0.appendChild(h4);div0.appendChild(p);div0.appendChild(div2);div2.appendChild(span1);div2.appendChild(span2);div2.appendChild(span3);div0.appendChild(a3);div2.className = 'active';span1.className = 'zi';span2.className = 'fang';span3.className = 'miao'cen.appendChild(div0);a2.innerHTML = '<img src="' + ip + item.img + '" οnclick="information(\'' + item.skuId + '\',\'' + item.img + '\',\'' + item.name + '\',\'' + item.price + '\')">';a3.innerHTML = '<button οnclick="goCart(\'' + item.skuId + '\',\'' + item.img + '\',\'' + item.name + '\',\'' + item.price + '\')"><i class="fa fa-shopping-cart" aria-hidden="true"></i>加入购物车</button>'h4.innerHTML = '¥' + item.price;p.innerHTML = item.name;span1.innerHTML = '自营';span2.innerHTML = '放心购';span3.innerHTML = '秒杀';})}}}xhr.open('get', 'http://192.168.0.254:3000/getBooks')xhr.send();
}
center();
function go(id,img,na,pr) {var bookin = {book_id:id,book_img:img,book_name:na,book_price:pr,book_number:1};localStorage.setItem('bookIformation', JSON.stringify(bookin));console.log(bookin);window.location = "/html/xiangqin.html";
}
function information(id,img,na,pr) {var bookin = {book_id:id,book_img:img,book_name:na,book_price:pr,book_number:1};localStorage.setItem('bookIformation', JSON.stringify(bookin));console.log(bookin);window.location = "/html/xiangqin.html";
}
var allBooksArray = [];
function goCart(id,img,name,price) {var cartBook = {book__id: id,book__img: img,book__name: name,book__price: price,book__number: 1}var user = localStorage.getItem('user')var username = JSON.parse(user);if (username != null) {var allBooks_json = localStorage.getItem('allBooks');console.log(allBooks_json);if (allBooks_json != null) {allBooksArray = JSON.parse(allBooks_json);}var cartNumber = true;for (var i = 0; i < allBooksArray.length; i++) {if (allBooksArray[i].book__id === id) {allBooksArray[i].book__number++;cartNumber = false;break;}}if (cartNumber) {allBooksArray.push(cartBook);}localStorage.setItem('allBooks', JSON.stringify(allBooksArray));} else {alert('请登录后再操作');window.location = "/html/denglu.html";}
}
html商品详情页面代码块
<!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>Document</title><link rel="stylesheet" href="../css/xiangqin.css"><link rel="stylesheet" href="../字体/font-awesome-4.7.0/css/font-awesome.css">
</head><body><header><div class="nav"><div class="location"><span><i class="fa fa-home" aria-hidden="true"></i></span><a href="./shouye.html">京东首页</a><span><i class="fa fa-map-marker" aria-hidden="true"></i></span><a href="">杭州</a></div><div class="infor"><ul id="userName"><li><a href="../html/denlu.html">你好，请登录</a></li><li><a href="../html/zhuce.html" class="zhuce">免费注册</a></li><li><a href="">我的订单</a></li><li><a href="../html/gouwuche.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i>我的购物车</a></li><li><a href="">客户服务</a></li></ul></div></div></header><div class="search"><img src="../img/logo.png" alt=""><div class="input"><input type="text"><button>搜索</button></div></div><section><aside><img src="" alt="" id="tu"></aside><div class="box"><h3 id="wor"></h3><div class="active"><div class="price"><span class="jingdongjia">京东价</span><span id="price">¥36.10</span><span>[9.5折]</span><span class="ding">[定价<span class="mon" id="money1">8</span>]</span><span>(<span class="jiangjia">降价通知</span>)</span><div class="pingjia"><span class="pingjia2">累计评价</span><br><span class="mount">45万+</span></div></div><div class="information"><span class="jingdongjia">促销信息</span><span class="manjian">满减</span><span>每满100元，可减50元现金</span><span>详情>></span><br><span class="jiagou">加购价</span><span class="man">满10元另加26,90元，或满12元另加16.90元，或满15元另加9.90元 <br><span class="ji">即可在购物车换购热销商品 详情>></span></span><br><span class="sel"><span class="cir"><i class="fa fa-circle-thin" aria-hidden="true"></i></span>以上促销商品可在购物车任选其一</span></div></div><div class="zeng"><span class="zeng2">增值业务</span><span class="xun"><i class="fa fa-refresh" aria-hidden="true"></i></span><span>高价回收，极速到账</span><span class="lipin"><i class="fa fa-gift" aria-hidden="true"></i> </span><span>礼品包装</span></div><div class="send"><span>排名</span><span>自营</span><span class="tongshu">童书销量榜</span><span>第<span class="eig">8</span>位</span><br><br><span>配送至</span><span class="adre">浙江省杭州市萧山区戴村镇<i class="fa fa-angle-down" aria-hidden="true"></i></span>有货<br><br> 由<spanclass="jd">京东</span>发货并提供售后服务，23:00前下单，预计<span class="dat">明天(01月06日)</span>送达<br><br>重 量 0.1kg <br><br>服务支持 <span class="shopp"><i class="fa fa-diamond" aria-hidden="true"></i>放心购</span> 闪电退款 | 上门换新 |破损包退换<br><br> 211限时达 自提 49元免息基础运费</div><div class="gocar"><div><span class="mount" id="num"></span><span class="change"><span id="ad" onclick="add()">+</span><span id="red" onclick="reduce()">-</span></span></div><input type="button" value="加入购物车" onclick="inCart()"></div></div></section><footer><ul class="foot"><li>品类齐全，轻松购物</li><li>多仓直发，极速配送</li><li>正品行货，精致服务</li><li>天天低价，畅选无忧</li></ul></footer><!-- <script src="../js/gouwuche.js"></script> --><script src="../js/xiangqin.js"></script>
</body></html>
css商品详情页面代码块
*{margin: 0;padding: 0;
}
a{text-decoration: none;color: #9F9A97;
}
li{list-style-type: none;
}
header{width: 100%;height: 40px;line-height: 40px;background-color: #CCCCCC;margin: 0 auto;
}
.nav,.search{width: 1700px;margin: 0 auto;
}
.location{float: left;
}
.infor{float: right;
}
.infor ul li{margin-left: 20px;float: left;
}
.infor ul li a:hover{color: red;
}
.zhuce{color: red;
}
/* 以上页眉 */
.search{margin-top: 40px;height: 60px;
}
.search img{float: left;
}
.search .input{float: right;
}
.search .input input,.search .input button{border: 1px solid black;height: 30px;float: left;
}
.search .input input{width: 300px;
}
.search .input button{background-color: #715A52;color: white;height: 32px;width: 50px;border: none;;
}
section{width: 1700px;height: 1000px;margin: 0 auto;margin-top: 30px;
}
aside{float: left;width: 500px;height: 1000px;border: 1px solid #ccc;
}
aside img{width: 500px;
}
.box{float: left;width: 1100px;height: 1000px;border: 1px solid #ccc;margin-left: 95px;}
.active{width: 850px;height: 250px;background-color: #F3F3F3;font-size: 18px;
}
h3{width: 850px;height: 80px;
}
.jingdongjia{font-size: 20px;color: #BCB4AE;
}
.price{height: 60px;padding-top: 10px;padding-left: 20px;
}
#price{color: red;font-size: 25px;margin-left: 5px;
}
.ding{margin-left: 5px;color: #BCB4AE;
}
.mon{text-decoration: line-through;margin-left: 5px;
}
.jiangjia{color: blue;
}
.pingjia{float: right;
}
.pingjia2{font-size: 20px;
}
.mount{color: blue;font-weight: 600;
}
.manjian{width: 40px;text-align: center;display: inline-block;border: 2px solid red;color: red;
}
.information{padding-top: 10px;padding-left: 20px;
}
.jiagou{display: inline-block;margin-left: 83px;border: 2px solid red;margin-top: 15px;color: red;
}
.man{color: #75747E;
}
.ji{display: inline-block;margin-left: 83px;margin-top: 15px;
}
.sel{display: inline-block;margin-top: 15px;margin-left: 83px;font-size: 20px;
}
.cir{color: yellow;font-weight: 800;font-size: 20px;
}
.zeng{margin-top: 30px;margin-left: 50px;height: 50px;font-size: 20px;color: red;
}
.zeng2{color: #75747E;
}
.xun,.lipin{display: inline-block;text-align: center;width: 25px;height: 25px;border: 2px solid red;border-radius: 50%;margin-left: 10px;
}
.send{margin-left: 50px;color: #75747E;border-bottom: 1px solid #ccc;width: 800px;height: 270px;
}
.tongshu{color: blue;
}
.eig{color: red;margin: 0 10px;
}
.adre{border: 1px solid #ccc;font-size: 20px;
}
.jd{color: red;
}
.dat{color: black;font-weight: 600;
}
.shopp{color: red;font-size: 30px;font-weight: 700;
}
footer{margin-top: 20px;width: 100%;height: 120px;background-color: #ccc;padding-top: 35px;
}
.foot{width: 1700px;height: 42px;margin: 0 auto;line-height: 42px;display: flex;justify-content: space-between;font-size: 20px;font-weight: 700;
}
.foot li{padding-left: 60px;
}
.foot li:nth-child(1){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px 0px;
}
.foot li:nth-child(2){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -42px;
}
.foot li:nth-child(3){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -85px;
}
.foot li:nth-child(4){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -128px;
}
.gocar{margin-top: 20px;
}
.gocar > div,.gocar input{width: 120px;float: left;height: 50px;background-color: red;border: none;margin-left: 10px;color: white;font-size: 20px;
}
.gocar > div{width: 80px;background-color: white;
}
.mount{float: left;width: 48px;height: 48px;line-height: 48px;text-align: center;border: 1px solid #ccc;}
.change{float: left;width: 22px;height: 50px;border-left: 1px solid #ccc;text-align: center;
}
#ad{border-bottom: 1px solid black;background-color: #ccc;display: inline-block;width: 30px;cursor: pointer;
}
#red{display: inline-block;width: 30px;height: 23px;background-color: #ccc;cursor: pointer;}
js商品详情页面代码块
window.onload = function(){var list = document.getElementById('userName');var user = localStorage.getItem('user')var username = JSON.parse(user);if (username !== null) {var li = document.createElement('li');var a = document.createElement('a');a.innerHTML = 'welcome' + username.data.username;li.appendChild(a);list.appendChild(li);}
}
var bookString = localStorage.getItem('bookIformation');
var bookArr = JSON.parse(bookString);
var pic = document.getElementById('tu');
var font = document.getElementById('wor');
var money1 =document.getElementById('money1');
money1.innerHTML = bookArr.book_price;
pic.src = 'http://192.168.0.254:3000/'+ bookArr.book_img;
font.innerHTML = bookArr.book_name;
document.getElementById("num").innerHTML = 1;
function add(){document.getElementById('num').innerHTML++;
bookArr.book_number++;
localStorage.setItem('bookIformation',JSON.stringify(bookArr));
}
function reduce(){if(document.getElementById('num').innerHTML == 1){document.getElementById('num').innerHTML = 1;bookArr.book_number =1;localStorage.setItem('bookIformation',JSON.stringify(bookArr));}else{document.getElementById('num').innerHTML--;bookArr.book_number--;localStorage.setItem('bookIformation',JSON.stringify(bookArr));}
}
localStorage.setItem('bookIformation',JSON.stringify(bookArr));
var mount = document.getElementById('num');
function inCart(){}
var allBooksArray = [];
function inCart() {var bookString = localStorage.getItem('bookIformation');
var bookArr = JSON.parse(bookString);var cartBook = {book__id: bookArr.book_id,book__img:bookArr.book_img,book__name: bookArr.book_name,book__price: bookArr.book_price,book__number:bookArr.book_number}var user = localStorage.getItem('user')var username = JSON.parse(user);if (username != null) {var allBooks_json = localStorage.getItem('allBooks');console.log(allBooks_json);if (allBooks_json != null) {allBooksArray = JSON.parse(allBooks_json);}var cartNumber = true;for (var i = 0; i < allBooksArray.length; i++) {if (allBooksArray[i].book__id === bookArr.book_id) {allBooksArray[i].book__number += bookArr.book_number;cartNumber = false;break;}}if (cartNumber) {allBooksArray.push(cartBook);}localStorage.setItem('allBooks', JSON.stringify(allBooksArray));} else {alert('请登录后再操作');window.location = "http://127.0.0.1/html/denlu.html";}
}
html购物车页面代码块
<!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>Document</title><link rel="stylesheet" href="../css/gouwuche.css"><link rel="stylesheet" href="../size/font-awesome-4.7.0/css/font-awesome.css">
</head><body><header><div class="nav"><div class="location"><span><i class="fa fa-home" aria-hidden="true"></i></span><a href="./shouye.html">京东首页</a><span><i class="fa fa-map-marker" aria-hidden="true"></i></span><a href="">杭州</a></div><div class="infor"><ul id="userName"><li><a href="../html/denlu.html">你好，请登录</a></li><li><a href="../html/zhuce.html" class="zhuce">免费注册</a></li><li><a href="">我的订单</a></li><li><a href=""><i class="fa fa-shopping-cart" aria-hidden="true"></i>我的购物车</a></li><li><a href="">客户服务</a></li></ul></div></div></header><div class="search"><img src="../img/logo.png" alt=""><div class="input"><input type="text"><button>搜索</button></div></div><p>全部商品<span id="number"></span></p><div class="check"><input type="checkbox" id="allChecked" onclick="checkAll(this)"> 全选 <span>商品</span><span>单价</span><span>数量</span><span>小计</span><span>操作</span></div><div class="jd"><span class="ziying">京东自营</span></div><div class="manjian"><span>满减</span>活动商品购满¥600.00，即可享受满减 > <span>去凑单</span></div><div class="item"></div><div class="foo"><div class="leftcho">全选 删除选中商品 移到关注 清理购物车</div><div class="rightjiesuan"><div>已选择<span id="cartNumber">0</span>件商品</div><div>总价：<span id="mon"></span><br><span>促销：-¥0.00</span></div><div id="pay" class="pay" onclick="pay()">去结算</div></div></div><footer><ul class="foot"><li>品类齐全，轻松购物</li><li>多仓直发，极速配送</li><li>正品行货，精致服务</li><li>天天低价，畅选无忧</li></ul></footer><script src="../js/gouwuche.js"></script>
</body></html>
css购物车页面代码块
*{margin: 0;padding: 0;
}
a{text-decoration: none;color: #9F9A97;
}
li{list-style-type: none;
}
header{width: 100%;height: 40px;line-height: 40px;background-color: #CCCCCC;margin: 0 auto;
}
.nav,.search{width: 1700px;margin: 0 auto;
}
.location{float: left;
}
.infor{float: right;
}
.infor ul li{margin-left: 20px;float: left;
}
.infor ul li a:hover{color: red;
}
.zhuce{color: red;
}
/* 以上页眉 */
.search{margin-top: 40px;height: 60px;
}
.search img{float: left;
}
.search .input{float: right;
}
.search .input input,.search .input button{border: 1px solid black;height: 30px;float: left;
}
.search .input input{width: 300px;
}
.search .input button{background-color: #715A52;color: white;height: 32px;width: 50px;border: none;;
}
p{width: 90px;height: 50px;line-height: 50px;margin-left: 300px;font-weight: 700;font-size: 20px;border-bottom: 2px solid red;color: red;
}
.check{width: 1500px;height: 60px;line-height: 60px;background-color: #F3F3F3;margin-left: 300px;color: #687065;
}
.jd{width: 1500px;height: 60px;line-height: 60px;margin-left: 300px;border-bottom: 2px solid #ccc;
}
.ziying{background-color: red;color: white;padding: 5px;
}
.manjian{color: #ADADA1;width: 1500px;height: 60px;line-height: 60px;margin-left: 300px;
}
.manjian span:first-child{border: 1px solid red;color: red;padding: 5px;margin-left: 5px;margin-right: 10px;
}
.item{width: 1450px;margin-left: 350px;
}
.item2{width: 1450px;position: relative;border: 1px solid #ccc;height: 150px;padding-top: 20px;
}
.check span:nth-of-type(1){margin-left: 100px;
}
.check span:nth-of-type(2){margin-left: 700px;
}
.check span:nth-of-type(3){margin-left: 80px;
}
.check span:nth-of-type(4){margin-left: 180px;
}
.check span:nth-of-type(5){margin-left: 150px;
}
.pic{float: left;width: 90px;height: 130px;
}
.pic img{width: 100px;
}
.info{/* float: left; */width: 700px;height: 130px;position: relative;
}
.choose{position: absolute;bottom: 60px;left: 250px;
}
.money1,.jiajian,.allmoney,.del{margin-top: 40px;position: absolute;margin-left: 50px;
}
.pic{position: absolute;left: 100px;
}
.money1{left: 800px;
}
.jiajian{left: 900px;
}
.allmoney{left: 1000px;
}
.del{right: 40px;
}
.cuxiao{display: inline-block;color: red;border: 1px solid red;margin-top: 10px;
}
.mounts{width: 50px;height: 20px;border: 1px solid #ccc;float: left;text-align: center;
}
.jian,.jia{width: 15px;height: 20px;line-height: 15px;border: 1px solid #ccc;float: left;
}
.jian input,.jia input{width: 15px;height: 20px;border: none;
}
h5{position: absolute;left: 230px;
}
.huo{display: inline-block;margin-top: 10px;
}
.allmoney{margin-left: 160px;font-weight: 700;
}
.del{margin-left: 160px;
}
/* 以下结算 */
.foo{width: 1450px;height: 90px;border: 1px solid #ccc;margin-left: 350px;margin-top: 20px;
}
.rightjiesuan{float: right;
}
.rightjiesuan div{float: left;margin-left: 20px;
}
.leftcho{width: 400px;float: left;margin-top: 30px;color: #626A7A;
}
.select{position: absolute;left: 50px;top: 50px;
}
.pay{width: 80px;height: 90px;background-color: red;line-height: 90px;text-align: center;color: white;font-size: 20px;font-weight: 700;
}
#mon{color: red;font-size: 20px;}
#cartNumber{color: red;font-size: 20px;margin: 5px;
}
footer{margin-top: 20px;width: 100%;height: 120px;background-color: #ccc;padding-top: 35px;
}
.foot{width: 1700px;height: 42px;margin: 0 auto;line-height: 42px;display: flex;justify-content: space-between;font-size: 20px;font-weight: 700;
}
.foot li{padding-left: 60px;
}
.foot li:nth-child(1){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px 0px;
}
.foot li:nth-child(2){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -42px;
}
.foot li:nth-child(3){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -85px;
}
.foot li:nth-child(4){background-image: url(../img/ico_service.png);background-repeat: no-repeat;background-position:9px -128px;
}
js购物车页面代码块
var list = document.getElementById('userName');
var user = localStorage.getItem('user')
var username = JSON.parse(user);
if (username !== null) {var li = document.createElement('li');var a = document.createElement('a');a.innerHTML = 'welcome' + username.data.username;li.appendChild(a);list.appendChild(li);
}
var bookString = localStorage.getItem('allBooks');
var allBookss = JSON.parse(bookString);
var ip = 'http://192.168.0.254:3000/';
for (var i = 0; i < allBookss.length; i++) {var item = document.getElementsByClassName('item')[0];var div = document.createElement('div');div.className = 'item2';var div1 = document.createElement('div');div1.className = 'pic';div1.innerHTML = '<img src="' + ip + allBookss[i].book__img + '">';var div2 = document.createElement('div');div2.className = 'infor';var h5 = document.createElement('h5');h5.innerHTML = allBookss[i].book__name;var span1 = document.createElement('span');span1.className = 'choose';span1.innerHTML = '选服务';div2.appendChild(h5);div2.appendChild(span1);var div3 = document.createElement('div');div3.className = 'money1';var span2 = document.createElement('span');span2.className = 'money';span2.innerHTML = '¥' + allBookss[i].book__price + '<br>';var span3 = document.createElement('span');span3.className = 'cuxiao';span3.innerHTML = '促销<i class="fa fa-angle-down" aria-hidden="true"></i>';div3.appendChild(span2);div3.appendChild(span3);var div4 = document.createElement('div');div4.className = 'jiajian';var span4 = document.createElement('span');span4.className = 'jian';span4.innerHTML = '<input type="button" value="-" οnclick="jian(this)">'var span5 = document.createElement('span');span5.className = 'mounts';span5.innerHTML = allBookss[i].book__number;var span6 = document.createElement('span');span6.className = 'jia';span6.innerHTML = '<input type="button" value="+" οnclick="jia(this)">';var span7 = document.createElement('span');span7.innerHTML = '<br> 'var span8 = document.createElement('span');span8.innerHTML = '有货';span8.className = 'huo';div4.appendChild(span4);div4.appendChild(span5);div4.appendChild(span6);div4.appendChild(span7);div4.appendChild(span8);var div5 = document.createElement('div');div5.className = 'allmoney';div5.innerHTML = Number(allBookss[i].book__number) * Number(allBookss[i].book__price);var div6 = document.createElement('div');div6.className = 'del';div6.innerHTML = '<input type="button" οnclick="dele(this)" value="删除">';var sel = document.createElement('div');sel.className = 'select'sel.innerHTML = '<input type="checkbox" οnclick="selectBook(this)" name="chec">'item.appendChild(div);div.appendChild(sel);div.appendChild(div1)div.appendChild(div2);div.appendChild(div3);div.appendChild(div4);div.appendChild(div5);div.appendChild(div6);
}var allChecked = document.getElementById('allChecked');
var selec = document.getElementsByName('chec');
var cartNumber = document.getElementById('cartNumber');
var moneyboth = document.getElementById('mon');
var item = document.getElementsByClassName('item')[0];
function dele(ite) {for (var i = allBookss.length-1; i >=0 ; i--) {if (ite.parentNode.parentNode.children[2].children[0].innerHTML === allBookss[i].book__name) {allBookss.splice(i, 1);item.removeChild(item.children[i]);}}if(ite.parentNode.parentNode.children[0].children[0].checked){cartNumber.innerHTML = Number(cartNumber.innerHTML)-1;moneyboth.innerHTML = Number(moneyboth.innerHTML)-Number(ite.parentNode.previousElementSibling.innerHTML); }localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
function jia(btn) {for (var i = 0; i < allBookss.length; i++) {if (btn.parentNode.parentNode.parentNode.children[2].children[0].innerHTML === allBookss[i].book__name) {btn.parentNode.previousElementSibling.innerHTML = Number(allBookss[i].book__number) + 1;allBookss[i].book__number++;btn.parentNode.parentNode.nextElementSibling.innerHTML = Number(allBookss[i].book__number) * Number(allBookss[i].book__price);}}alll();localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
function jian(btn) {for (var i = 0; i < allBookss.length; i++) {if (btn.parentNode.parentNode.parentNode.children[2].children[0].innerHTML === allBookss[i].book__name) {if (allBookss[i].book__number === 1) {btn.parentNode.nextElementSibling.innerHTML = 1;allBookss[i].book__number = 1;btn.parentNode.parentNode.nextElementSibling.innerHTML = '¥' + Number(allBookss[i].book__number) * Number(allBookss[i].book__price);} else {btn.parentNode.nextElementSibling.innerHTML = Number(allBookss[i].book__number) - 1;allBookss[i].book__number--;console.log(Number(allBookss[i].book__number) - 1);btn.parentNode.parentNode.nextElementSibling.innerHTML = '¥' + Number(allBookss[i].book__number) * Number(allBookss[i].book__price);}}}alll();localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
function selectBook() {var flag = true;for (var i = 0; i < selec.length; i++) {if (!selec[i].checked) {flag = false;break;}}alll();allChecked.checked = flag;
}
function checkAll(btn) {for (var i = 0; i < selec.length; i++) {selec[i].checked = allChecked.checked;}if (btn.checked) {cartNumber.innerHTML = selec.length;var aaa = 0;for (var i = 0; i < selec.length; i++) {aaa += Number(allBookss[i].book__number) * Number(allBookss[i].book__price);}moneyboth.innerHTML = aaa;} else {cartNumber.innerHTML = 0;moneyboth.innerHTML = 0;}
}
if (selec.length == 0) {allChecked.checked = false;
}
function alll() {var a = 0;var b = 0;for (var i = 0; i < selec.length; i++) {if (selec[i].checked) {a = Number(a) + Number(allBookss[i].book__number) * Number(allBookss[i].book__price);b = Number(b)+1;}}moneyboth.innerHTML = a;cartNumber.innerHTML = b;}
function pay() {for (var i = selec.length-1; i >=0; i--) {if (selec[i].checked) {allBookss.splice(i, 1);item.removeChild(item.children[i]);cartNumber.innerHTML--}}moneyboth.innerHTML = 0;localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
sql文件：
/*
Navicat MySQL Data TransferSource Server : mysql
Source Server Version : 50096
Source Host : localhost:3306
Source Database : jdTarget Server Type : MYSQL
Target Server Version : 50096
File Encoding : 65001Date: 2021-07-15 17:25:20
*/SET FOREIGN_KEY_CHECKS=0;-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (`skuId` char(5) NOT NULL,`name` varchar(50) NOT NULL,`price` int(10) default NULL,`img` varchar(50) default NULL,PRIMARY KEY (`skuId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES ('10001', '3-6岁行为习惯养成绘本：一起来了解下我们的文化吧', '885', 'images/book11.jpg');
INSERT INTO `book` VALUES ('10002', '3-6岁行为习惯养成绘本：一起来寻宝啊少年人', '127', 'images/book15.jpg');
INSERT INTO `book` VALUES ('10003', '3-6岁行为习惯养成绘本：专注力你的宝宝具备吗？', '21', 'images/book3.jpg');
INSERT INTO `book` VALUES ('10004', '3-6岁行为习惯养成绘本：做个独立的小宝宝贝吧，加油！', '33', 'images/book2.jpg');
INSERT INTO `book` VALUES ('10005', '3-6岁行为习惯养成绘本：喜欢这本书吗？请收下吧', '55', 'images/book5.jpg');
INSERT INTO `book` VALUES ('10006', '3-6岁行为习惯养成绘本：宝宝打个招呼吧', '630', 'images/book1.jpg');
INSERT INTO `book` VALUES ('10007', '3-6岁行为习惯养成绘本：我会爱自己6', '127', 'images/book6.jpg');
INSERT INTO `book` VALUES ('10008', '3-6岁行为习惯养成绘本：我会爱自己7', '69', 'images/book7.jpg');
INSERT INTO `book` VALUES ('10009', '3-6岁行为习惯养成绘本：我会爱自己8', '87', 'images/book8.jpg');
INSERT INTO `book` VALUES ('10010', '3-6岁行为习惯养成绘本：我会爱自己9', '25', 'images/book9.jpg');
INSERT INTO `book` VALUES ('10011', '3-6岁行为习惯养成绘本：我是个快乐的宝宝', '34', 'images/book10.jpg');
INSERT INTO `book` VALUES ('10012', '3-6岁行为习惯养成绘本：让宝宝爱说话，激发语言天赋吧', '66', 'images/book4.jpg');
INSERT INTO `book` VALUES ('10013', '全套30册 儿童绘本0-3-6岁 幼儿早教书 宝宝睡前故事书 幼儿启蒙培养好习惯小熊绘本书籍 ', '27', 'images/book23.jpg');
INSERT INTO `book` VALUES ('10014', '养成好习惯：从小就做个会理财的宝贝吧', '27', 'images/book2.jpg');
INSERT INTO `book` VALUES ('11001', '东野圭吾写给孩子的推理书：为孩子量身打造的', '129', 'images/book1.jpg');
INSERT INTO `book` VALUES ('12001', '亲子情商教育系列：培养孩子强大内心（套装全6册 恐龙小Q） ', '58', 'images/book16.jpg');
INSERT INTO `book` VALUES ('13001', '你是独一无二的：一只特立独行的猫咪', '98', 'images/book13.jpg');
INSERT INTO `book` VALUES ('13002', '保持好的状态：归来时你还能做你自己吗？', '199', 'images/book14.jpg');
INSERT INTO `book` VALUES ('14001', '原声触摸发声书：听，什么声音（套装全6册）', '326', 'images/book21.jpg');
INSERT INTO `book` VALUES ('14002', '培养好习惯，做最好的自己 ', '65', 'images/book24.jpg');
INSERT INTO `book` VALUES ('14003', '小婴孩0-2岁宝宝会说话 看图说话+快乐听读+亲子讲读+语言游戏（套装共4册）', '52', 'images/book27.jpg');
INSERT INTO `book` VALUES ('14004', '小婴孩0-2岁宝宝学说话 婴幼儿早教专家推荐：呀呀学语+快乐学词+字词游戏', '38', 'images/book18.jpg');
INSERT INTO `book` VALUES ('14005', '小猪佩奇双语故事纸板书（原版引进套装共4册）双语读物，讲述家庭成员的故事，帮孩子构筑安全）', '79', 'images/book22.jpg');
INSERT INTO `book` VALUES ('14006', '童立方·猜猜我是谁系列套装：宝宝的第一本躲猫猫洞洞纸板游戏书', '109', 'images/book25.jpg');
INSERT INTO `book` VALUES ('15001', '幼儿学前专注力训练100图（套装共4册） 经典畅销书100图玩出专注力，全面提升', '81', 'images/book17.jpg');
INSERT INTO `book` VALUES ('15002', '幼儿小百科全书（套装共12册） 暖萌科学绘本。绘本式趣味情景小百科', '158', 'images/book20.jpg');
INSERT INTO `book` VALUES ('15003', '逻辑狗2-3-4岁（幼儿园小班）儿童图书男女孩宝宝 早教益智玩具 网络版一阶段 思维训练教具', '138', 'images/book28.jpg');
INSERT INTO `book` VALUES ('15004', '邦臣小红花·宝宝的第一套拼图游戏·礼盒装【 可爱动物 交通工具 海底世界 昆虫】', '58', 'images/book19.jpg');
INSERT INTO `book` VALUES ('15005', '邦臣小红花·幼儿小手工（第1辑 套装共6册）', '37', 'images/book26.jpg');
INSERT INTO `book` VALUES ('15006', '邦臣小红花·阶梯数学（3-4岁 套装共2册）', '18', 'images/book29.jpg');
INSERT INTO `book` VALUES ('16001', '理财推荐书籍：看漫画学习经济学知识', '336', 'images/book12.jpg');
INSERT INTO `book` VALUES ('16002', '神奇的鸟类：发现令人震撼的鸟类智慧 展现丰富多彩的鸟类生活 英国皇家御用插画师马特。休厄尔作品', '128', 'images/book32.jpg');-- ----------------------------
-- Table structure for car
-- ----------------------------
DROP TABLE IF EXISTS `car`;
CREATE TABLE `car` (`id` int(11) NOT NULL auto_increment,`username` varchar(50) default NULL,`price` int(10) default NULL,`img` varchar(50) default NULL,`buynumber` int(50) default NULL,`createDate` varchar(50) default NULL,`status` int(2) default NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of car
-- ------------------------------ ----------------------------
-- Table structure for showimg
-- ----------------------------
DROP TABLE IF EXISTS `showimg`;
CREATE TABLE `showimg` (`img` varchar(50) default NULL,`id` int(50) NOT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of showimg
-- ----------------------------
INSERT INTO `showimg` VALUES ('images/0.webp', '0');
INSERT INTO `showimg` VALUES ('images/1.webp', '1');
INSERT INTO `showimg` VALUES ('images/2.webp', '2');
INSERT INTO `showimg` VALUES ('images/3.webp', '3');
INSERT INTO `showimg` VALUES ('images/4.webp', '4');-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (`username` varchar(50) NOT NULL default '',`password` varchar(50) default NULL,PRIMARY KEY (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('12@qqq.com', '12345678');
INSERT INTO `user` VALUES ('13112345678', '123456789');
INSERT INTO `user` VALUES ('13113113113', '12345678');
INSERT INTO `user` VALUES ('13333333312', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333317', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333330', 'aaaaaaaa');
INSERT INTO `user` VALUES ('13333333331', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333332', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333333', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333345', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13475842885', '123456abc');
INSERT INTO `user` VALUES ('13513513513', '12345678');
INSERT INTO `user` VALUES ('13555555555', 'yzh102356');
INSERT INTO `user` VALUES ('13555555556', 'yzh1023567');
INSERT INTO `user` VALUES ('13566666666', 'qqqqqqqqq');
INSERT INTO `user` VALUES ('13666666666', '1234567a');
INSERT INTO `user` VALUES ('13738556846', '123456789');
INSERT INTO `user` VALUES ('13777777777', '1234567a');
INSERT INTO `user` VALUES ('15115115115', '12345678');
INSERT INTO `user` VALUES ('15515515515', '12345678');
INSERT INTO `user` VALUES ('15711110000', '12345678');
INSERT INTO `user` VALUES ('15711111111', '12345678');
INSERT INTO `user` VALUES ('15711112222', '12345678');
INSERT INTO `user` VALUES ('15722222222', '22222222');
INSERT INTO `user` VALUES ('15788888888', '88888888');
INSERT INTO `user` VALUES ('17370836830', '12345678');
INSERT INTO `user` VALUES ('17386246888', '123456789');
INSERT INTO `user` VALUES ('17767218902', 'aaaaaaaa');
INSERT INTO `user` VALUES ('18341123422', '12341234');
INSERT INTO `user` VALUES ('18458879724', '12341234');
INSERT INTO `user` VALUES ('18833333333', '33333333');
INSERT INTO `user` VALUES ('18888888888', 'qqqqqqqq');
INSERT INTO `user` VALUES ('asdghsth@dsfrh.com', '12345678');
INSERT INTO `user` VALUES ('asdghth@dsfrh.com', '12345678');
INSERT INTO `user` VALUES ('asdgth@dsfrh.com', '12345678');
代码块中的代码需要修改，一些小图表自己找并修改代码块中的链接！！！
css+js+ajax+html实现京东项目相关推荐
- 前端面试宝典 html css js ajax es6
面试宝典 一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...
- html js css如何关联_会html+css+js就能把前端项目发布到多个平台
在这篇文章中,小编将给大家分享如何让自己的前端代码发布到多个常用的平台. 看完这篇文章以后,你就知道了如何让你的前端代码发布到多个平台,如:安卓应用程序,小程序,iOS应用程序,Windows,Mac ...
- 前端HTML+CSS+JS+AJAX知识点
HTML+CSS 1.主流浏览器+内核: IE trident Firefox Gecko Google chrome Webkit/blink Safari Webkit Opera presto ...
- python flask ajax_Python flask+css+js+ajax 综合复习
输入框的长度校验 username: hello varinput=$('#test-input') input.on('change',function(){varvall=$(this).val( ...
- 基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城 包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图 注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
- 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS 实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 2. 代码实现 2.1 HTML和JS代码 2.2 CSS代 ...
- [前端项目学习笔记] 200行代码网站首页轮播实现（html,css,js）
目录 1.设置基本布局 2.添加轮播按钮 3.轮播代码初步实现 4.给按钮添加点击事件实现轮播 5.添加圆点轮播 6.将列表项替换为图片,并给图片加上超链接 7.最终效果 1.设置基本布局 整体布局我 ...
- html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言 就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目 很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点 本 ...
- animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
最新文章
- 获取某个view的高度或者宽度
- python基础教程（第二版）
- linux系统开机过程描述
- GPU并行计算OpenCL(2)——矩阵卷积
- 本地文件上传至docker容器
- 20201221：力扣220场周赛题解
- php xml 怎么去掉头,PHP如何删除xml某条数据
- 批量下载哨兵数据的方法探索
- nvivo12安装包下载
- Qt调用ffmpeg录制屏幕
- 互斥事件的概念和公式_相互独立事件与互斥事件的区别
- 210714 cypress
- Cocoa动画编程指南
- bzoj1754[Usaco2005 qua]Bull Math*
- 【unity 保卫星城】--- 开发笔记04（武器管理系统）
- Romax17许可证失败
- 也许这30句话会帮到你
- Android——App版本控制PHP
- SQL语句中，有了别名不能再用原名,需要使用别名
- 数据类型（int、short、long、long long、unsigned、char、float、double）