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

网络编程 2024/12/24 佚名
2 0 1
极乐门资源网 Design By www.ioogu.com
第二个版本：点击预约挂号可跳转到排班表，获取之后7个星期的排班
先放图
首先是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实现挂号平台首页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
jquery挂号平台首页,jquery,挂号首页源码
标签：
jquery挂号平台首页,jquery,挂号首页源码

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com
评论“基于jQuery实现挂号平台首页源码”

暂无基于jQuery实现挂号平台首页源码的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？
更新日志

2024年12月24日
基于jQuery实现挂号平台首页源码

jquery挂号平台首页,jquery,挂号首页源码

JS正则表达式验证端口范围(0-65535)

JS实现音乐导航特效

评论“基于jQuery实现挂号平台首页源码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接
