第二个版本：点击预约挂号可跳转到排班表，获取之后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">欢迎来到城市医院预约挂号统一平台 请 <a href="">登录</a> <a href="">注册</a> <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">欢迎来到城市医院预约挂号统一平台 请 <a href="">登录</a> <a href="">注册</a> <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实现挂号平台首页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！