基于jQuery实现挂号平台首页源码

第二个版本：点击预约挂号可跳转到排班表，获取之后7个星期的排班

先放图

首先是index.html

 
 
 
 
 
 
 


 
  
  
   
010-114/116114电话预约
   
欢迎来到城市医院预约挂号统一平台 请 
   登录
   注册    
   帮助中心
  
 
 
 
  
   
   
    医院
    
     科室
     疾病
     医院
    
    
     
   
  
 
 
 
  
   首页
   按医院挂号
   按科室挂号
   按疾病挂号
   最新公告
   社会知名医院
  
 
 
 
  
   
    
     北京协和医院
     关注医院
    
    
     等级：三级甲等
     区域：东城区
     分类：中国医科院所属医院
    
   
   
    
    
     医院（Hospital）一词是来自于拉丁文原意为“客人”。
     医院（Hospital）一词
     医院（Hospital）一词是来自于拉丁文
     医院（Hospital）一词是来自于拉丁文原意为“客人”，因为一开始设立时，是供人避难，还备有休息间，使来者舒适，有招待意图。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。
    
    
   
  
 
 
 
  
   
    
    
     预约挂号
     医院介绍
     预约须知
     停诊信息
     查询取消
    
    
    
     
     
      


 
开放预约科室


 
2301
 

  特殊门诊科
  特殊门诊科
  特殊门诊科
  特殊门诊科
  特殊门诊科
  特殊门诊科
  特殊门诊科
  特殊门诊科
  特殊门诊科
  特殊门诊科
 


 
专科
 

  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
 


 
内科
 

  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
 


 
内科
 

  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
  麻醉科
 

      
      
      
 预约规则 (更新时间，每日8:30更新)

 

  

   
预约周期：
   
7天
  
  

   
房号时间：
   
8:30
  
  

   
预约周期：
   
(更新时间，每日8:30更新)(更新时间，每日8:30更新)
  
  

   
预约周期：
   
(更新时间，每日8:30更新)
  
  

   
特殊规则：
   
北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。
北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。
  
 

      
     
     
     
      
北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。
      
北京协和医院在中国乃至世界享有盛名。医院成立于1921年。现任院长赵玉沛。北京协和医院是中国最早承担外宾医疗任务的单位，医院专门设立外宾和高干门诊部，开设专门的高干、外宾、特需病区。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。
      
2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。
      
2018年12月4日消息，被国家卫健委公布为首批肿瘤多学科诊疗试点医院。 [2] 2019年11月10日，复旦版《2018年度中国医院排行榜》发布，北京协和居首。
     
     
     
      
北京协和医院预约挂号须知
      
      
电话预约挂号：010(24小时）
      
      
网络预约挂号：010(24小时）
北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院。
      
      
一、预约时间范围：010(24小时）
1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
3、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
      
      
二、预约实名制：
北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)。
      
      
三、预约挂号：
1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
3、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
      
      
四、医生停诊
2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》。
      
      
五、医生停诊
2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》。
      
      
六、爽约处理：
1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
      
      
七、其他注意事项：
1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。
2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。

      
北京协和医院
     
     
     
      
停诊信息
      


 
日期
 
星期
 
时段
 
科室
 
特长
 
职称
 
挂号费
 
可挂号数
 
剩余号数
 
替换方式


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换


 
2019-11-14
 
1
 
上午
 
呼吸内科门诊
 
 
 
主治医师
 
5.00
 
0
 
0
 
不可替换

      
     
     
     
      

 预约识别码：
 
 

      
     
    
      
  
 
 
 
  Copyright © 2019 xxx版权所有
 
 
 

layout.css

body{
 margin:0;
 padding:0;
}
.clearfix:after{
 content:'';
 display: block;
 height:0;
 line-height:0;
 clear:both;
 zoom:1;
}
.wrap{
 width:1000px;
 margin:0 auto;
 position: relative;
}
.top{
 height:30px;
 background-color:#f5f5f5;
}
.header{
 height:92px;
}
.nav{
 height:36px;
 background-color:#60bff2;
}
.content{
 width:1000px;
 margin:0 auto;
 padding:10px 0 38px 0;
 margin-top: 42px;
}
.content-tab{
 float:left;
 width:1000px;
 background-color:#eee;
}
.content-news{
 float:right;
 width:285px;
 border:1px solid #ccc;
}
.footer{
 height:132px;
 padding:25px 0;
 background-color:#eceef2;
}

base.css

p{
 margin:0;
 padding:0;
 display: inline-block;
}
a{
 text-decoration: none;
}
select,input{
 border:none;
 outline:none;
}
.right{
 float: right !important;
}


.top{
 line-height:30px;
 font-size:13px;
 color:#868686;
}
.top .call{
 float:left;
 padding-left:20px;
 background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{
 float: right;
}
.top a{
 color:#2da5e1;
 padding-left:10px;
}


.header .logo{
 width:402px;
 height:74px;
 padding:9px 0;
 display:inline-block;
}
.header .logo img{
 width:100%;
 height:100%;
}
.header .search{
 width:326px;
 height:38px;
 position: absolute;
 right:0;
 top:29px;
 
}


.nav .link{
 display: inline-block;
 float: left;
 padding-left:30px;
 line-height:36px;
 color:#fff;
 font-size:16px;
 min-width:80px;
 text-align: center;
}
.nav .link_focus{
 color: #fff;
 background-color: #1fa4f0;
 padding: 0 20px;
}
.nav a:hover{
 color:#d7f3ff;
}
.nav .menu{
 width:130px;
 padding-right:30px;
 background-color:#1fa4f0;
 position: relative;
}
.nav .menu .menu-list{
 background-color:#1fa4f0;
 width:100%;
 height:423px;
 position: absolute;
 left:0;
 top:36px;
}


.about{
 height:250px;
 margin-top: 30px;
}
.about .wrap{
 background:#f5f5f5;
 width:960px;
 height:230px;
 padding: 20px;
}
.a-title{
 width:1000;
 height:50px;
 border-bottom:1px solid #ddd;
}
.a-title-left{
 float:left;
}
.a-title-right{
 float:right;
}
.a-title-right span{
 font-size: 13px;
 margin-right:5px;
}
.a-title-right span a{
 color:blue;
}
.yellow{
 color: #fec009;
 font-size: 13px;
 margin-left: 5px;
}
.a-content{
 width:100%;
 height:150px;
}
.a-content-left{
 float:left;
 width:200px;
 padding-top: 10px;
}
.a-content-center{
 float:left;
 width:450px;
 font-size:13px;
 padding: 23px;
}
.a-content-center .text{
 position: relative;
 height: 24px;
 line-height: 24px;
 font-size: 12px;
 text-indent: 28px;
 color:#868686;
}
.a-content-center .text:nth-child(2) .t-span:before {
 background-position-y: -18px;
}
.a-content-center .text:nth-child(3) .t-span:before {
 background-position-y: -36px;
}
.a-content-center .text:nth-child(4) .t-span:before {
 background-position-y: -54px;
}
.t-span:before{
 content: '';
 display: block;
 width: 22px;
 height: 18px;
 position: absolute;
 left: 0;
 top: 1px;
 background: url(../img/icon-tel.png) 0 0 no-repeat;
}
.a-content-right{
 float: right;
 width: 250px;
 padding-top: 10px;
}
.a-content-right img{
 width: 249px;
 height: 172px;
}


.table1{
 border:1px solid #f5f5f5;
 width: 70%;
 float: left;
}
.bg1{
 background-color: #f5f5f5;
 height: 30px;
 line-height: 30px;
}
.bg2 {
 width: 20%;
 background-color: rgb(242,252,254);
 text-align: center;
 vertical-align: top;
 color:#868686;
 font-size:15px;
}
.table1 td{
 padding:10px;
}
.bg1 td{
 padding-left: 25px;
}
.table1 td a{
 color: #000;
 display: inline-block;
 width: 123px;
 font-size: 15px;
 height: 25px;
}

.t-about {
 text-indent: 2em;
 font-size: 15px;
 line-height: 25px;
 margin-bottom: 10px;
}

.p-title{
 display: block;
 font-weight:bold;
 font-size:18px;
 text-align:center;
 margin-bottom: 15px;
 margin-top: 15px;
}
.p-about{
 display: block;
 font-size:14px;
 margin-bottom: 15px;
 line-height: 25px;
}
.p-about span{
 font-weight:bold;
}
.p-footer{
 margin-top: 35px;
 display: block;
 text-align: center;
 font-weight:bold;
}

.table2{
 width:100%;
}
.table2 td {
 padding: 10px;
 font-size: 13px;
 text-align: center;
}

.inner{
 margin: 0 auto;
 height: 250px;
 border-top: 1px solid #eee;
 border-bottom: 1px solid #eee;
 text-align: center;
 margin-top: 50px;
}
.i-wrap{
 width: 400px;
 margin: 0 auto;
 margin-top: 90px;
}
.i-wrap input{
 border:1px solid #ddd;
 height: 23px;
}
.i-wrap input[type="button"]{
 width: 101px;
 background-color: #60bff2;
 color: #fff;
 height: 27px;
 border:none;
}

.content-news{
 background-color:#fff;
 border:1px solid #f4f6fa;
}
.content-news .caption2{
 height:48px;
 line-height:48px;
 background-color:#f4f6f6;
 text-indent:20px;
 color:#868686;
 font-size:15px;
}
.content-news .more{
 font-size:12px;
 color:#00b3ea;
}
.content-news .list{
 font-size:12px;
 padding: 5px;
 overflow-y: scroll;
 height:300px;
}
.content-news .list .link{
 display: block;
 color:#969696;
}
.table3 td{
 height: 21px;
 line-height: 21px;
 color:#868686;
}
.table3 td.left{
 width: 26%;
 vertical-align:top;
 color:#444;
}
.content-tab{
 background:none;
}
.content-tab .caption{
 height:34px;
 line-height:34px;
 margin-bottom: 25px;
 border-bottom:1px solid #00b3ea;
}
.content-tab .caption .item{
 display: block;
 width:112px;
 height:34px;
 text-align:center;
 float:left;
 color:#00b3ea;
 font-size: 15px;
}
.content-tab .caption .item_focus{
 background-color:#60bff2;
 color:#fff;
}
.content-tab .block{
 float: left;
 width:1000px;
}


.footer{
 height: 70px;
 line-height: 70px;
 text-align: center;
 font-size: 12px;
 color: #666;
}

ui.css

.ui-search{
 background:url(../img/ui-search.jpg) center no-repeat;
 font-size:14px;
 color:#fff;
}
.ui-search-selected{
 width:70px;
 height:38px;
 line-height:38px;
 position: absolute;
 left:0;
 top:0;
 text-indent:14px;
}
.ui-search-select-list{
 display: none;
 position: absolute;
 width:67px;
 line-height:24px;
 background-color:#fff;
 box-shadow:3px 3px 5px rgba(0,0,0,.2);
 left:2px;
 top:36px;
 z-index:2;
}
.ui-search-select-list a{
 display: block;
 color:#a5a2a2;
 text-align:center;
}
.ui-search-select-list a:hover{
 background-color:#ebeef5;
}
.ui-search-input{
 width:208px;
 height:26px;
 position: absolute;
 top:5px;
 left:71px;
 line-height:26px;
 font-size:13px;
 color:#a5a2a2;
}
.ui-search-submit{
 display: block;
 position: absolute;
 right:0;
 top:1px;
 width:40px;
 height:36px;
}


.ui-menu{}
.ui-menu-item{
 height:22px;
 line-height:22px;
 padding:8px 5px 9px 6px;
 margin-left:2px;
}
.ui-menu-item:hover{
 background-color:#fff;
}
.ui-menu-item-department{
 float: left;
 height:22px;
 line-height:22px;
 position: relative;
 padding-left:30px;
 font-size:13px;
}
.ui-menu-item-department:before{
 content:'';
 display: block;
 width:22px;
 height:21px;
 position: absolute;
 left:0;
 top:1px;
 background:url(../img/icon-menu.jpg) -22px 0 no-repeat;
}
.ui-menu-item:nth-child(2) .ui-menu-item-department:before{
 background-position-y:-22px;
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
 background-position-y:-66px;
}
.ui-menu-item-disease{
 font-size:12px;
 float: right;
 padding-left:5px;
 color:#d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department:before{
 background-position:0;
}
.ui-menu-item:hover .ui-menu-item-department{
 color:#333;
}
.ui-menu-item:hover .ui-menu-item-disease{
 color:#868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
 display:block;
}
.ui-menu-item-detail{
 display: none;
 position: absolute;
 width:500px;
 height:393px;
 padding:20px 10px 10px 29px;
 background:#fff url(../img/bg-menu.jpg) center no-repeat;
 top:0;
 left:190px;
 box-shadow:5px 5px 2px rgba(0,0,0,.1);
 z-index: 99;
}

.ui-menu-item-detail-group{
 padding-bottom:20px;
 text-align:left;
}
.ui-menu-item-detail-group-caption{
 width:100%;
 display: block;
 height:34px;
 line-height:34px;
 color:#666;
 font-size:16px;
 font-weight:bold;
}
.ui-menu-item-detail-group-list{
 line-height:23px;
}
.ui-menu-item-detail-group-list a{
 display: inline-block;
 color:#868686;
 margin-right:12px;
 padding-bottom:5px;
}
.ui-menu-item-detail-group-list a:after{
 content:'|';
 color:#ddd;
 padding-left:12px;
}


.ui-backTop{
 display: none;
 position: fixed;
 right: 2px;
 bottom:2px;
 z-index:9;
 width:40px;
 height:40px;
 color:#fff;
 background:rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
 background:rgba(102,102,102,.9);
}
.ui-backTop:hover:after{
 content:'回到顶部';
 display: block;
 line-height:20px;
 text-align:center;
}


.ui-slider{
 width:544px;
 height:414px;
 position: relative;
 overflow:hidden;
}
.ui-slider-wrap{
 width:99999px;
 height:414px;
 position: absolute;
 left:0;
 right:0;
 transition:all .5s;
}
.ui-slider-wrap .item{
 display: block;
 float: left;
 width:544px;
 height:414px;
}
.ui-slider-arrow{
 width:544px;
 height:40px;
 position: absolute;
 margin-top:-20px;
 top:50%;
}
.ui-slider-arrow .item{
 display: block;
 width:40px;
 height:40px;
 position: absolute;
 top:0;
 background:url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
 left:0;
}
.ui-slider-arrow .right{
 right:0;
 background-position: -40px 0;
}
.ui-slider-process{
 width:544px;
 height:12px;
 text-align:center;
 position: absolute;
 left:0;
 bottom:20px;
}
.ui-slider-process .item{
 display: inline-block;
 width:16px;
 height:16px;
 background:url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
 background-position: -23px 0;
}

ui.js

//ui-search定义
$.fn.UISearch=function(){
 var ui=$(this);
 $('.ui-search-selected',ui).on('click',function(){
  $('.ui-search-select-list').show();
  return false;
 });
 $('.ui-search-select-list a',ui).on('click',function(){
  $('.ui-search-selected').text($(this).text());
  $('.ui-search-select-list').hide();
  return false;
 });
 $('body').on('click',function(){
  $('.ui-search-select-list').hide();
 })
}

//ui-tab

$.fn.UiTab=function(header,content,focus_prefix){
 var ui=$(this);
 var tabs=$(header,ui);
 var cons=$(content,ui);
 var focus_prefix=focus_prefix||'';

 tabs.on('click',function(){
  var index=$(this).index();
  tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');
  cons.hide().eq(index).show();
  return false;
 })
}

//ui-backTop
$.fn.UiBackTop=function(){
 var ui=$(this);
 var el=$('');
 ui.append(el);

 var windowHeight=$(window).height();
 $(window).on('scroll',function(){
  var top = $("body").scrollTop() || $(document).scrollTop();
  if(top>windowHeight){
   el.show();
  }else{
   el.hide();
  }
 });
 el.on('click',function(){
  $(window).scrollTop(0);
 });
}

//ui-排班表
$.fn.UiDate=function(){
 // 循环计算日期
 var table=$('.d-date-table');
 for(var i=0;i<49;i++){
  //生成单日元素
  var column=$("");
  table.append(column);
  //插入星期日期
  var div1=$("");
  column.append(div1);
  var span1=$("");
  var br=$("
");
  var span2=$("");
  div1.append(span1);
  div1.append(br);
  div1.append(span2);
  //插入其他元素
  var div2=$("");
  var div3=$("约满");
  var div4=$("");
  column.append(div2);
  column.append(div3);
  column.append(div4);

  var dayText=$('.dayText').eq(i);
  var dateText=$('.dateText').eq(i);
  //计算明天日期
  var week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  var data = new Date();
  data.setTime(data.getTime()+24*60*60*1000*i);
  var year = data.getFullYear();//年
  var month= data.getMonth()+1;//月
  var date = data.getDate();//日
  var day= week[data.getDay()];//星期
  //显示星期和日期
  dayText.html(day);
  dateText.html(year+'-'+month+'-'+date);
 }

 //获取元素
 var leftBtn=$('#leftBtn');
 var rightBtn=$('#rightBtn');
 var table=$('.d-date-table');
 //预定义
 var current=0;
 var width=$('.d-date').width();
 //点击事件
 leftBtn.on('click',function(){
  current--;
  if(current<=0){
   current=0;
  }
  table.css('left',current*width*-1);
 });
 
 rightBtn.on('click',function(){
  current++;
  if(current>=6){
   current=6;
  }
  table.css('left',current*width*-1);
 });
 
 console.log(current);
}


//页面的脚本逻辑
$(function(){
 $('.ui-search').UISearch();
 $('.content-tab').UiTab('.caption>.item','.block>.item');
 $('body').UiBackTop();
 $('body').UiDate();
})

然后是detail.html

 
 
 
 
 
 
 
 
 


 
  
  
   
010-114/116114电话预约
   
欢迎来到城市医院预约挂号统一平台 请 
   登录
   注册    
   帮助中心
  
 
 
 
  
   
   
    医院
    
     科室
     疾病
     医院
    
    
     
   
  
 
 
 
  
   首页
   按医院挂号
   按科室挂号
   按疾病挂号
   最新公告
   社会知名医院
  
 
 
 
  
   
    
     北京协和医院
     关注医院
    
    
     等级：三级甲等
     区域：东城区
     分类：中国医科院所属医院
    
   
   
    
    
     医院（Hospital）一词是来自于拉丁文原意为“客人”。
     医院（Hospital）一词
     医院（Hospital）一词是来自于拉丁文
     医院（Hospital）一词是来自于拉丁文原意为“客人”，因为一开始设立时，是供人避难，还备有休息间，使来者舒适，有招待意图。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。
    
    
   
  
 
 
 
   
   
    
     科室排班表
     返回科室列表
    
   
   
    
     
      
     
     上午
     下午
     晚上
    
    
     
      
      

 星期二
 

 2019-11-20


约满

      
     
    
    
     
      
     
     
    
    
     预约规则

     预约周期：
     7天

     预约周期：
     7天

     预约周期：
     7天

     退号时间：
     7天

     特殊规则：
     这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。
    
    
     ！您还没有选择就诊日期
    
   
   
     
  
 
 
 
  Copyright © 2019 XXX版权所有
 
 
 

detail.css

.content{
 margin-bottom:30px;
}
.d-title{
 margin-bottom:10px;
}
.span1 a{
 color:#60bff2;
 font-size: 13px;
 margin-left:5px;
}

.d-container{
 width: 1000px;
 height: 320px;
 border: 1px solid #f5f5f5;
}

.d-left{
 width:33px;
 float: left;
 height: 320px;
 border: 1px solid #f5f5f5;
 cursor:pointer;
 position: relative;
 z-index:10;
}
.d-left-item{
 height: 90px;
 background-color:rgb(241,248,255);
 line-height: 90px;
 text-align:center;
 font-size:14px;
}

.d-date{
 width:650px;
 float: left;
 height: 320px;
 border: 1px solid #f5f5f5;
 overflow: hidden;
 position: relative;
}

.d-date-table{
 width:4550px;
 position: relative;
 transition:all 1s;
 left:0;
}

.d-date-table-column{
 width:92px;
 border: 1px solid #f5f5f5;
 border-left:0;
 border-bottom:0;
 height: 320px;
 float:left;
}
.d-date-table-column:nth-child(7n){
 border-right:0;
}
.d-date-table-title{
 height: 44px;
 border-bottom: 1px solid #f5f5f5;
 border-right: 1px solid #f5f5f5;
 border-left:0;
 text-align:center;
}
.d-date-table-title span{
 font-size:12px;
 color:#868686;
}
.d-date-table-item{
 height: 90px;
 border: 1px solid #f5f5f5;
 border-left:0;
 border-bottom:0;
}
.d-date-table-item.spe{
 text-align: center;
 line-height: 90px;
 background-color:rgb(225,238,254);
 color:#60bff2;
 font-size:14px;
}
.d-date-table-item:last-child{
 border-bottom:0;
}

.d-right{
 width:33px;
 float: left;
 height: 320px;
 border: 1px solid #f5f5f5;
 cursor:pointer;
 position: relative;
 z-index:10;
}
.d-right-item{
 background-color:rgb(241,248,255);
 height: 270px;
}

.d-rule{
 width: 243px;
 height: 286px;
 float: left;
 padding: 17px;
 overflow-y: scroll;
}
.d-rule span{
 font-size:13px;
 color:#868686;
 display: block;
 height:25px;
}
.d-rule .d-rule-title{
 font-size:18px;
 color:#000;
 margin-bottom:10px;
}
.d-rule .d-rule-subtitle{
 font-size:14px;
 color:#000;
}
.d-footer{
 text-align: center;
 height:70px;
 line-height:70px;
 font-size:16px;
 color:#868686;
 border: 1px solid #f5f5f5;
 border-top:0;
 clear:both;
}

总结

以上所述是小编给大家介绍的基于jQuery实现挂号平台首页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！