概括：模仿京东
功能：登录，注册，轮播图，商品详情，购物车。大部分数据都在数据库，轮播图图片地址放在josn。
注意事项：文件位置别改变，用localhost打开浏览器，数据库用我提供的语句（如果你一定要改可以咨询我）
1.搭建数据库
//存储用户注册数据库，别乱改，要不然会有很多对不上要改很多。（一定要改出错了可以问我）
create table user(
id int primary key auto_increment,
users varchar(200) not null comment '用户名',
passwords varchar(200) not null comment '密码',
tel varchar(200) not null comment '电话'
)engine=MyISAM default charset=utf8;
//商品信息数据库（这里是一开始就要有数据的自己在京东上买找几个商品最好找五个，找到价格和图片地址还有商品详情添加在数据库里面就好了）
（我的商品数据库）
create table sp(
id int primary key auto_increment,
src varchar(200) not null comment '地址',
money varchar(200) not null comment '价格',
details varchar(200) not null comment '详情'
)engine=MyISAM default charset=utf8;
//购物车存储数据库
create table shop(
id int primary key auto_increment,
bookid varchar(200) not null comment 'id',//用来存储商品id
src varchar(200) not null comment '地址',
jg varchar(200) not null comment '价格',
sl varchar(200) not null comment '数量'
)engine=MyISAM default charset=utf8;
2.项目目录
项目要在这里面，我的php安装在E盘不可以有中文E:\phpStudy\PHPTutorial\WWW
imgs里面就只有一个登录界面的背景图，其它图片是引用的连接存储到数据库里面或者josn里面
3.主页代码及其效果
轮播图为了练习一下运动函数没有用css写是在js上面让透明度减少来模拟的消失效果
点击购物车会根据你是否登录来跳转页面如果已经登录就跳转到购物车页面，没有登录跳转到登录页面登录过后跳转到购物车
登录效果
未登录效果
鼠标移入效果点击加入购物车会没有登录跳转到登录页面，已经登录就把商品加入购物车默认一个
点击查看详细跳转到商品详情页面
css代码
banner.css
#cont {
position: relative;
}
#cont>img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
#cont .opacity {
opacity: 1;
}
#cont ul {
opacity: 0;
position: absolute;
left: 30px;
bottom: 20px;
}
#cont li {
margin-left: 6px;
text-align: center;
line-height: 20px;
float: left;
width: 10px;
height: 10px;
border-radius: 10px;
background: pink;
opacity: 0.4;
}
#cont .Selected {
background: #fff;
opacity: 0.8;
box-shadow: #fff 0px 0px 5px;
}
base.css
p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "微软雅黑";
color: #666666;
list-style: none;
}
img,input{
outline-style: none;
padding: 0;
margin: 0;
border: none;
vertical-align: middle;
}
.clearfix::after{
content: "";
height: 0px;
line-height: 0px;
clear: both;
visibility: hidden;
display: block;
}
.clearfix{
*zoom:1;
}
a{
text-decoration: none;
color: #666666;
}
a:hover{
color:#e4393c;
}
/*登录的版心*/
.login_w{
width: 990px;
margin: 0 auto;
}
/*首页的版心*/
.w{
width: 1190px;
margin: 0 auto;
}
commodity.css
body{
font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
color:#666;
margin:0;
}
ul,p{
margin:0;
padding:0;
list-style:none;
}
img{
height: 60px;
width: 150px;
margin-right: 30px;
float: left;
}
a{
color:#666;
text-decoration:none;
}
a:hover{
color:#FF0700;
text-decoration:underline;
}
.LOCATION{
float: left;
width: 80px;
line-height: 30px;
position: relative;
}
.LOCATION:hover{
background-color:#CACACA;
}
.LOCATION:hover .dropdown-layer{
display: block;
}
.location{
float: left;
margin-left:15px ;
line-height: 30px;
}
.location .fas{
color: red;
}
.LOCATION .dropdown-layer{
width: 300px;
padding: 10px 10px 0 10px;
line-height: 24px;
background-color: #fff;
border: 1px solid #ddd;
position: absolute;
display: none;
top: 30px;
z-index: 1;
color: #999;
}
.LOCATION .dropdown-layer .item{
width: 60px;
float: left;
padding: 2px 0;
}
.LOCATION .dropdown-layer .item a{
float: left;
padding: 0 8px;
}
.areamini_inter{
float: left;
margin: 10px 0 10px 10px;
}
.areamini_inter_split{
width: 262px;
height: 0;
border-bottom: dotted 1px #eee;
}
.areamini_inter_desc{
margin: 9px 0;
}
.areamini_inter_list{
overflow: hidden;
}
.areamini_inter_item{
float: left;
width: 145px;
height: 26px;
padding: 0;
line-height: 26px;
}
.areamini_inter_link{
display: block;
overflow: hidden;
}
.areamini_inter_name{
float: left;
width: 120px;
}
.rt{float:right;}
.clear{clear:both;}
/**布局元素样式**/
#top,#top_main{
width:1200px;
margin:0 auto;
}
/*******1、页面顶部**********/
#top{
/*高度，行高，背景颜色，下边框*/
height:30px;
line-height:30px;
background-color:#f7f7f7;
border-bottom:1px solid #eee;
}
/*文字列表*/
#top>ul>li{
float:left;
margin-right:10px;
}
#top>ul b{
border-left:1px solid #ddd;
margin-right:10px;
}
/*会员俱乐部*/
li.vip a{
padding-right: 17px;
padding-left:17px;
}
/*大客户*/
li.dakehu a{
padding-left:15px;
padding-right:16px;
}
/*手机京东*/
li.app_jd a{
/*左右内边距，行内块，高度，行高，*/
padding-left:11px;
padding-right:12px;
}
li.service>a{
/*左右内边距模拟宽度*/
padding:0 15px;
/*高度，行高*/
display:inline-block;
height:26px;
line-height:26px;
/*左右上边框：透明*/
border:1px solid transparent;
border-bottom:none;
}
/*客户服务-弹出菜单*/
li.service{
/*相对定位：配合#service_items 做绝对定位*/
position:relative;
}
#service_items{
/*宽度，边框，背景颜色，文本水平居中，定位*/
box-sizing:border-box;
width:80px;
border:1px solid #ddd;
border-top:none;
background-color:#fff;
text-align:center;
/*绝对定位*/
position:absolute;
top:28px;
left:11px;
/*默认隐藏*/
display:none;
z-index:1 ;
}
/*当鼠标移入到li.service上时，找到其子级#service_items ,并且显示*/
li.service:hover #service_items{
display:block;
}
/*当鼠标移入到li.service上时，找到其直接子级a标记，设置样式*/
li.service:hover>a{
color: #646fb0;
background-color:#999;
}
/**********2、LOGO 和 搜索框************/
#top_main{
padding:10px 0;
height:60px;
}
/*搜索框和搜索按钮和热门搜索*/
#search_box{
/*左浮动，宽度，左右外边距，min-height*/
float:left;
width:700px;
height: 60px;
margin:0 40px;
min-height:30px;
}
#search_box div.search{
/*高度，背景颜色*/
height:30px;
background-color:#e4393c;
/*边框*/
padding:3px;
}
#search_box input{
/*宽度，高度，取消边框*/
width:600px;
height:30px;
border:none;
box-sizing:border-box;
padding-left:10px;
outline: none;
}
#search_box button{
/*宽度，高度，取消边框，背景颜色*/
width:80px;
height:28px;
border:none;
background-color:#E4393C;
/*文字：大小，颜色，加粗*/
font-size:14px;
color:#fff;
font-weight:bold;
outline: none;
}
/*热门搜索*/
#search_box div.hot_words{
/*上外边距*/
margin-top:5px;
/*宽度，高度，溢出隐藏*/
width:700px;
height:16px;
overflow:hidden;
}
#search_box div.hot_words span{
color:#999;
}
#search_box div.hot_words a{
color:#999;
padding:0 5px;
}
.hot_words i{
border-left:1px solid #ddd;
margin:0 3px;
}
/*我的购物车*/
#my_jd{
/*左浮动，边框，背景*/
float:left;
width: 90px;
border:1px solid #EFEFEF;
background-color:#f7f7f7;
color: #f30213;
/*高度，左内边距，背景图像*/ /*20*17*/
padding-left:20px;
height:36px;
line-height:36px;
}
#my_jd .fas{
font-size: 16px;
position: relative;
top: 1.5px;
}
#my_jd:hover{
background-color:#fff
}
#nav{
width: 1200px;
clear: left;
padding-top: 15px;
margin: 0 auto;
margin-bottom: 5px;
}
.nav-1,.nav-2,.nav-3,.nav-4,.nav-5{
width: 1200px;
font:12px;
margin: 0 auto;
border-bottom:0.5px solid #CACACA;
}
.nav-1{
height: 65px;
border-top:0.5px solid #CACACA;
}
.nav-2,.nav-3,.nav-4,.nav-5{
height: 33.78px;
}
.nav-1 .brand{
width:110px;
height: 65px;
padding: 0 0 0 10px;
float: left;
background-color: #DEDEDE;
}
.nav-1 .brand b{
position: relative;
top: 8px;
}
.nav-1 .brands{
float: left;
height: 65px;
width:950px;
padding: 0 120px 0 10px;
}
.nav-1 .brands li{
float: left;
width: 130px;
height: 32.5px;
line-height:32.5px;
overflow: hidden;
}
.nav-2 .category,.nav-3 .press,.nav-4 .chengse,.nav-5 .superior {
width:110px;
height: 33.78px;
padding: 0 0 0 10px;
float: left;
background-color: #DEDEDE;
}
.nav-2 .category b,.nav-3 .press b,.nav-4 .chengse b,.nav-5 .superior b{
position: relative;
top: 8px;
}
.nav-2 .categories,.nav-3 .presses,.nav-4 .CHENGSE,.nav-5 .SUPERIOR{
float: left;
height: 33.78px;
width:950px;
padding: 0 120px 0 10px;
}
.nav-2 .categories li,.nav-3 .presses li,.nav-4 .CHENGSE li
{
float: left;
width: 130px;
height: 33.78px;
line-height:33.78px;
overflow: hidden;
}
.nav-5 .SUPERIOR li{
float: left;
width:100px;
height: 33.78px;
line-height:33.78px;
overflow: hidden;
}
.line-top{
height: 25px;
padding: 6px 0px;
border-bottom: 1px solid #E7E3E7;
background: #DEDEDE;
margin: 10px auto;
padding-left: 10px;
width: 1200px;
}
.line-top a{
display: inline-block;
padding: 0 12px;
height: 23px;
border: 1px solid #CCC;
line-height: 23px;
margin-right: 10px;
background: #FFF;
color: #333;
}
.line-top a.em{
border-color: #e4393c;
background: #e4393c;
color: #FFF;
}
.line-top .fa1,
.line-top .fa2,
.line-top .fa3,
.line-top .fa4{
margin:6px 0 0 ;
}
.price-set{
display: inline-block;
}
.price-set .input-price{
width: 52px;
height: 17px;
border: 1px solid #CCC;
padding: 3px;
outline:none;
}
.line-top .result-sum{
float: right;
height: 25px;
line-height: 25px;
margin-right: 10px;
color: #999;
}
.line-top .result-sum .num{
color: #666;
font-family: verdana;
}
.line-top .pager{
float: right;
}
.line-top .pager .fp-text{
line-height: 23px;
margin-right: 10px;
font-family: verdana;
float: left;
}
.line-top .pager .fp-prev,.line-top .pager .fp-next{
width: 46px;
height: 23px;
border: 1px solid #DDD;
line-height: 23px;
text-align: center;
padding: 0;
}
.line-top .pager .fp-prev{
background: #F1F1F1;
color: #CCC;
}
.goodlist{
width:1200px;
margin: 10px auto;
}
.goodlist .gl-item{
position: relative;
float: left;
width: 220px;
height: 360px;
background: #fff;
padding: 38px 9px 10px;
}
.jsBlock{
display: block;
}
.jsNone{
display: none;
}
.join{
width: 80%;
z-index: 1;
position: absolute;
top: 140px;
left: 20px;
line-height: 50px;
height: 50px;
border-radius: 30px;
font-size: 20px;
font-weight: 900;
color: #fff;
background: #e01222;
opacity: 0.7;
text-align: center;
border:1px solid #ccc;
}
.see{
width: 80%;
z-index: 1;
position: absolute;
top: 200px;
left: 20px;
line-height: 50px;
height: 50px;
border-radius: 30px;
font-size: 20px;
font-weight: 900;
color: #fff;
background: #e01222;
opacity: 0.7;
text-align: center;
border:1px solid #ccc;
}
.goodlist .gl-item .p-img img{
width: 220px;
height:220px;
}
.goodlist .gl-item .p-price{
position: relative;
top: 10px;
line-height: 22px;
height: 22px;
overflow: hidden;
width: 100%;
margin: 8px 0;
}
.goodlist .gl-item .p-price strong{
color: #e4393c;
font-size: 20px;
}
.goodlist .gl-item .p-price strong em,.goodlist .gl-item .p-price strong i{
font-style: normal;
}
.goodlist .gl-item .p-name{
height: 38px;
margin-bottom: 8px;
overflow: hidden;
}
/**/
.goodlist .gl-item .p-name em{
font-style: normal;
height: 20px;
line-height: 20px;
overflow: hidden;
}
.goodlist .gl-item .p-name .keyword-color{
color: #e4393c;
}
.goodlist .gl-item .p-name .special-words{
font-style: normal;
color: #ffaa71;
}
.goodlist .gl-item .p-comment{
width: 100%;
height: 18px;
margin-top: -3px;
margin-bottom: 9px;
overflow: hidden;
}
.goodlist .gl-item .p-comment #com{
color: #646fb0;
font-family: verdana;
font-weight: 700;
}
.goodlist .gl-item .p-shop{
line-height: 18px;
height: 18px;
overflow: hidden;
margin-bottom:8px;
}
.goodlist .gl-item .p-shop .shopname{
display: inline-block;
height: 18px;
}
.goodlist .gl-item .p-shop #sn{
color: #999;
display: inline-block;
max-width: 122px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goodlist .gl-item .p-icons{
overflow: hidden;
height: 16px;
margin-bottom: 12px;
}
.goodlist .gl-item .p-icons .icon-1,.goodlist .gl-item .p-icons .icon-2,.goodlist .gl-item .p-icons .icon-3,.goodlist .gl-item .p-icons .icon-4
{
float: left;
padding: 0 3px;
margin-right: 3px;
font-style: normal;
font-size: 12px;font-family: "Helvetica Neue";
border-radius: 2px;
}
.goodlist .gl-item .p-icons .icon-1{
height: 16px;
line-height: 16px;
background: #e23a3a;
color: #FFF;
}
.goodlist .gl-item .p-icons .icon-2{
border:1px solid #4d88ff;
color: #4d88ff;
height: 14px;
line-height: 14px;
}
.goodlist .gl-item .p-icons .icon-3{
border:1px solid #e23a3a;
color: #e23a3a;
height: 14px;
line-height: 14px;
}
.goodlist .gl-item .p-icons .icon-4{
color: #FFF;
height: 16px;
line-height: 16px;
background: #31c19e;
}
.goodlist .gl-item .p-operate{
float: left;
height: 25px;
line-height: 25px;
border: 1px solid #DDD;
padding: 0 3px 0 2px;
background: #fff;
color: #999;
}
/*方框样式设定*/
.goodlist .gl-item .p-operate i{
position: relative;
left: 3px;
top: 3px;
display: inline-block;
height: 12px;
width: 12px;
background-color: #fff;
border: 1px solid #ccc;
margin-right: 3px;
}
footer.css
.footer{
/*margin-top: 100px;*/
background-color: #eaeaea;
}
.top_footer{
height: 100px;
border-bottom: 1px solid #ccc;
}
.top_footer ul{
display: flex;
}
.top_footer li{
flex: 1;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 18px;
font-weight: 700;
position: relative;
}
.top_footer b{
width: 36px;
height: 42px;
line-height: 42px;
display: block;
background: url("") no-repeat;
position: absolute;
top: 30px;
left: 25px;
text-indent: -2000em;
}
.top_footer .fast {
background-position: 0px -42px;
}
.top_footer .good {
background-position: 0px -85px;
}
.top_footer .save {
background-position: 0px bottom;
}
.middle_footer {
height: 220px;
border-bottom: 1px solid #ccc;
}
.middle_footer dl {
float: left;
width: 198px;
margin-top: 28px;
}
.middle_footer dt {
height: 30px;
font-size: 16px;
font-weight: 700;
}
.middle_footer dd {
height: 25px;
font-size: 13px;
}
.middle_footer .last-dl {
height: 147px;
background: url("") no-repeat;
}
.middle_footer .last-dl dt {
text-align: center;
}
.middle_footer .last-dl p {
padding: 0 5px;
line-height: 20px;
}
.middle_footer .last-dl a {
float: right;
margin-right: 10px;
margin-top: 5px;
}
.bottom_footer {
height: 300px;
padding-top: 10px;
text-align: center;
}
.bottom_footer p{
font-size: 13px;
}
.bottom_footer span {
margin: 0 10px;
}
.bottom_footer .public {
margin-top: 10px;
}
.bottom_footer .public span{
margin: 0 8px;
}
.bottom_footer img{
width: 583px;
height: 39px;
margin-top: 50px;
}
header.css
.nav{
height: 30px;
border-bottom: 1px solid #ccc;
background-color: #e3e4e5;
}
.l_nav {
line-height: 31px;
float: left;
}
.l_nav b{
position: relative;
top: 2px;
color: red;
font-size: 17px;
}
.r_nav {
float: right;
line-height: 30px;
}
.r_nav li {
float: left;
position: relative;
}
.r_nav .jdLi{
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index:1000;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.r_nav .jdLi:hover .dropdown-content {
display: block;
}
.r_nav .jdLi:hover{
background-color: #fff;
}
.r_nav li b {
position: relative;
top: 2px;
}
.r_nav .line {
width: 1px;
height: 10px;
background-color: #ccc;
margin: 10px 10px 0px 10px;
}
.r_nav .phone {
display: block;
width: 66px;
height: 66px;
border: 1px solid #ccc;
padding: 3px;
box-sizing: border-box;
position: absolute;
left: -7px;
}
.r_nav .phone img {
width: 60px;
height: 60px;
}
.r_nav .phone s {
width: 0px;
height: 0px;
display: block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid #f6f6f6;
position: absolute;
left: 25px;
top: -10px;
}
.m_nav {
height: 140px;
position: relative;
}
.m_nav .logo {
float: left;
}
.m_nav .logo a {
width: 190px;
height: 140px;
display: block;
background:url("") no-repeat -50px -12px;
text-indent: -2000em;
}
.search_box {
float: left;
border:1px solid red;
margin-left: 20px;
margin-top: 25px;
position: relative;
}
.search_box .search {
width: 498px;
height: 33px;
padding-left: 25px;
box-sizing: border-box;
float: left;
}
.search_box .btn {
width: 50px;
height: 33px;
background-color: #f10215;
float: left;
}
.search_box .search_img {
position: absolute;
right: 15px;
top: 5px;
font-size: 20px;
color: #fff;
}
.cart {
float: left;
width: 122px;
height: 31px;
border: 1px solid #ccc;
line-height: 24px;
text-align: center;
background-color: #fff;
margin-top: 25px;
margin-left: 22px;
position: relative;
}
.cart a{
padding-left: 6px;
}
.cart b {
font-size: 20px;
color: red;
position: relative;
top: 2px;
}
.cart span {
width: 14px;
height: 14px;
line-height: 14px;
background-color: red;
text-align: center;
color: #fff;
border-radius: 50%;
display: block;
position: absolute;
right: 78px;
top: 0px;
}
.hot_word ul{
float: left;
margin-left: -696px;
margin-top: 65px;
}
.hot_word li {
float: left;
margin-right: 10px;
}
.nav_item {
float: left;
margin-left: -42px;
margin-top: 54px;
}
.nav_item ul {
float: left;
}
.nav_item li {
float: left;
font-size: 15px;
font-weight: 700;
}
.nav_item a {
padding: 0 10px;
}
index.css
.main_body .banner {
height: 500px;
}
.min{
min-width: 1212px;
}
.content{
background-color: #f6f6f6;
}
.left_banner {
float: left;
width: 190px;
height: 472px;
background-color: #fff;
padding-top: 11px;
box-sizing: border-box;
margin-top: 12px;
}
.left_banner li {
height: 25px;
line-height: 25px;
padding-left: 12px;
font-size: 14px;
}
.left_banner li:hover {
background-color: rgba(0,0,0,.5);
}
.left_banner a:hover{
color: red;
}
.middle_banner {
float: left;
width: 789px;
height: 472px;
margin-top: 12px;
margin-left: 11px;
}
.right_banner {
margin-top: 12px;
float: right;
height: 472px;
width: 190px;
background-color: #fff;
}
.top_user {
height: 106px;
border-bottom: 1px solid #ccc;
padding: 20px 16px 0px 16px;
box-sizing: border-box;
}
.top_user .no_login{
width: 40px;
height: 40px;
display: block;
border-radius: 50%;
float: left;
}
.top_user .no_login img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.top_user .text {
float: left;
margin-left: 10px;
}
.top_user .text p {
margin-bottom: 5px;
}
.buttons a {
width: 70px;
height: 24px;
display: inline-block;
color: #fff;
text-align: center;
line-height: 24px;
background-color: #e01222;
margin-top: 10px;
border-radius: 10px;
}
.right_banner .title{
height: 132px;
padding: 0px 15px;
}
.marTop{
margin-top: 1020px;
}
.right_banner .title .top_title{
margin-top: 8px;
height: 26px;
line-height: 26px;
}
.right_banner .title .top_title .hot_title{
font-size: 14px;
font-weight: 700;
color: #000000;
}
.right_banner .title .title_span{
float: right;
padding-left: 5px;
font-family: "黑体";
}
.right_banner .title .top_title a{
float: right;
}
.title .content_title .public{
height: 20px;
line-height: 20px;
margin-bottom: 6px;
}
.title .content_title .public a:first-child{
display: inline-block;
height: 16px;
line-height: 16px;
width: 30px;
margin-top: 5px;
text-align: center;
background-color: rgba(0,0,0,.1);
margin-right: 7px;
color: red;
}
.right_banner .bottom_user{
margin-left: -1px;
}
.right_banner .bottom_user img{
width: 192px;
height: 226px;
}
publick.css
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
reset.css
/*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。*/
/** 清除内外边距 **/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,
/* structural elements 结构元素*/
dl,dt,dd,ul,ol,li,
/* list elements 列表元素*/
pre,
/* text formatting elements 文本格式元素*/
form,fieldset,legend,button,input,textarea,
/* form elements 表单元素*/
th, td
/* table elements 表格元素*/
{
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,button,input,select,textarea
/* for ie*/
{
font-family:微软雅黑;
font-size:12px;
background-color: white;
}
h1,h2,h3,h4,h5,h6{
font-size: 100%;
}
address,cite,dfn,em,var{
font-style: normal;
}
/* 将斜体扶正*/
code,kbd,pre,samp{
font-family: courier new, courier, monospace;
}
/* 统一等宽字体*/
small{
font-size: 12px;
}
/* 小于 12px 的中文很难阅读，让 small 正常化*/
/** 重置列表元素 **/
ul,ol{
list-style: none;
}
/** 重置文本格式元素 **/
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
/** 重置表单元素 **/
legend{
color: #000;
}
/* for ie6*/
fieldset,img{
border: 0;
}
/* img 搭车：让链接里的 img 无边框*/
button,input,select,textarea{
font-size: 100%;
}
/* 使得表单元素在 ie 下能继承字体大小*/
/* 注：optgroup 无法扶正*/
/** 重置表格元素 **/
table{
border-collapse: collapse;
border-spacing: 0;
}
/* 处理图像3px问题 */
img{
vertical-align:middle;
}
首页js
banner.js
//等html内容加载完成后执行
window.onload = function () {
class Banner {
constructor() {
this.time=''
this.time1=''
this.time2=''
this.index=0
//移入加入购物车
//移入查看详细
//调用关于li的函数
this.liEnterFn.bind(this)()
//给第一张轮播图绑定属性
this.initialization()
//监测有多少img并且添加对应的li
this.addLiFn()
// 调用移入li函数
this.enterLiFn.bind(this)()
//自动轮播
this.automatic.bind(this)()
//移入#cont
this.ulFn.bind(this)()
//移出#cont
$('#cont').addEventListener('mouseleave',this.ulOutFn.bind(this))
//给see绑定移入事件
}
//移出see事件
seeLeaveFn(e){
e.target.style.opacity='0.7'
}
//移出join事件
joinLeaveFn(e){
e.target.style.opacity='0.7'
}
//点击see事件
seeClickFn(e){
// console.log(e.target.parentNode.querySelector('.id').innerHTML);
let data=`${e.target.parentNode.querySelector('.id').innerHTML}`
localStorage.setItem('id',data)
location.href='../details/indexs.html?'+data
}
//移入see事件
seeEnterFn(e){
e.target.style.opacity='1'
//给see绑定点击事件
e.target.addEventListener('click',this.seeClickFn.bind(this))
}
//点击join事件
joinClickFn(e){
//已经登录就把id返回后台
if(localStorage.getItem('user')){
let id=`${e.target.parentNode.querySelector('.id').innerHTML}`
// console.log(data);
obtain.get('../register/lib/register.php', {
id,
nums:5
}).then(datas => {
console.log(datas);
});
//未登录就去登录
}else{
localStorage.setItem('key','2')
location.href='../login/login.html'
}
}
//移入join事件
joinEnterFn(e){
// console.log(1111);
e.target.style.opacity='1'
//给join绑定点击事件
// location.href='../index/index.html'
}
//移出li事件
liMouserLeaveFn(e){
e.target.querySelector('.join').className='join jsNone'
e.target.querySelector('.see').className='see jsNone'
}
//移入li事件
liMouserEnterFn(e){
// console.log(e.target.querySelector('.join'));
e.target.querySelector('.join').className='join jsBlock'
e.target.querySelector('.see').className='see jsBlock'
}
//便利li给每个li绑定移入移出事件
liEnterFn(){
// console.log( $$('.goodlist li'));
$$('.goodlist li').forEach(v=>{
// console.log(v);
v.addEventListener('mouseenter',this.liMouserEnterFn.bind(this))
v.addEventListener('mouseleave',this.liMouserLeaveFn.bind(this))
v.querySelector('.join').addEventListener('click',this.joinClickFn.bind(this))
v.querySelector('.see').addEventListener('click',this.seeClickFn.bind(this))
v.querySelector('.see').addEventListener('mouseover',this.seeEnterFn.bind(this))
//给join绑定移入事件
v.querySelector('.join').addEventListener('mouseover',this.joinEnterFn.bind(this))
//给see绑定移出事件
v.querySelector('.see').addEventListener('mouseleave',this.seeLeaveFn.bind(this))
//给join绑定移出事件
v.querySelector('.join').addEventListener('mouseleave',this.joinLeaveFn.bind(this))
})
}
//移出时执行
ulOutFn(e){
this.automatic.bind(this)()
$('#cont ul').style.opacity=0
}
ulFn(){
$('#cont').addEventListener('mouseenter', this. ulEnterFn.bind(this))
}
//移入#cont div
ulEnterFn(){
$('#cont ul').style.opacity=1
//结束自动轮播
clearTimeout(this.time2)
clearInterval(this.time1)
}
//自动轮播
automatic(){
this.time2=setTimeout(()=>{
this.time1=setInterval(() => {
this.index=1+this.index
$('.Selected').className = ''
$$('#cont li')[this.index].className='Selected'
this.imgFn(this.index)
},2000 );
},2000)
}
//轮播图初始化
initialization() {
$$('#cont img').forEach((v, i) => {
//给第一张图片绑定opacitys属性
i == 0 && v.classList.add('opacity');
})
}
// 监测有多少张图片创造多少个li
addLiFn() {
$$('#cont img').forEach((v, i) => {
let li = document.createElement('li')
i == 0 && li.classList.add('Selected');
$('#cont ul').appendChild(li)
})
}
//绑定鼠标移入li事件
enterLiFn() {
$$('#cont li').forEach((v, i) => {
console.log(v);
v.addEventListener('mouseenter', this.enterLi.bind(this, i))
})
}
//设置li移入事件
enterLi(i, e) {
//找到Selected属性并且删除属性并且添加给选中的li
$('.Selected').className = ''
e.target.className = 'Selected'
//对应img变化
this.imgFn.bind(this,i)()
}
imgFn(i){
clearInterval(this.time)
let a=1,
b=0
this.index=i
if(this.index==($$('#cont li').length-1)){
this.index=-1
}
this.time=setInterval(function(){
a-=0.1
b+=0.1
$('#cont .opacity').style.opacity=a
$$('#cont img')[i].style.opacity=b
if($('#cont .opacity').style.opacity<=0||$$('#cont img')[i].style.opacity>=1){
$('#cont .opacity').className=''
$$('#cont img')[i].className='opacity'
$('#cont .opacity').style.opacity=0
$$('#cont img')[i].style.opacity=1
clearInterval(this.time)
}
}.bind(this),20)
}
}
new Banner
}commoditys.js
class Com{
constructor(){
this.ulHtml=''
this.obtains.bind(this)()
this.obtains.bind(this)()
this.obtains.bind(this)()
// console.log($('.buttonsss'));
// $('.buttonsss').addEventListener('click', this.obtains.bind(this))
}
//添加商品函数
obtains(){
// console.log(1111);
let nums='3'
obtain.get('../register/lib/register.php', {
nums,
}).then(data => {
let ulHtml=''
JSON.parse(data).pData.forEach((v,i)=> {
$('.goodlist').innerHTML= this.ulHtml+=`
<li class="gl-item">
<div class="p-img"><img src="${v.src}"></div>
<div class="p-price">
<strong>
<em>¥</em>
<i class="i">${v.money}</i>
</strong>
</div>
<div class="p-name">
<a href="#none">
<e
<font class="keyword-color">java</font>从入门到精通（第五版）
</em>
<i class="special-words">${v.details}</i>
</a>
</div>
<div class="p-comment">
<strong><a href="#none" id="com">11万+</a>条评价</strong>
</div>
<div class="p-shop"><span class="shopname">
<a href="#none" id="sn" title="清华大学出版社">清华大学出版社</a>
<a href="#none" title="联系客服"><img src=""></a>
</span></div>
<div class="p-icons">
<i class="icon-1">自营</i>
<i class="icon-2">放心购</i>
<i class="icon-3">赠</i></div>
<div class="join jsNone">加入购物车</div>
<div class="see jsNone">查看详细</div>
<div class="id jsNone">${v.id}</div>
</li>
`
});
});
}
}
new Com
data.js
class Banner{
constructor(){
//吧json里面轮播图数据引入
obtain.get('./JSON/banner.json').then(data=>{
// console.log(data);
let html =''
JSON.parse(data).forEach(data=>{
html+=`<img src="${data.src}" alt="">`;
})
$('#cont').innerHTML=html+' <ul></ul>'+' <span><</span><span>></span>'
})
//调用创建li函数
// this.addLiFn.bind(this)()
}
}
new Banner
index.js
class Index{
constructor(){
this.user= localStorage.getItem('user')
this.initialization.bind(this)()
$('.signIn').addEventListener('click',this.signClickFn.bind(this))
$('.register').addEventListener('click',this.registerClickFn.bind(this))
$('.cart').addEventListener('click',this.cartClickFn.bind(this))
$('.userss').addEventListener('click',this.userssClickFn.bind(this))
}
userssClickFn(){
localStorage.setItem('user','')
location.reload()
}
cartClickFn(){
// console.log(localStorage.getItem('user'));
if(localStorage.getItem('user')){
location.href="../shop/shopping.html"
}
else{
location.href='../login/login.html'
localStorage.setItem('key','1')
}
}
initialization(){
if(this.user){
$('.signIn').style.display='none'
$('.register').style.display='none'
$('.user').style.display='inline-block'
$('.userss').style.display='inline-block'
$('.users').innerHTML=this.user
}else{
$('.signIn').style.display=''
$('.register').style.display=''
$('.user').style.display='none'
$('.userss').style.display='none'
$('.users').innerHTML=this.user
}
}
signClickFn(){
//点击注册要登录
localStorage.setItem('key','2')
location.href='../login/login.html'
}
registerClickFn(){
location.href='../register/register.html'
}
}
new Index
publick.js
//获取单个结点的方法
function $(tal){
return document.querySelector(tal)
}
//获取多个结点的方法
function $$(tal){
return document.querySelectorAll(tal)
}
轮播图数据banner.json
[
{
"id": 1,
"src": "https://img10.360buyimg.com/pop/s1180x940_jfs/t1/211593/40/2506/96793/615270e9Ef5014b2e/6f769b5e27405b84.jpg.webp"
},
{
"id": 2,
"src": "https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100007017276/FocusFullshop/CkJqZnMvdDEvNjIxNC8xMy8xMzE3MS8yNDQxNDMvNjE0MWI1NGNFMDVjMDg5N2YvOTY2OTFjYmJmYjdiZWFjZC5wbmcSCTMtdHlfMF81NDACOO6LekIZChXkuZ3niafmmbrog73lnZDkvr_lmagQAEIUChDmr4_mu6ExMDAw5YePMjAwEAFCEAoM56uL5Y2z5oqi6LStEAJCBwoD5oqiEAdYvPaHx_QC/cr/s/q.jpg"
},
{
"id": 3,
"src": "https://img30.360buyimg.com/pop/s1180x940_jfs/t1/181991/27/8369/65436/60c0633dE6e4df7a0/64fbd3d99fcdcc8c.jpg.webp"
},
{
"id": 4,
"src": "https://imgcps.jd.com/ling4/100016034372/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6ee/e06aeddf/cr/s/q.jpg"
},
{
"id": 5,
"src": "https://img12.360buyimg.com/da/s1180x940_jfs/t1/89877/35/8107/68939/5e01c031E62386e6b/aed10675ed2ce803.jpg.webp"
},
{
"id": 6,
"src": "https://imgcps.jd.com/ling4/10034549924900/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/330f5f8d/cr/s/q.jpg"
},
{
"id": 7,
"src": "https://imgcps.jd.com/ling4/100004770263/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e5/15c48afa/cr/s/q.jpg"
}
]index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description"
content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/banner.css">
<link rel="stylesheet" href="./css/commodity.css">
<!-- 获取结点的方法 -->
<script src="./js/public.js"></script>
</head>
<body>
<!--导航开始-->
<div class="nav min">
<div class="w">
<div class="l_nav">
<b class="iconfont"></b>
<a href="#none">湖南</a>
</div>
<div class="r_nav">
<ul>
<li>
<span class="user" style="display: none;">欢迎</span>
<span class="users"></span>
<spa class="userss" style="display: none;"> 注销</spa>
<a href="#none" style="color: red" class="signIn">你好，请登录</a>
<a href="#none" class="register">免费注册</a>
</li>
<li class="line"></li>
<li>
<a href="#none">我的订单</a>
</li>
<li class="line"></li>
<li class="jdLi">
<a href="#none">我的京东</a>
<b class="iconfont"></b>
<div class="dropdown-content wdjd">
<div>
<ul class="clearfix">
<li>待处理订单</li>
<li>返修退货</li>
<li>降价商品</li>
</ul>
<ul class="clearfix">
<li>我的问答</li>
<li>我的关注</li>
</ul>
</div>
<div>
<ul class="clearfix">
<li>我的金豆</li>
<li>我的白条</li>
</ul>
<ul class="clearfix">
<li>我的优惠券</li>
<li>我的理财</li>
</ul>
</div>
</div>
</li>
<li class="line"></li>
<li>
<a href="#none">京东会员</a>
</li>
<li class="line"></li>
<li>
<a href="#none">企业采购</a>
</li>
<li class="line"></li>
<li class="jdLi">
<a href="#none">客户服务</a>
<b class="iconfont"></b>
</li>
<li class="line"></li>
<li class="jdLi">
<a href="#none">网站导航</a>
<b class="iconfont"></b>
</li>
<li class="line"></li>
<li>
<a href="#none">手机京东</a>
<span class="phone">
<s></s>
<img src="" alt="">
</span>
</li>
</ul>
</div>
</div>
</div>
<!--导航结束-->
<!--搜索栏开始-->
<div class="m_nav w min">
<div class="logo">
<a href="#none">京东</a>
</div>
<div class="search_box">
<input type="text" class="search" placeholder="罗技鼠标" autofocus>
<input type="button" class="btn">
<b class="iconfont search_img"></b>
</div>
<div class="cart">
<b class="iconfont"></b>
<a href="#none">我的购物车</a>
<span>0</span>
</div>
<div class="hot_word">
<ul>
<li><a href="#none" style="color: red">飞利浦电视</a></li>
<li><a href="#none">新品上市</a></li>
<li><a href="#none">空调好物</a></li>
</ul>
</div>
<div class="nav_item ">
<ul>
<li>
<a href="#none">秒杀</a>
</li>
<li>
<a href="#none">优惠券</a>
</li>
<li>
<a href="#none">PLUS会员</a>
</li>
<li>
<a href="#none">品牌闪购</a>
</li>
<li>
<a href="#none">拍卖</a>
</li>
<li>
<a href="#none">京东家电</a>
</li>
<li>
<a href="#none">京东超市</a>
</li>
<li>
<a href="#none">京东生鲜</a>
</li>
<li>
<a href="#none">全球国际</a>
</li>
<li>
<a href="#none">京东金融</a>
</li>
</ul>
</div>
</div>
<!--搜索栏结束-->
<!--主体开始-->
<div class="content min">
<div class="main_body w">
<div class="banner">
<div class="left_banner">
<ul>
<li>
<a href="#none">家用电器</a>
</li>
<li>
<a href="#none">手机 / 运营商 / 数码</a>
</li>
<li>
<a href="#none">电脑 / 办公</a>
</li>
<li>
<a href="#none">家居 / 家具 / 家装 / 厨具</a>
</li>
<li>
<a href="#none">男装 / 女装 / 童装 / 内衣</a>
</li>
<li>
<a href="#none">美妆 / 个护清洁 / 宠物</a>
</li>
<li>
<a href="#none">女鞋 / 箱包 / 钟表 / 珠宝</a>
</li>
<li>
<a href="#none">男鞋 / 运动 / 户外</a>
</li>
<li>
<a href="#none">房产 / 汽车 / 汽车用品</a>
</li>
<li>
<a href="#none">母婴 / 玩具乐器</a>
</li>
<li>
<a href="#none">食品 / 酒类 / 生鲜 / 特产</a>
</li>
<li>
<a href="#none">艺术 / 礼品鲜花 / 农资绿植</a>
</li>
<li>
<a href="#none">医药保健 / 计生情趣</a>
</li>
<li>
<a href="#none">图书 / 文娱 / 教育 / 电子书</a>
</li>
<li>
<a href="#none">机票 / 酒店 / 旅游 / 生活</a>
</li>
<li>
<a href="#none">理财 / 众筹 / 白条 / 保险</a>
</li>
<li>
<a href="#none">安装 / 维修 / 清洗 / 二手</a>
</li>
<li>
<a href="#none">工业品</a>
</li>
</ul>
</div>
<div id="cont" class="middle_banner">
</div>
<div class="right_banner">
<div class="top_user">
<!-- 用户等录信息 -->
<div class="login_msg clearfix">
<a href="#none" class="no_login">
<img src="" alt="">
</a>
<div class="text">
<p>Hi~欢迎逛京东</p>
<p>
<a href="#none">登录</a><span> |</span>
<a href="#none">注册</a>
</p>
</div>
</div>
<!-- 按钮 -->
<div class="buttons">
<a href="#none">新人福利</a>
<a href="#none">PLUS会员</a>
</div>
</div>
<!--中间的公告-->
<div class="title">
<div class="top_title">
<span class="hot_title">京东快报</span>
<a href="#none">更多
<span class="title_span">></span>
</a>
</div>
<div class="content_title">
<div class="public">
<a href="#none" class="box">公告</a>
<a href="#none">2020年春节物流服...</a>
</div>
<div class="public">
<a href="#none" class="box">最新</a>
<a href="#none">N95口罩今年你备了...</a>
</div>
<div class="public">
<a href="#none" class="box">最新</a>
<a href="#none">一家独霸中国口罩市...</a>
</div>
<div class="public">
<a href="#none" class="box">最新</a>
<a href="#none">小米10配置出炉！5...</a>
</div>
</div>
</div>
<div class="bottom_user">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<!--主体结束-->
<ul class="goodlist clearfix">
</ul>
<button class="buttonsss" style="width: 100px; height: 100px;">点击</button>
<!--底部开始-->
<div class="footer min ">
<div class="top_footer">
<div class="w">
<ul>
<li>
<b>多</b>
<span>品类齐全，轻松购物</span>
</li>
<li>
<b class="fast">快</b>
<span>多仓直发，极速配送</span>
</li>
<li>
<b class="good">好</b>
<span>正品行货，精致服务</span>
</li>
<li>
<b class="save">省</b>
<span>天天低价，畅选无忧</span>
</li>
</ul>
</div>
</div>
<div class="middle_footer w">
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd>上门自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dd>配送费收取标准</dd>
<dd>海外配送</dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
<dd>公司转账</dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd>售后政策</dd>
<dd>价格保护</dd>
<dd>退款说明</dd>
<dd>返修/退换货</dd>
<dd>取消订单</dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd>夺宝岛</dd>
<dd>DIY装机</dd>
<dd>延保服务</dd>
<dd>京东E卡</dd>
<dd>京东通信</dd>
<dd>京鱼座智能</dd>
</dl>
<dl class="last-dl">
<dt>京东自营覆盖区县</dt>
<dd>
<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
<a href="#none">查看详情</a>
</dd>
</dl>
</div>
<div class="bottom_footer">
<p>
<a href="#none">关于我们</a><span>|</span>
<a href="#none">联系我们</a><span>|</span>
<a href="#none">联系客服</a><span>|</span>
<a href="#none">合作招商</a><span>|</span>
<a href="#none">商家帮助</a><span>|</span>
<a href="#none">营销中心</a><span>|</span>
<a href="#none">手机京东</a><span>|</span>
<a href="#none">友情链接</a><span>|</span>
<a href="#none">销售联盟</a><span>|</span>
<a href="#none">京东社区</a><span>|</span>
<a href="#none">风险监测</a><span>|</span>
<a href="#none">隐私政策</a><span>|</span>
<a href="#none">京东公益</a><span>|</span>
<a href="#none">English Site</a><span>|</span>
<a href="#none">Media & IR</a>
</p>
<p class="public">
<a href="#none">京公网安备 11000002000088号</a><span>|</span>
<a href="#none">京ICP证070359号</a><span>|</span>
<a href="#none">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a><span>|</span>
<a href="#none">新出发京零 字第大120007号</a>
</p>
<p class="public">
<a href="#none">互联网出版许可证编号新出网证(京)字150号</a><span>|</span>
<a href="#none">出版物经营许可证</a><span>|</span>
<a href="#none">网络文化经营许可证京网文[2014]2148-348号</a><span>|</span>
<a href="#none">违法和不良信息举报电话：4006561155</a>
</p>
<p class="public">
<a href="#none">Copyright © 2004 - 2020 京东JD.com 版权所有</a><span>|</span>
<a href="#none">消费者维权热线：4006067733经营证照</a><span>|</span>
<a href="#none">(京)网械平台备字(2018)第00003号</a><span>|</span>
<a href="#none">营业执照</a>
</p>
<p class="public">
<a href="#none">Global Site|Сайт России</a><span>|</span>
<a href="#none">Situs Indonesia</a><span>|</span>
<a href="#none">Sitio de España</a><span>|</span>
<a href="#none">เว็บไซต์ประเทศไทย</a>
</p>
<p class="public">
<a href="#none">京东旗下网站：京东钱包</a><span>|</span>
<a href="#none">京东云</a>
</p>
<img src="" alt="">
</div>
</div>
<!--底部结束-->
<!-- 引入js -->
<script src="./js/index.js"></script>
<!-- obtain.js必须在data.js之前 -->
<script src="../register/js/obtain.js"></script>
<!-- <script src="./js/obtain.js"></script> -->
<script src="./js/commoditys.js"></script>
<!-- data.js要在banner.js之前 -->
<script src="./js/data.js"></script>
<script src="./js/banner.js"></script>
<script>
</script>
</body>
</html>4.商品详情页面
功能点击加和减改变数量，点击加入购物车加入购物车，如果购物车有这个物品，以这上面为准
登录注册按钮和首页一样
main.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天天生鲜-商品详情页</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/reset.css">
<script src="../index/js/public.js"></script>
</head>
<body>
<!-- 头部信息 -->
<div class="header_con">
<div class="header">
<div class="welcome">欢迎来到京东商品!</div>
<div class="user_login">
<span style="display: none;" class="hy">欢迎</span>
<span style="display: none;" class="user"></span>
<span style="display: none;" class="zx">注销</span>
<a href="#none" class="dl">登录</a>
<span>|</span>
<a href="#none " class="zc"> 注册</a>
<span>|</span>
<a href="#none">我的购物车</a>
</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="#" class="logo fl"><img src=""></a>
<div class="search_con fl">
<input type="text" class="input_text fl" placeholder="搜索商品">
<input type="button" class="input_btn fr" value="搜索">
</div>
<div class="guest_card fr">
<span class="card_name fl">我的购物车</span>
<div class="goods_count fl">0</div>
</div>
</div>
<!-- 商品信息栏 -->
<div class="navbar_con">
<div class="navbar clearfix">
<div class="subnav_con fl">
<h1>全部商品分类 <i></i></h1>
</div>
<ul class="navlist fl">
<li><span class="sy">首页</span></li>
<li><a href="">js</a></li>
<li><a href="">抽奖</a></li>
</ul>
</div>
</div>
<div class="submena clearfix">
<a href=" ">js书籍</a
<span>></span>
<a href=" ">新鲜水果</a>
<span>></span>
<a href=" ">商品详情</a>
</div>
<div class="center_con clearfix">
<div class="main_menu fl"></div>
<div class="goods_detail_list fr">
<h3>【现货速发】JavaScript权威指南(第7七版) 犀牛书</h3>
<p>${v.details}</p>
<div class="prize_bar">
<div class="show_prize fl">￥<em>${v.money}</em></div>
<div class="show_unit fl">单位：500g</div>
</div>
<div class="goods_num clearfix">
<div class="num_name fl">数量：</div>
<div class="num_add fl">
<input type="text" class="num_show fl" value="1">
<a href="javascript:;" class="add fr">+</a>
<a href="javascript:;" class="minus fr">-</a>
</div>
</div>
<div class="total">总价：<em>16.80元</em></div>
<div class="operate_btn">
<a href="#none" class="buy_btn">立即购买</a>
<a href="#none" class="add_cart">加入购物车</a>
</div>
</div>
</div>
<script src="../register/js/obtain.js"></script>
<script src="./js/indexs.js"></script>
</body>
</html>
reset.css
body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
em{
font-style:normal;
}
img{
border:0px;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
.fl{
float:left;
}
.fr{
float:right;
}
indexs.js
class Indexs{
constructor(){
this.src
this.num
this.str
this.load.bind(this)()
this.userFn.bind(this)()
this.totalFn.bind(this)()
//点击加入购物车
$('.add_cart').addEventListener('click',this.cartClickFn.bind(this))
//点击加
$('.add').addEventListener('click',this.addClickFn.bind(this))
//点击减
$('.minus').addEventListener('click',this.minusClickFn.bind(this))
//点击登录
$('.dl').addEventListener('click',this.dlClickFn.bind(this))
//点击注册
$('.zc').addEventListener('click',this.zcClickFn.bind(this))
//点击注销
$('.zx').addEventListener('click',this.zxClickFn.bind(this))
// console.log($('.sy'));
//点击首页
$('.sy').addEventListener('click',this.syClickFn.bind(this))
//点击购物车
$('.card_name').addEventListener('click',this.cardClickFn.bind(this))
// console.log($$('.zx'));
console.log( $('.card_name'));
}
//
async cartClickFn(){
if(localStorage.getItem('user')){
location.href="../shop/shopping.html"
let bookid=localStorage.getItem('id')
console.log(bookid);
let src=this.src
let jg= $('.show_prize em').innerHTML
let sl =$('.num_show').value
let nums=9
// let sl=
console.log(sl);
console.log(jg);
console.log(src);
await obtain.get('../register/lib/register.php', {
bookid,
src,
jg,
sl,
nums
}).then( data => {
console.log(data);
});
}else{
localStorage.setItem('key','1')
location.href='../login/login.html'
}
}
//购物车
cardClickFn(){
// console.log(1);
if(localStorage.getItem('user')){
location.href="../shop/shopping.html"
}else{
localStorage.setItem('key','1')
location.href='../login/login.html'
}
}
//跳转到搜也
syClickFn(){
location.href='http://localhost/jd/index/'
}
//注销
zxClickFn(){
console.log( $('.zx'));
localStorage.setItem('user','')
location.reload()
}
//登录
dlClickFn(){
localStorage.setItem('key','3')
location.href='../login/login.html'
}
//注册
zcClickFn(){
location.href='../register/register.html'
}
//判断是否登录
userFn(){
if(localStorage.getItem('user')){
$('.user').innerHTML=localStorage.getItem('user')
$('.user').style.display='inline-block'
$('.hy').style.display='inline-block'
$('.zx').style.display='inline-block'
$('.dl').style.display='none'
$('.zc').style.display='none'
}
else{
$('.user').style.display='none'
$('.hy').style.display='none'
$('.zx').style.display='none'
$('.dl').style.display='inline-block'
$('.zc').style.display='inline-block'
}
}
//总价
totalFn(){
setTimeout(function(){
this.moneys=localStorage.getItem('money')
$('.total em').innerHTML='￥'+ Math.ceil($('.num_show').value* this.moneys*100)/100
},50)
}
//点击减号
minusClickFn(){
if($('.num_show').value>=2){
$('.num_show').value=1*$('.num_show').value-1
}
this.totalFn()
}
//点击加号
addClickFn(){
$('.num_show').value=1*$('.num_show').value+1
this.totalFn()
}
async load(){
// this.str = location.search
// this.num= this.str.split('=')
// console.log(this.num[1]);
// let id=this.num[1]
let id=localStorage.getItem('id')
let nums=4
await obtain.get('../register/lib/register.php', {
nums,
id
}).then( async data => {
JSON.parse(data).pData.forEach(async v=>{
// console.log(v);
this.src=v.src
// console.log(document.body.innerHTML);
$('.main_menu').innerHTML=`<img src="${v.src}">`
$('.goods_detail_list p').innerHTML=`${v.details}`
$('.show_prize em').innerHTML=`${v.money}`
localStorage.setItem('money',v.money)
})
// console.log(data);
});
}
}
new Indexsindexs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天天生鲜-商品详情页</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/reset.css">
<script src="../index/js/public.js"></script>
</head>
<body>
<!-- 头部信息 -->
<div class="header_con">
<div class="header">
<div class="welcome">欢迎来到京东商品!</div>
<div class="user_login">
<span style="display: none;" class="hy">欢迎</span>
<span style="display: none;" class="user"></span>
<span style="display: none;" class="zx">注销</span>
<a href="#none" class="dl">登录</a>
<span>|</span>
<a href="#none " class="zc"> 注册</a>
<span>|</span>
<a href="#none">我的购物车</a>
</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="#" class="logo fl"><img src=""></a>
<div class="search_con fl">
<input type="text" class="input_text fl" placeholder="搜索商品">
<input type="button" class="input_btn fr" value="搜索">
</div>
<div class="guest_card fr">
<span class="card_name fl">我的购物车</span>
<div class="goods_count fl">0</div>
</div>
</div>
<!-- 商品信息栏 -->
<div class="navbar_con">
<div class="navbar clearfix">
<div class="subnav_con fl">
<h1>全部商品分类 <i></i></h1>
</div>
<ul class="navlist fl">
<li><span class="sy">首页</span></li>
<li><a href="">js</a></li>
<li><a href="">抽奖</a></li>
</ul>
</div>
</div>
<div class="submena clearfix">
<a href=" ">js书籍</a
<span>></span>
<a href=" ">新鲜水果</a>
<span>></span>
<a href=" ">商品详情</a>
</div>
<div class="center_con clearfix">
<div class="main_menu fl"></div>
<div class="goods_detail_list fr">
<h3>【现货速发】JavaScript权威指南(第7七版) 犀牛书</h3>
<p>${v.details}</p>
<div class="prize_bar">
<div class="show_prize fl">￥<em>${v.money}</em></div>
<div class="show_unit fl">单位：500g</div>
</div>
<div class="goods_num clearfix">
<div class="num_name fl">数量：</div>
<div class="num_add fl">
<input type="text" class="num_show fl" value="1">
<a href="javascript:;" class="add fr">+</a>
<a href="javascript:;" class="minus fr">-</a>
</div>
</div>
<div class="total">总价：<em>16.80元</em></div>
<div class="operate_btn">
<a href="#none" class="buy_btn">立即购买</a>
<a href="#none" class="add_cart">加入购物车</a>
</div>
</div>
</div>
<script src="../register/js/obtain.js"></script>
<script src="./js/indexs.js"></script>
</body>
</html>
登录页面
base.css
p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "微软雅黑";
color: #666666;
list-style: none;
}
img,input{
outline-style: none;
padding: 0;
margin: 0;
border: none;
vertical-align: middle;
}
.clearfix::after{
content: "";
height: 0px;
line-height: 0px;
clear: both;
visibility: hidden;
display: block;
}
.clearfix{
*zoom:1;
}
a{
text-decoration: none;
color: #666666;
}
a:hover{
color:#e4393c;
}
/*登录的版心*/
.login_w{
width: 990px;
margin: 0 auto;
}
/*首页的版心*/
.w{
width: 1190px;
margin: 0 auto;
}
.min-width{
min-width: 1000px;
}login.css
.login_w{
height: 92px;
}
.l_login{
float: left;
padding-top: 22px;
}
.r_login{
float: right;
padding-top: 65px;
position: relative;
}
.r_login b{
width: 18px;
height: 14px;
display: block;
position: absolute;
left: -22px;
bottom: -1px;
}
.l_login a{
width: 170px;
height: 60px;
display: inline-block;
text-indent: -2000px;
vertical-align: bottom;
}
.l_login b{
width: 110px;
height: 40px;
display: inline-block;
vertical-align: bottom;
}
.text{
height: 35px;
background-color: #fff8f0;
line-height: 35px;
text-align: center;
position: relative;
}
.text b{
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 268px;
top: 9px;
}
.main_content{
width: 100%;
height: 510px;
background-color: #e93854;
}
.main_content .login_w{
background: url(../../imgs/1.jpg) 0px 0px no-repeat;
height: 475px;
}
.main_content .form{
width: 346px;
height: 400px;
box-sizing: border-box;
background-color: #fff;
float: right;
margin-top: 10px;
}
.main_content .form_text{
height: 38px;
background-color: #fff8f0;
line-height: 38px;
padding-left: 50px;
position: relative;
}
.main_content .form_text b{
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 11px;
left: 30px;
}
.main_content .top{
height: 54px;
line-height: 54px;
display: flex;
border-bottom: 1px solid #ccc;
text-align: center;
}
.main_content .top a{
flex: 1;
font-size: 18px;
font-weight: 700;
border-right: 1px solid #ccc;
}
.main_content .top .one{
border-right: none;
}
.form .middle{
padding-top: 33px;
padding-left: 20px;
padding-right: 20px;
}
.form .middle .public{
width: 304px;
height: 38px;
border: 1px solid #ccc;
margin-bottom: 20px;
padding-left: 50px;
box-sizing: border-box;
}
.form .inputs {
position: relative;
}
.form .middle span {
display: block;
width: 36px;
height: 36px;
border-right: 1px solid #ccc;
background-color: #f3f3f3;
position: absolute;
}
.form .middle .user_img {
text-align: center;
top: 1px;
left: 1px;
}
.form .middle .pwd_img {
text-align: center;
top: 59px;
left: 1px;
}
.inputs a {
float: right;
}
.inputs .btn {
width: 100%;
height: 36px;
background-color: #e4393c;
color: #fff;
margin-top: 20px;
font-size: 20px;
text-align: center;
}
.bottom {
margin-top: 30px;
border-top: 1px solid #ccc;
height: 55px;
line-height: 55px;
color: #cccccc;
}
.qq,.wx{
display: inline-block;
width: 70px;
height: 55px;
padding-left: 35px;
box-sizing: border-box;
}
.bottom a {
position: relative;
}
.qq b {
width: 19px;
height: 18px;
display: block;
position: absolute;
top: 18px;
left: 13px;
}
.wx b{
width: 19px;
height: 18px;
display: block;
position: absolute;
top: 18px;
left: 13px;
}
.bottom .register{
margin-left: 120px;
font-size: 15px;
}
.bottom .register b{
width: 19px;
height: 18px;
display: block;
position: absolute;
top: 2px;
left: -20px;
}
.footer {
text-align: center;
padding-top: 20px;
}
.footer a {
padding: 0 10px;
}
.footer .copyright{
padding-top: 15px;
padding-bottom: 40px;
}
login.js
class Login{
constructor(){
$('.register').addEventListener('click',this.regClickFn.bind(this))
$('.btn').addEventListener('click',this.btnClickFn.bind(this))
}
//获取登录账号id给其他页面
static Users(){
return this.user
}
// 登录
btnClickFn(){
let nums='2'
let passwords=$('.pwd').value
let tel=$('.user').value
obtain.get('../register/lib/register.php', {
nums,
passwords,
tel
}).then(data => {
if(data==0){
alert('账号或者密码错误')
}else{
localStorage.setItem('user', data)
// console.log(data);
//跳转到购物车页面
if(localStorage.getItem('key')==1){
location.href='../shop/shopping.html'
}
//跳转到首页
else if(localStorage.getItem('key')==2){
location.href='../index/index.html'
}else if(localStorage.getItem('key')==3){
location.href='../details/indexs.html'
}
//初始情况也到首页
else{
location.href='../index/index.html'
}
}
});
}
// 注册
regClickFn(){
location.href='../register/register.html'
}
}
new Loginlogin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东-欢迎登陆</title>
<meta name="keywords" content="京东在线商城">
<meta name="description" content="电商网站">
<link rel="stylesheet" href="./css/login.css">
<link rel="stylesheet" href="./css/base.css">
<script src="../register/js/obtain.js"></script>
</head>
<body>
<!--登录头部开始-->
<div class="login_w">
<div class="l_login">
<a href="#">京东首页</a>
<b></b>
</div>
<div class="r_login">
<a href="#">登录页面，调查问卷</a>
<b></b>
</div>
</div>
<!--登录头部结束-->
<!--主体开始-->
<div class="main_content min-width">
<div class="text">
<b></b>
<p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p>
</div>
<div class="login_w">
<div class="form">
<div class="form_text">
<p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
<b></b>
</div>
<div class="top">
<a href="#">扫码登录</a>
<a href="#" class="one">账户登录</a>
</div>
<div class="middle">
<div class="inputs">
<input type="text" class="public user">
<input type="text" class="public pwd">
<span class="user_img">电话</span>
<span class="pwd_img">密码</span>
<a href="#">忘记密码</a>
<input type="button" class="btn" value="登 录">
</div>
</div>
<div class="bottom">
<a href="#" class="qq">
<b></b>QQ
</a>
<a href="#" class="wx">
<b></b>微信
</a>
<a href="#none" class="register">
立即注册
</a>
</div>
</div>
</div>
</div>
<!--主体结束-->
<!--尾部开始-->
<div class="footer min-width">
<p>
<a href="#">关于我们 </a>|
<a href="#">联系我们 </a>|
<a href="#">人才招聘 </a>|
<a href="#">商家入驻 </a>|
<a href="#">广告服务 </a>|
<a href="#">手机京东 </a>|
<a href="#">友情链接 </a>|
<a href="#">销售联盟 </a>|
<a href="#">京东社区 </a>|
<a href="#">京东公益 </a>|
<a href="#">English Site</a>
</p>
<p class="copyright">Copyright © 2004-2020 京东JD.com 版权所有</p>
</div>
<!--尾部结束-->
<script src="../index/js/public.js"></script>
<script src="./js/login.js"></script>
</body>
</html>
注册页面
register.css
body {
font-size: 12px;
color: #666;
background: #f2f2f2;
font-family: arial, sans-serif;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
#navi {
width: 100%;
height: 30px;
border-bottom: 1px solid #eee;
background: #fafafa;
line-height: 30px;
}
#tabs,
#header,
#content,
#footer {
width: 990px;
margin: 0 auto;
/*居中*/
}
#tabs {
height: 33px;
line-height: 33px;
}
#header {
padding: 10px 0;
}
#header .bg {
width: 150px;
height: 50px;
background-repeat: no-repeat;
float: left;
}
#header .welcom {
font-size: 25px;
border-left: 1px solid #ddd;
margin-top: 15px;
float: left;
}
#tabs {
clear: both;
}
#content {
background: #fff;
padding-top: 40px;
padding-bottom: 20px;
border: 1px solid #ddd;
border-top: none;
/*顶部边框没有*/
height: 400px;
}
#content .bg {
background: no-repeat 770px 0px;
width: 35px;
height: 38px;
background-repeat: no-repeat;
background-position: 0px -45px;
float: right;
}
#content .bg_text {
margin: 10px;
float: right;
}
.line {
width: 750px;
height: 60px;
padding-top: 9px;
}
.line span {
float: left;
/*行内元素不能定宽高，设置这个让他可以设置*/
height: 34px;
line-height: 34px;
}
.text {
width: 190px;
/*撑开，距离左边*/
text-align: right;
/*位置靠右*/
font-size: 14px;
color: #999;
padding-right: 10px;
}
.kuang1 {
width: 238px;
height: 16px;
color: #999;
padding: 10px 25px 10px 5px;
/*大小撑开了*/
border: 1px solid #ddd;
background-position: 238px center;
/*背景图的位置*/
background-repeat: no-repeat;
}
.user {
background-size: 25px 25px;
background-repeat: no-repeat;
}
.kuang1:focus {
/*:focus选择器用于选择具有焦点的元素。*/
border-color: #7abd54;
/*设置编辑框的颜色*/
outline: none;
/*把默认的边框去掉。outline（轮廓）是绘制于元素周围的*/
}
.divzhuce input:focus {
/*:focus选择器用于选择具有焦点的元素。*/
border-color: #7abd54;
/*设置编辑框的颜色*/
outline: none;
/*把默认的边框去掉。outline（轮廓）是绘制于元素周围yzm的*/
}
.dsp {
background: #f7f7f7;
border: 1px solid #ddd;
width: 238px;
height: 34px;
padding: 1px 5px;
margin-left: 5px;
}
.text b {
color: red;
margin-right: 2px;
}
.pwd {
background-size: 25px 25px;
background-repeat: no-repeat;
}
.yanzhengma {
width: 100px;
}
.yzm {
width: 100px;
color: #ddd;
text-align: center;
}
.texieyi {
color: royalblue;
}
.xieye {
width: 200px;
margin: 0 auto;
}
.zhuce {
height: 24px;
/*输入框高度*/
width: 200px;
/*输入框宽度*/
border: 1px solid #CDC28D;
/* 输入框表框颜色*/
background-color: #F2F9FD;
/* 输入框背景颜色*/
/*输入框里的文字和输入框左边之间的距离*/
margin-top: 10px;
}
.divzhuce {
margin: 0 auto;
width: 200px;
}
.yz{
display: none;
}obtain.js
class obtain {
static get (url, data) {
return obtain.http('get', url, data)
}
static post (url, data) {
return obtain.http('post', url, data)
}
static http (type, url, data) {
let params = null
if (data) {
// 临时在 params 中保存数组数据
params = []
// 迭代 data 对象中各属性 例：{username: 'admin', password: 'admin'}
for (const key in data) {
params.push(`${key}=${data[key]}`) // ['username=admin', 'password=admin']
}
// 将数组中每个元素以 `&` 符号拼接，生成查询字符串结构
params = params.join('&'); // username=admin&password=admin
}
// 如果是 GET 数据，并存在向后端发送的数据，则将查询字符串以 ? 号拼接在 URL 后
if (type === 'get' && params) {
url += `?${params}`
params = null
}
// console.log(url);
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(type, url);
// post 需要设置头部
type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(params);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 成功
resolve(xhr.response)
} else {
// 失败
reject('服务器错误');
}
// console.log(xhr.response);
}
}
})
}
}
register.js
class Register {
constructor() {
//判断是不是符合用户名标准
this.num1 = 0
this.num2 = 0
this.num3 = 0
this.num4 = 0
this.num5 = 0
this.reg = /^[\u4e00-\u9fa50-9a-zA-Z]{4,16}$/;
this.reg1 = /^[0-9a-zA-Z]{4,20}$/;
this.reg2 = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
$('.ph').addEventListener('blur', this.phBlurFn.bind(this))
$('.pass').addEventListener('blur', this.passBlurFn.bind(this))
$('.user').addEventListener('blur', this.userBlurFn.bind(this))
$('.password').addEventListener('blur', this.passwordBlurFn.bind(this))
$('.yzm').addEventListener('click', this.yzmClickFn.bind(this))
$('.Refresh').addEventListener('click', this.RefreshClickFn.bind(this))
$('.yanzhengma').addEventListener('blur', this.yanzhengmaBlurFn.bind(this))
$('.zhuce').addEventListener('click', this.zhuceClickFn.bind(this))
}
//注册
zhuceClickFn(){
let users=$('.user').value
let passwords=$('.password').value
let tel=$('.ph').value
let nums='1'
if( $('.tongyi').checked&&this.num1&&this.num2&&this.num3&&this.num4&&this.num5){
obtain.get('./lib/register.php', {
nums,
users,
passwords,
tel,
// nums
}).then(data => {
if(!data){
alert('注册成功')
location.href='../login/login.html'
}else{
alert('改手机号码已被注册')
}
});
}
else{
alert('请完善上面信息')
}
}
//判读验证码是否正确
yanzhengmaBlurFn() {
if (this.num4) {
if ($('.yanzhengma').value == $('.yanzhengmas').value) {
$('.yzm').style.color = 'green'
$('.yzm').innerHTML = '验证码正确'
this.num5=1
} else if(!$('.yanzhengma').value) {
$('.yzm').style.color = '#666'
$('.yzm').innerHTML = '请输入验证码'
this.num5=0
}else{
$('.yzm').style.color = 'red'
$('.yzm').innerHTML = '验证码错误'
this.num5=0
}
}
else{
$('.yzm').style.color = '#666'
$('.yzm').innerHTML = '获取短信验证码'
$('.yanzhengma').value=''
this.num5=0
}
}
//重新获取验证码
RefreshClickFn() {
this.yzm()
this.yanzhengmaBlurFn()
}
//获取验证码
yzmClickFn() {
if (this.num4) {
$('.yz').style.display = 'block'
$('#content').style.height='470px'
} else {
}
}
//发送验证码
yzm() {
let yzNum = ''
for (let i = 0; i < 4; i++) {
yzNum += Math.round(Math.random() * 9)
}
$('.yanzhengmas').value = yzNum
$('.yanzhengmas').style.width = '30px'
}
//验证电话号码是否符合格式
phBlurFn() {
if (this.reg2.test($('.ph').value)) {
$('.phs').style.color = 'green'
$('.phs').innerHTML = '手机号格式正确'
$('.yzm').style.color = '#666'
this.num4 = 1
this.yzm()
} else if (!$('.ph').value) {
$('.phs').innerHTML = '请输入你的手机号'
$('.phs').style.color = '#666'
$('.yz').style.display = 'none'
this.num4 = 0
this.yanzhengmaBlurFn()
} else {
$('.phs').style.color = 'red'
$('.phs').innerHTML = '重新输入电话号码'
$('.yz').style.display = 'none'
this.num4 = 0
this.yanzhengmaBlurFn()
}
}
//验证密码是否记住
passBlurFn() {
if ($('.pass').value == $('.password').value && this.num2) {
$('.passs').style.color = 'green'
$('.passs').innerHTML = '密码符合标准'
this.num3 = 1
} else if (!$('.pass').value) {
$('.passs').innerHTML = '与密码相同'
$('.passs').style.color = '#666'
this.num3 = 0
} else {
$('.passs').style.color = 'red'
$('.passs').innerHTML = '与密码不相符'
this.num3 = 0
}
}
//验证密码
passwordBlurFn() {
if (this.reg1.test($('.password').value)) {
$('.passwords').style.color = 'green'
$('.passwords').innerHTML = '密码符合标准'
this.num2 = 1
} else if (!$('.password').value) {
$('.passwords').innerHTML = '4-20位数字字母组成'
$('.passwords').style.color = '#666'
this.num2 = 0
} else {
$('.passwords').style.color = 'red'
$('.passwords').innerHTML = '重新输入密码'
this.num2 = 0
}
}
//验证用户名
userBlurFn() {
if (this.reg.test($('.user').value)) {
$('.users').style.color = 'green'
$('.users').innerHTML = '用户名符合标准'
this.num1 = 1
} else if (!$('.user').value) {
this.num1 = 0
$('.users').innerHTML = '4-16位数字字母或者汉字'
$('.users').style.color = '#666'
} else {
console.log(2);
$('.users').style.color = 'red'
$('.users').innerHTML = '重新输入用户名'
this.num1 = 0
}
}
}
new Registermysql.php
<?php
function con($nums){
//当传入的参数不同执行不同连接
$nums==6?$link = mysqli_connect('127.0.0.1','root','root','shop',3306): ($nums==5?$link = mysqli_connect('127.0.0.1','root','root','shop',3306):($nums==3? $link = mysqli_connect('127.0.0.1','root','root','sp',3306):$link = mysqli_connect('127.0.0.1','root','root','user',3306)));
if(!$link){
echo '连接失败';
die;
}
return $link;
}
// 执行非查询操作
function query($sql,$nums){
//连接数据库并且传递判断依据
$link = con($nums);
//数据库返回值
$res = mysqli_query($link,$sql);
return $res;
}
// 执行查询操作的
function select($sql,$nums){
//连接数据库并且传递判断依据
$link = con($nums);
//数据库返回值
$res = mysqli_query($link,$sql);
if(!$res){
return false;
}
//吧数据库返回值转化为对象
$arr = [];
while($tmp = mysqli_fetch_assoc($res)){
$arr[]= $tmp;
}
return $arr;
}
?>register.php
<?php
// 引入mysql文件
include('./mysql.php');
//$nums用来判断那个页面的请求
$nums=$_GET['nums'];
//$nums为1或者2时候为登录页面
if($nums==1||$nums==2){
repeat($nums);
//$nums为三或4或者5时执行
}else if($nums==3||$nums==4||$nums==5){
//执行商品页面对应代码
spFn($nums);
}else if($nums==6){
shop($nums);
}else if($nums==7){
$sl=$_GET['sl'];
$add=$_GET['add'];
shops(6,$add);
}
else if($nums==8){
shop($nums);
}
//详情页面修改数据
else if($nums==9){
$bookid=$_GET['bookid'];
$src=$_GET['src'];
$jg=$_GET['jg'];
$sl=$_GET['sl'];
// echo $bookid;
$sql="select * from problem WHERE bookid='$bookid'";
$res1 =select($sql,6);
if($res1){
$sql="delete FROM problem WHERE bookid = '$bookid'";
$res1 =select($sql,6);
adds($bookid,$src,$jg,$sl,6);
}else{
adds($bookid,$src,$jg,$sl,6);
}
}
function shops($nums,$add){
$bookid=$_GET['bookid'];
// UPDATE problem set sl=sl+1 WHERE bookid =5
$add==0? $sql="update problem set sl=sl-1 WHERE bookid =$bookid;":$sql="update problem set sl=sl+1 WHERE bookid =$bookid;";
$res =query($sql,$nums);
echo $add;
}
function shop($nums){
$sql="select * from problem ";
if($nums==8){
$bookid=$_GET['bookid'];
$sql="delete FROM problem WHERE bookid = '$bookid'";
query($sql,6);
echo $bookid;
}
if($nums==6)
{
$res =select($sql,$nums);
print_r(json_encode([
'pData'=>$res
]));
}}
function spFn($nums){
if($nums==4||$nums==5){
$id=$_GET['id'];
if($nums==5){
$bookid=$_GET['id'];
echo $bookid;
}
}
$nums==5?$sql="select * from problem WHERE bookid='$bookid'": ($nums==3? $sql="select * from problem ":$sql="select * from problem WHERE id='$id'");
//如果$nums为4就转化为3
$nums==4&&$nums=3;
//执行查询语句返回的对象
$res =select($sql,$nums);
//当nums为5且返回为空时（当在商品列表执行加入购物车时，购物车没有这条数据时）
if($nums==5&&(!$res)){
$sql="select * from problem WHERE id='$id'" ;
$res1 =select($sql,3);
echo $res1[0]['id'];
adds($bookid,$res1[0]['src'],$res1[0]['money'],1,$nums);
}
else{
print_r(json_encode([
'pData'=>$res
]));
}
}
function repeat($nums){
//获取注册信息
$tel = $_GET['tel'];
//当为注册页面时获取用户名登录页面为空
$users =$nums==1? $_GET['users']:'';
$passwords = $_GET['passwords'];
//当为注册页面时执行第一条语句登录页面执行第二条语句
$sql= $nums==1?"select * from problem where tel='$tel';":"select * from problem where passwords='$passwords' and tel='$tel';";
// $sql= $nums==1?"select count(*) num from problem where tel = '$tel';":"select count(*) num from problem where tel = '$tel' and passwords='$passwords';";
//执行查询语句并且把$nums穿进去
$res = select($sql,$nums);
//当没有找不到账号时
if(!$res){
//当为注册页面时执行
if($nums==1){
add($users,$passwords,$tel,$nums);
}
//当为登录页面时
else{
echo '0';
}
}
//当有这个账号时
else{
$count = $res[0]['users'];
//当为注册页面时
if($nums==1){
echo $count;
}
//当为登录页面时
else{
echo $count;
}
}
}
// 添加数据的方法
function adds($k,$u,$p,$t,$nums){
$users = $u;
$passwords = $p;
$tel = $t;
// die;
//执行添加是的语句
$sql = "insert into problem values(null,'$k','$users','$passwords','$tel')";
//把执行添加时的语句与$nums值传入执行函数
$res = query($sql,$nums);
}
// 添加数据的方法
function add($u,$p,$t,$nums){
$users = $u;
$passwords = $p;
$tel = $t;
// die;
//执行添加是的语句
$sql = "insert into problem values(null,'$users','$passwords','$tel')";
//把执行添加时的语句与$nums值传入执行函数
$res = query($sql,$nums);
}
?>register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/register.css">
<script src="../index/js/public.js"></script>
</head>
<body>
<div id="navi">导航</div>
<div id="header">
<div class="bg"></div>
<span class="welcom">欢迎注册</span>
</div>
<div id="tabs">tab部分</div>
<div id="content">
<div class="bg_position">
<div class="bg_text">企业用户注册</div>
<div class="bg"></div>
</div>
<div class="line">
<span class="text"><b>*</b>用户名：</span>
<span class="ipt">
<input class="kuang1 user" > </input>
</span>
<span class="dsp users">4-16位数字字母或者汉字</span>
</div>
<div class="line">
<span class="text"><b>*</b>密码：</span>
<span class="ipt">
<input class="kuang1 pwd password" type="password"> </input>
</span>
<span class="dsp passwords">4-20位数字和字母组成</span>
</div>
<div class="line">
<span class="text"><b>*</b>验证密码：</span>
<span class="ipt">
<input class="kuang1 pwd pass" type="password"> </input>
</span>
<span class="dsp passs">和密码相同</span>
</div>
<div class="line">
<span class="text"><b>*</b>手机号：</span>
<span class="ipt">
<input class="kuang1 pwd ph" type="text"> </input>
</span>
<span class="dsp phs">请输入你的手机号</span>
</div>
<div class="line yz" >
<span class="text"><b>*</b>验证码：</span>
<span class="ipt">
<input class="kuang1 yanzhengmas"> </input>
</span>
<span class="dsp Refresh" style="width: 100px;">重新获取验证码</span>
</div>
<div class="line">
<span class="text"><b>*</b>短信验证码：</span>
<span class="ipt">
<input class="kuang1 yanzhengma"> </input>
</span>
<span class="dsp yzm">获取短信验证码</span>
</div>
<div class="xieye">
<span class="text">
<input type="checkbox" class="tongyi" />
我已经同意<span class="texieyi">用户注册协议</span>
</span>
</div>
<div class="divzhuce">
<input class="zhuce" type="button" value="立即注册" />
</div>
</div>
<div id="footer">底部</div>
<script src="./js/obtain.js"></script>
<script src="./js/register.js"></script>
</body>
</html>购物车页面
reset.css
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
body{text-align: center;font-size:14px;}
a{text-decoration: none;}
li{list-style: none;}
shopping.css
/*导航开始*/
.nav{
height: 40px;
background-color: #e3e4e5;
}
.fir{
width: 1000px;
margin: 0px auto;
}
.nav_ul1{
float: left;
}
.nav_ul1 li, .nav_ul2 li,.nav_ul2 span{
float: left;
margin-right: 15px;
line-height: 40px;
}
.nav_ul1 a , .nav_ul2 a , .nav_ul2 span , .nav_ul2 select , .nav_ul1 select{
color: gray;
font-family: "黑体";
font-size: 13px;
}
.nav_ul2 select , .nav_ul1 select{
border: 0px;
background-color: #e3e4e5;
}
.nav a:hover{
color: red;
}
.nav_ul2{
float: right;
}
/*导行结束*/
/*搜索框开始*/
.search{
margin: 35px;
}
.search img{
float: left;
}
.search_div{
float: right;
margin-top: 8px;
}
.search_text{
width: 336px;
height: 23px;
border: 3px solid #c91623;
position: relative;
left: 6px;
}
.search_bt{
height: 31px;
width: 51px;
border: 0px;
background-color: #c91623;
color: #FFFFFF;
}
/*搜索框结束*/
/*标题栏开始*/
.title{
margin-top: 127px;
}
.title h3{
float: left;
color: #e2231a;
font-size: 23px;
}
.title_1{
float: right;
}
.title_1 select{
width: 180px;
border-color:gainsboro ;
}
/*标题栏计算*/
/*显示栏开始*/
.typs{
margin-top: 170px;
height: 50px;
background-color: #f3f3f3;
}
.typs li{
float: left;
line-height: 50px;
font-size: 12px;
font-family: "新宋体";
}
.typs input{
margin-left: 10px;
}
.typs li:nth-child(2){
margin-left: 8px;
}
.typs li:nth-child(3){
margin-left: 100px;
}
.typs li:nth-child(4){
margin-left: 384px;
}
.typs li:nth-child(5){
margin-left: 100px;
}
.typs li:nth-child(6){
margin-left: 130px;
}
.typs li:nth-child(7){
margin-left:55px ;
}
/*显示栏结束*/
/*空白开始*/
.kb{
height: 45px;
}
/*空白结束*/
/*商品展示栏开始*/
.info{
height: 150px;
background-color: #fff4e8;
width: 1000px;
border: 1px solid gainsboro;
}
.info li{
float: left;
margin-top:35px ;
}
.info_2{
margin-left: 8px;
}
.info_1{
margin-left: 4px;
}
.info_3{
margin-left: 20px;
}
.info_i{
background-color: red;
color: white;
}
.info_4{
margin-left: 20px;
}
.info_5{
margin-left:165px ;
}
.info_6{
margin-left: 60px;
}
.bu1{
width: 24px;
}
.info_7 input{
width: 20px;
}
.info_9 b{
margin-left: 72px;
}
.info_10{
margin-left: 20px;
}
/*商品展示栏结束*/
/*结算栏开始*/
.check{
height: 50px;
border: 1px solid gainsboro;
margin-top: 20px;
}
.check_ul1 li,.check_ul1,.check_ul2 li{
float: left;
line-height: 50px;
}
.check li:nth-child(3),.check li:nth-child(4),.check li:nth-child(5){
margin-left: 12px;
}
.check_ul1 a:hover{
color: red;
}
.check_ul1 i:nth-child(1){
color: darkgrey;
font-family: "黑体";
font-size: 14px;
}
.check_ul1 a{
color: darkgrey;
font-family: "黑体";
font-size: 14px;
}
.check_ul2{
float: right;
}
.zj1{
color: gray;
font-family: "黑体";
font-size: 13px;
}
.zj2{
font-weight: bold;
color: red;
position: relative;
left: -5px;
}
.check_ul2 button{
background-color: #e64347;
border: 0px;
width: 100px;
height: 50px;
font-weight: bold;
font-size: 20px;
font-family: "黑体";
}
.check_ul2 a{
color: #FFFFFF;
}
/*结算栏结束*/
shopping.js
class Shop{
constructor(){
this.obtains()
this.out.bind(this)()
this.ids
}
//单选
inpFn(e){
let zjg=0
console.log( $$('.inp'));
$$('.inp').forEach(v=>{
// console.log(v.checked);
if(v.checked){
// console.log(v.parentNode.parentNode.querySelector('.b'));
zjg=zjg*1+v.parentNode.parentNode.querySelector('.b').innerHTML*1
}
})
// console.log(e.target.checked);
let num=0
let x=0
if(e.target.checked){
$$('.inp').forEach(v=>{
x++
if(v.checked){
num++
}
})
}else{
$$('.qx').forEach(v=>{
v.checked=e.target.checked
})
}
if(num==x){
$$('.qx').forEach(v=>{
v.checked=e.target.checked
})
}
$('.zj2').innerHTML=Math.round( zjg*100)/100
}
//全选
qxFn(e){
// console.log(e.target.checked);
console.log($$('.qx'));
$$('.inp').forEach(v=>{
v.checked=e.target.checked
})
$$('.qx').forEach(v=>{
v.checked=e.target.checked
})
if(e.target.checked){
let zgs=0
$$('.b').forEach(v=>{
zgs=zgs*1+v.innerHTML*1
})
$('.zj2').innerHTML=zgs
}
}
//删除
async scFn(e){
let zjg=0
// console.log(e.target.parentNode.parentNode);
e.target.parentNode.parentNode.remove()
// console.log(e.target.parentNode.parentNode.querySelector('.inputs').value);
let bookid
//用于判断符号
// console.log($('.inputs'));
// console.log($('.inputs').value);
bookid= e.target.parentNode.parentNode.querySelector('.ids').innerHTML
// console.log(bookid);
e.target.parentNode.parentNode.querySelector('.inputs').value= e.target.parentNode.parentNode.querySelector('.inputs').value*1-1
// let sl=e.target.parentNode.parentNode.querySelector('.inputs').value
await obtain.get('../register/lib/register.php', {
nums:8,
bookid
}).then(datas => {
// console.log(datas);
});
e.target.parentNode.parentNode.querySelector('.b').innerHTML=Math.round( e.target.parentNode.parentNode.querySelector('.inputs').value*e.target.parentNode.parentNode.querySelector('.info_5').innerHTML*100)/100
$$('.inp').forEach(v=>{
// console.log(2);
// console.log(v.checked);
if(v.checked){
// console.log(v.parentNode.parentNode.querySelector('.b'));
zjg=zjg*1+v.parentNode.parentNode.querySelector('.b').innerHTML*1
}
})
$('.zj2').innerHTML=Math.round( zjg*100)/100
}
//减号
async reduce(e){
let zjg=0
if(e.target.parentNode.parentNode.querySelector('.inputs').value>=2)
{
let bookid
//用于判断减号
let add= 0
// console.log($('.inputs'));
// console.log($('.inputs').value);
bookid= e.target.parentNode.parentNode.querySelector('.ids').innerHTML
// console.log( bookid);
e.target.parentNode.parentNode.querySelector('.inputs').value= e.target.parentNode.parentNode.querySelector('.inputs').value*1-1
let sl=e.target.parentNode.parentNode.querySelector('.inputs').value
await obtain.get('../register/lib/register.php', {
nums:7,
sl,
bookid,
add
}).then(datas => {
// console.log(datas);
});}
e.target.parentNode.parentNode.querySelector('.b').innerHTML=Math.round( e.target.parentNode.parentNode.querySelector('.inputs').value*e.target.parentNode.parentNode.querySelector('.info_5').innerHTML*100)/100
$$('.inp').forEach(v=>{
console.log(2);
// console.log(v.checked);
if(v.checked){
// console.log(v.parentNode.parentNode.querySelector('.b'));
zjg=zjg*1+v.parentNode.parentNode.querySelector('.b').innerHTML*1
}
})
$('.zj2').innerHTML=Math.round( zjg*100)/100
}
//加号
async add(e){
let zjg=0
let bookid
let add= 1
// console.log($('.inputs'));
// console.log($('.inputs').value);
bookid= e.target.parentNode.parentNode.querySelector('.ids').innerHTML
// console.log( bookid);
e.target.parentNode.parentNode.querySelector('.inputs').value= e.target.parentNode.parentNode.querySelector('.inputs').value*1+1
let sl=e.target.parentNode.parentNode.querySelector('.inputs').value
await obtain.get('../register/lib/register.php', {
nums:7,
sl,
add,
bookid
}).then(datas => {
// console.log(datas);
});
e.target.parentNode.parentNode.querySelector('.b').innerHTML=Math.round( e.target.parentNode.parentNode.querySelector('.inputs').value*e.target.parentNode.parentNode.querySelector('.info_5').innerHTML*100)/100
$$('.inp').forEach(v=>{
// console.log(v.checked);
if(v.checked){
console.log(1);
// console.log(v.parentNode.parentNode.querySelector('.b'));
zjg=zjg*1+v.parentNode.parentNode.querySelector('.b').innerHTML*1
}
})
$('.zj2').innerHTML=Math.round( zjg*100)/100
}
//用来获取结点
out(){
// console.log( );
// console.log(1);
// $('.bu2').addEventListener('click',this.add.bind())
}
async obtains(){
await obtain.get('../register/lib/register.php', {
nums:6
}).then(datas => {
// console.log(datas);
let Html=''
JSON.parse(datas).pData.forEach((v,i)=>{
$('.shops').innerHTML= Html+=
`<div class="info fir shop${i}">
<ul>
<div class="ids" style="display: none;">${v.bookid}</div>
<li class="info_1">
<input class="inp inp${i}" type="checkbox"/>
</li>
<li class="info_2">
<img src="${v.src}" width="100px"/>
</li>
<li class="info_3">
<i class="info_i">京品JS</i>JavaScript权威指南(第7七版)
</li>
<li class="info_4">
冰岛幻境
</li>
<li class="info_5">
${v.jg}
</li>
<li class="info_6">
<button class="bu1">-</button>
</li>
<li class="info_7">
<input class='inputs' type="text" value="${v.sl}" />
</li>
<li class="info_8">
<button class="bu2">+</button>
</li>
<li class="info_9">
<b class="b"> ${Math.round(v.jg*v.sl*100)/100}</b>
</li>
<li class="info_10">
删除
</li>
</ul>
</div>`
})
});
//
// console.log(this);
// console.log();
//删除事件
$$('.info_10').forEach(v=>{
v.addEventListener('click',this.scFn.bind(this))
// console.log($('.info_6'));
})
//单选绑定事件
$$('.inp').forEach(v=>{
v. addEventListener('click',this.inpFn.bind(this))
// console.log($('.info_6'));
})
//全选的绑定事件
$$('.qx').forEach(v=>{
v. addEventListener('click',this.qxFn.bind(this))
// console.log($('.info_6'));
})
$$('.bu1').forEach(v=>{
v. addEventListener('click',this.reduce.bind(this))
})
$$('.bu2').forEach(v=>{
v. addEventListener('click',this.add.bind(this))
})
}
}
new Shopshopping.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入样式-->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="./css/shopping.css"/>
<script src="../register/js/obtain.js"></script>
<script src="../index/js/public.js"></script>
</head>
<body>
<!--导航栏开始-->
<div class="nav">
<div class="fir">
<ul class="nav_ul1">
<li>
<i class="iconfont"></i>
<a href="../index/index.html">京东首页</a>
</li>
<li>
<i class="iconfont"></i>
<select>
<option>海外</option>
<option>港澳</option>
<option>大陆</option>
</select>
</li>
</ul>
<ul class="nav_ul2">
<li>
<a href="https://order.jd.com/center/list.action">我的订单</a>
</li>
<li>
<span>|</span>
<a href="https://home.jd.com/">我的京东</a>
</li>
<li>
<span>|</span>
<a href="https://vip.jd.com/">京东会员</a>
</li>
<li>
<span>|</span>
<a href="https://b.jd.com/">企业采购</a>
</li>
<li>
<span>|</span>
<select>
<option>客户服务</option>
<option>客户</option>
<option>商户</option>
</select>
</li>
<li>
<span>|</span>
<select>
<option>网站导航</option>
<option>特殊主题</option>
<option>行业频道</option>
<option>生活服务</option>
<option>更多精彩</option>
</select>
</li>
<li>
<span>|</span>
<a href="https://app.jd.com/">手机京东</a></li>
</ul>
</div>
</div>
<!--导航栏结束-->
<!--搜索框开始-->
<div class="search">
<div class="fir">
<img src=""/>
<div class="search_div">
<input type="text" class="search_text"/>
<button class="search_bt">搜索</button>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题栏开始-->
<div class="title fir">
<h3>全部商品</h3>
<div class="title_1">
<i>配送至：</i>
<select>
<option>海外</option>
<option>大陆</option>
<option>港澳</option>
</select>
</div>
</div>
<!--标题栏结束-->
<!--显示栏开始-->
<div class="typs fir">
<ul>
<li>
<input class="qx" type="checkbox"/>
</li>
<li class="">全选</li>
<li >商品</li>
<li >单价</li>
<li >数量</li>
<li >小计</li>
<li >操作</li>
</ul>
</div>
<!--显示栏结束-->
<!--空白开始-->
<div class="kb fir">
</div>
<!--空白结束-->
<!--商品展示栏开始-->
<div class="shops">
</div>
<!--商品展示栏结束-->
<!--结算栏开始-->
<div class="check fir">
<ul class="check_ul1">
<li>
<input class="qx" type="checkbox" />
</li>
<li class="">
全选
</li>
<li>
<a href="#none">删除选中的商品</a>
</li>
<li>
<a href="#none">移入关注</a>
</li>
<li>
<a href="#none"><b>清理购物车</b></a>
</li>
</ul>
<ul class="check_ul2">
<li class="zj1">总价：</li>
<li >￥ <span class="zj2">0</span></li>
<li>
<button><a href="">去结算</a></button>
</li>
</ul>
</div>
<!--结算栏结束-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script src="./js/shopping.js"></script>
</body>
</html>
扫一扫
3336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
