投稿
  1. 首页
  2. 随笔

京东HTML+css+js+php+数据库

高清多媒体播放器 • 2022-11-7 • 随笔 • 阅读 8

京东HTML+css+js+php+数据库,第1张

京东HTML+css+js+php+数据库

（图片不知道为什么没有传上来有什么问题可以私聊问我）

概括：这是模范京东，功能：登录，注册，首页，商品详情，购物车。大部分数据都在数据库，轮播图图片地址放在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:phpStudyPHPTutorialWWW

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;
}


#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{
    
    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:hover #service_items{
    display:block;
}

li.service:hover>a{
    color: #646fb0;
    background-color:#999;
}

#top_main{
    padding:10px 0;
    height:60px;
}

#search_box{
    
    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;
     
    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{
    
    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


body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, 

dl,dt,dd,ul,ol,li, 

pre, 

form,fieldset,legend,button,input,textarea, 

th, td 

{
	margin: 0;
	padding: 0;
}

body,button,input,select,textarea 

	 {
	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;
}

	
ul,ol{
	list-style: none;
}

	
a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

legend{
	color: #000;
}

fieldset,img{
	border: 0;
}

button,input,select,textarea{
	font-size: 100%;
}

	
	
table{
	border-collapse: collapse;
	border-spacing: 0;
}

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+=`
          
           
  • 
           
           
               
                   ¥
                   ${v.money}
               
           
           
               
                   java从入门到精通（第五版）
                   
                   ${v.details}
               
           
           
               11万+条评价
           
           
                   清华大学出版社
                   
               
           
               自营
               放心购
               赠
               加入购物车
               查看详细
               ${v.id}
       
    • 

           `
      });

          });
      }
  }
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+=``;
      })

      $('#cont').innerHTML=html+' 
      '+' <>'
      
         })
         //调用创建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

      



    
    京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
    
       
    
    
    
    
    
    
    
    
    
    




    
    
        
            
                
                湖南
            
            
                
        
                    
      • 
                        欢迎
                        
                         注销
                        你好，请登录
                        免费注册
                    
        • 
                    
      • 
                    
      • 
                        我的订单
                    
        • 
                    
      • 
                    
      • 
                        我的京东
                        
          
                                    
        • 待处理订单
          • 
                                    
        • 返修退货
          • 
                                    
        • 降价商品
          • 
                                
        
                                
          
                                    
        • 我的问答
          • 
                                    
        • 我的关注
          • 
                                
        
                            
                            
                                
          
                                    
        • 我的金豆
          • 
                                    
        • 我的白条
          • 
                                
        
                                
          
                                    
        • 我的优惠券
          • 
                                    
        • 我的理财
          • 
                                
        
                            
                        
                    
        • 
                    
      • 
                    
      • 
                        京东会员
                    
        • 
                    
      • 
                    
      • 
                        企业采购
                    
        • 
                    
      • 
                    
      • 
                        客户服务
                        
        • 
                    
      • 
                    
      • 
                        网站导航
                        
        • 
                    
      • 
                    
      • 
                        手机京东
                        
                            
                            
                        
                    
        • 
                
      
            
        
    
    

    
    
        
            京东
        
        
            
            
            
            我的购物车
            0
        
        
            
        
                
      • 飞利浦电视
        • 
                
      • 新品上市
        • 
                
      • 空调好物
        • 
            
      
        
        
            
        
                
      • 
                    秒杀
                
        • 
                
      • 
                    优惠券
                
        • 
                
      • 
                    PLUS会员
                
        • 
                
      • 
                    品牌闪购
                
        • 
                
      • 
                    拍卖
                
        • 
                
      • 
                    京东家电
                
        • 
                
      • 
                    京东超市
                
        • 
                
      • 
                    京东生鲜
                
        • 
                
      • 
                    全球国际
                
        • 
                
      • 
                    京东金融
                
        • 
            
      
        
    
    

    
    
        
            
                
                    
        
                        
      • 
                            家用电器
                        
        • 
                        
      • 
                            手机 / 运营商 / 数码
                        
        • 
                        
      • 
                            电脑 / 办公
                        
        • 
                        
      • 
                            家居 / 家具 / 家装 / 厨具
                        
        • 
                        
      • 
                            男装 / 女装 / 童装 / 内衣
                        
        • 
                        
      • 
                            美妆 / 个护清洁 / 宠物
                        
        • 
                        
      • 
                            女鞋 / 箱包 / 钟表 / 珠宝
                        
        • 
                        
      • 
                            男鞋 / 运动 / 户外
                        
        • 
                        
      • 
                            房产 / 汽车 / 汽车用品
                        
        • 
                        
      • 
                            母婴 / 玩具乐器
                        
        • 
                        
      • 
                            食品 / 酒类 / 生鲜 / 特产
                        
        • 
                        
      • 
                            艺术 / 礼品鲜花 / 农资绿植
                        
        • 
                        
      • 
                            医药保健 / 计生情趣
                        
        • 
                        
      • 
                            图书 / 文娱 / 教育 / 电子书
                        
        • 
                        
      • 
                            机票 / 酒店 / 旅游 / 生活
                        
        • 
                        
      • 
                            理财 / 众筹 / 白条 / 保险
                        
        • 
                        
      • 
                            安装 / 维修 / 清洗 / 二手
                        
        • 
                        
      • 
                            工业品
                        
        • 
                    
      
                
                
                    
                   
                

                
                    
                        
                        
                            
                                
                            
                            
                                
      Hi~欢迎逛京东
      
                                
      
                                    登录 |
                                    注册
                                
      
                            
                        
                        
                        
                            新人福利
                            PLUS会员
                        
                    
                    
                    
                        
                            京东快报 
                            更多
                                >
                            
                        
                        
                            
                                公告
                                2020年春节物流服...
                            
                            
                                最新
                                N95口罩今年你备了...
                            
                            
                                最新
                                一家独霸中国口罩市...
                            
                            
                                最新
                                小米10配置出炉！5...
                            
                        
                    
                    
                        
                    
                
            
        
    
    

    
        
       
    
      

    
    
        
            
                
        
                    
      • 
                        多
                        品类齐全，轻松购物
                    
        • 
                    
      • 
                        快
                        多仓直发，极速配送
                    
        • 
                    
      • 
                        好
                        正品行货，精致服务
                    
        • 
                    
      • 
                        省
                        天天低价，畅选无忧
                    
        • 
                
      
            
        
        
            
      
                
      购物指南
      
                
      购物流程
      
                
      会员介绍
      
                
      生活旅行
      
                
      常见问题
      
                
      大家电
      
                
      联系客服
      
            
      
            
      
                
      配送方式
      
                
      上门自提
      
                
      211限时达
      
                
      配送服务查询
      
                
      配送费收取标准
      
                
      海外配送
      
            
      
            
      
                
      支付方式
      
                
      货到付款
      
                
      在线支付
      
                
      分期付款
      
                
      公司转账
      
            
      
            
      
                
      售后服务
      
                
      售后政策
      
                
      价格保护
      
                
      退款说明
      
                
      返修/退换货
      
                
      取消订单
      
            
      
            
      
                
      特色服务
      
                
      夺宝岛
      
                
      DIY装机
      
                
      延保服务
      
                
      京东E卡
      
                
      京东通信
      
                
      京鱼座智能
      
            
      
            
      
                
      京东自营覆盖区县
      
                
      
                    
      京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
      
                    查看详情
                
      
            
      
        
        
            
      
                关于我们|
                联系我们|
                联系客服|
                合作招商|
                商家帮助|
                营销中心|
                手机京东|
                友情链接|
                销售联盟|
                京东社区|
                风险监测|
                隐私政策|
                京东公益|
                English Site|
                Media & IR
            
      
            
      
                京公网安备 11000002000088号|
                京ICP证070359号|
                互联网药品信息服务资格证编号(京)-经营性-2014-0008|
                新出发京零 字第大120007号
            
      
            
      
                互联网出版许可证编号新出网证(京)字150号|
                出版物经营许可证|
                网络文化经营许可证京网文[2014]2148-348号|
                违法和不良信息举报电话：4006561155
            
      
            
      
                Copyright © 2004 - 2020 京东JD.com 版权所有|
                消费者维权热线：4006067733经营证照|
                (京)网械平台备字(2018)第00003号|
                营业执照
            
      
            
      
                Global Site|Сайт России|
                Situs Indonesia|
                Sitio de España|
                เว็บไซต์ประเทศไทย
            
      
            
      
                京东旗下网站：京东钱包|
                京东云

      4.商品详情页面

      功能点击加和减改变数量，点击加入购物车加入购物车，如果购物车有这个物品，以这上面为准

      登录注册按钮和首页一样

      main.css

      


	
	天天生鲜-商品详情页
	
	



    
	
		
			欢迎来到京东商品!
			
				欢迎
				
				注销
				登录
				|
				 注册
				|
				我的购物车
			
		
	
	
		
		
			
			
		
		
			我的购物车
			0
		
	
	
	
		
			
				全部商品分类 
			
			
        
				
      • 首页
        • 
				
      • js
        • 
				
      • 抽奖
        • 
			
      
		
	
	
		js书籍
		新鲜水果
		>
		商品详情
	
	
		
		
			【现货速发】Javascript权威指南(第7七版) 犀牛书
			
      ${v.details}
      
			
				￥${v.money}
				单位：500g
			
			
				数量：
				
					
					+
					-
				
			
			总价：16.80元
			
				立即购买
				加入购物车

      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=``
             $('.goods_detail_list p').innerHTML=`${v.details}`
            $('.show_prize em').innerHTML=`${v.money}`
           
            localStorage.setItem('money',v.money)
        })
    //  console.log(data);
  
      });

    }
}
new Indexs

      indexs.html

      


	
	天天生鲜-商品详情页
	
	



    
	
		
			欢迎来到京东商品!
			
				欢迎
				
				注销
				登录
				|
				 注册
				|
				我的购物车
			
		
	
	
		
		
			
			
		
		
			我的购物车
			0
		
	
	
	
		
			
				全部商品分类 
			
			
        
				
      • 首页
        • 
				
      • js
        • 
				
      • 抽奖
        • 
			
      
		
	
	
		js书籍
		新鲜水果
		>
		商品详情
	
	
		
		
			【现货速发】Javascript权威指南(第7七版) 犀牛书
			
      ${v.details}
      
			
				￥${v.money}
				单位：500g
			
			
				数量：
				
					
					+
					-
				
			
			总价：16.80元
			
				立即购买
				加入购物车

      登录页面

      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 Login

      login.html

      


    
    京东-欢迎登陆
    
    
    
    
    
    




    
        京东首页
        
    
    
        登录页面，调查问卷
        
    





    
        
        
      依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。
      
    
    
        
            
                
      京东不会以任何理由要求您转账汇款，谨防诈骗。
      
                
            
            
                扫码登录
                账户登录
            
            
                
                    
                    
                    电话
                    密码
                    忘记密码
                    
                
            
            
                
                    QQ
                
                
                    微信
                
                
                   立即注册
                
            
        
    





    
      
        关于我们 |
        联系我们 |
        人才招聘 |
        商家入驻 |
        广告服务 |
        手机京东 |
        友情链接 |
        销售联盟 |
        京东社区 |
        京东公益 |
        English Site
    
      
    
      Copyright © 2004-2020  京东JD.com 版权所有

      注册页面

      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 {
    
    border-color: #7abd54;
    
    outline: none;
    
}
.divzhuce input:focus  {
    
    border-color: #7abd54;
    
    outline: none;
    
}
.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 Register

      mysql.php

      register.php

      $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

      

 
	
		
		
        
        
	
 
	
		
		导航
		
			
			欢迎注册
		
		tab部分
		
			
 
				企业用户注册
				
			
			
				*用户名： 
				
					 
				
				4-16位数字字母或者汉字
			
 
			
				*密码：
				
					 
				
				4-20位数字和字母组成
			
 
			
				*验证密码：
				
					 
				
				和密码相同
			
 
			
				*手机号：
				
					 
				
				请输入你的手机号
			
            
				*验证码：
				
					 
				
				重新获取验证码
			
			
				*短信验证码：
				
					 
				
				获取短信验证码
			
			
				
					
					我已经同意用户注册协议
				
			
			
				
				
			
		
		底部

      购物车页面

      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+=
                     `
                      
        
                      ${v.bookid}
                          
      • 
                              
                          
        • 
                          
      • 
                              
                          
        • 
                          
      • 
                              京品JSJavascript权威指南(第7七版)
                      
                          
        • 
                          
      • 
                               冰岛幻境
                               
                          
        • 
                          
      • 
                             ${v.jg}
                          
        • 
                          
      • 
                              
                          
        • 
                          
      • 
                              
                          
        • 
                          
      • 
                              
                          
        • 
                          
      • 
                               ${Math.round(v.jg*v.sl*100)/100}
                          
        • 
                          
      • 
                              删除
                          
                  
        • 
                      
      
                  `
                  })
          
              });
            //  
            //   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 Shop

      shopping.html

      

	
		
		
		
		
		
		
		
		

	
	
		
		
			
			
				
        
					
      • 
						
						京东首页
					
        • 
					
      • 
						
						
					
        • 
				
      
				
				
				
        
					
      • 
						我的订单
						
					
        • 
					
      • 
						|
						我的京东
						
					
        • 
					
      • 
						|
						京东会员
						
					
        • 
					
      • 
						|
						企业采购
						
					
        • 
					
      • 
						|
						
						
					
        • 
					
      • 
						|
						
						
					
        • 
					
      • 
						|
						手机京东
        • 
					
				
      
				
			
			
			
		
		
		
		
			
				
				
				
				
				
				
				
			
			
					
			
		
		
		
		
		
				
			
				全部商品
				
					配送至：
					
				
			
		
		
		
		
			
				
        
					
      • 
						
					
        • 
					
      • 全选
        • 
					
      • 商品
        • 
					
      • 单价
        • 
					
      • 数量
        • 
					
      • 小计
        • 
					
      •  *** 作
        • 
				
      
			
			
			
		
		
		
		
			
		
		
		
		
		
			
		
		
		
		
			
        
				
      • 
					
					
				
        • 
				
      • 
					全选
				
        • 
				
      • 
					删除选中的商品
				
        • 
				
      • 
					移入关注
				
        • 
				
      • 
					清理购物车
				
        • 
			
      
			
			
        
				
      • 总价：
        • 
				
      • ￥ 0
        • 
				
      • 
					
				
        •

      欢迎分享，转载请注明来源：内存溢出

      原文地址: https://outofmemory.cn/zaji/4686398.html

      赞 (0)
      打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
      高清多媒体播放器 高清多媒体播放器 一级用户组
      0 0
      上一篇 2022-11-07
      下一篇 2022-11-07

      发表评论

      登录后才能评论

      评论列表（0条）

      Copyright © 2022 内存溢出 版权所有 湘ICP备2022025235号 Powered by outofmemory.cn

      保存