网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑：jimmy 日期: 2024/12/27 浏览：3 次 )

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

先放图

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

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

首先是index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
 <!-- 框架 -->
 <link rel="stylesheet" href="css/layout.css" rel="external nofollow" rel="external nofollow" >
 <!-- 基本样式 -->
 <link rel="stylesheet" href="css/base.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="css/ui.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <!-- 顶部 -->
 <div id="top" class="top"> 
  <div class="wrap">
   <p class="call">010-114/116114电话预约</p>
   <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;
   <a href="">登录</a>
   <a href="">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
   <a href="">帮助中心</a></p>
  </div>
 </div>
 <!-- 头部 -->
 <div id="header" class="header">
  <div class="wrap">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="logo"><img src="/UploadFiles/2021-04-02/logo.png">


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模块样式*/
.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模块样式*/
.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;
 /*background-color:orange;*/
}

/*nav模块样式*/
.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;
}
/*content模块样式*/
/*预约挂号*/
.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{}
.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幻灯片组件*/
.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
/**
 * [UiTab description]
 * @param {[type]} header [tab选项卡切换部分classname]
 * @param {[type]} content [tab选项卡内容区域部分classname]
 * @param {[type]} focus_prefix [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=$('<a class="ui-backTop" href="#0" rel="external nofollow" ></a>');
 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=$("<div class='d-date-table-column'></div>");
  table.append(column);
  //插入星期日期
  var div1=$("<div class='d-date-table-title'></div>");
  column.append(div1);
  var span1=$("<span class='dayText'></span>");
  var br=$("<br>");
  var span2=$("<span class='dateText'></span>");
  div1.append(span1);
  div1.append(br);
  div1.append(span2);
  //插入其他元素
  var div2=$("<div class='d-date-table-item'></div>");
  var div3=$("<div class='d-date-table-item spe'>约满</div>");
  var div4=$("<div class='d-date-table-item'></div>");
  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







<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>detail</title>
 <!-- 框架 -->
 <link rel="stylesheet" href="css/layout.css" rel="external nofollow" rel="external nofollow" >
 <!-- 基本样式 -->
 <link rel="stylesheet" href="css/base.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="css/ui.css" rel="external nofollow" rel="external nofollow" >
 <!-- 科室排班表样式 -->
 <link rel="stylesheet" href="css/detail.css" rel="external nofollow" >
</head>
<body>
 <!-- 顶部 -->
 <div id="top" class="top"> 
  <div class="wrap">
   <p class="call">010-114/116114电话预约</p>
   <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;
   <a href="">登录</a>
   <a href="">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
   <a href="">帮助中心</a></p>
  </div>
 </div>
 <!-- 头部 -->
 <div id="header" class="header">
  <div class="wrap">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="logo"><img src="/UploadFiles/2021-04-02/logo.png">


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实现挂号平台首页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
上一篇：JS正则表达式验证端口范围(0-65535)
下一篇：JS实现音乐导航特效

友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap