前端：医院挂号平台（html+css+jquery）

最新推荐文章于 2024-05-17 01:06:31 发布
最新推荐文章于 2024-05-17 01:06:31 发布
阅读量1w 收藏 102
点赞数 11
分类专栏： 前端实战小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tracy_Yuan2014/article/details/104148895
版权

花了两天终于把这个网页写完了，哈哈

素材图片就不传了，效果图如下：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>城市医院预约平台</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="css/ui.css">
  </head>
  <body>
    <!-- 顶部 -->
    <div class="top" id="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>
    <!-- header区域 -->
    <div class="header" id="header">
      <div class="wrap">
        <a class="logo" href="main.html"> <img src="" alt=""> </a>
        <div class="search ui-search">
          <!-- 搜索栏 -->
          <div class="ui-search-selected">医院</div>
          <div class="ui-search-select-list">
              <a href="#1">科室</a>
              <a href="#1">疾病</a>
              <a href="#1">医院</a>
          </div>
          <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
          <a href="#" class="ui-search-submit">&nbsp;</a>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav" id="nav">
      <div class="wrap">
        <div class="menu" ><a href="#" class="link">首页</a></div>
        <a href="#" class="link">按医院挂号</a>
        <a href="#" class="link">按科室挂号</a>
        <a href="#" class="link">按疾病挂号</a>
        <a href="#" class="link">最新公告</a>
        <a href="#" class="link right">社会知名医院</a>
      </div>
    </div>
    <!-- 医院简绍区域 -->
    <div class="banner" id="banner">
      <div class="wrap">
        <div class="title">
          <span class="title-left">北京协和医院 <a href="#">关注医院</a></span>
          <span class="title-right">
            <span class="title-right-tips">等级:</span>三级甲等 &nbsp;&nbsp;
            <span class="title-right-tips">区域:</span>东城区 &nbsp;&nbsp;
            <span class="title-right-tips">分类:</span>中国医科院医院 &nbsp;&nbsp;
          </span>
        </div>
        <div class="banner-content">
          <div class="left">
            <img src="" alt="">
          </div>
          <div class="middle">
            <span class="icon-address">[东院]北京市东城区帅府园一号</span>
            <span class="icon-web">http://www.punch.com</span>
            <span class="icon-tel">东院咨询台：010-69155564</span>
            <span class="icon-trans">东院：106，108，110，116，684，685到东单路口北；
              41，104快，814到东单路口南；20，25，37，39到东单路口东</span>
          </div>
          <div class="right">
            <img src="" alt="">
          </div>
        </div>

      </div>
    </div>
    <!-- 医院体系区域 -->
    <div class="content " id="content" >
      <div class="wrap">
        <!-- 导航栏 -->
        <div class="nav">
          <a href="#2" class="link selected">预约挂号</a>
          <a href="#2" class="link">医院介绍</a>
          <a href="#2" class="link">预约须知</a>
          <a href="#2" class="link">停诊信息</a>
          <a href="#2" class="link">查询取消</a>
        </div>
        <div class="schedule hidden" >
          <span>科室排班表</span>
          <span class="back"><a href="#">返回科室列表</a></span>
        </div>
      </div>
    </div>



      <div class="content-lists clearfix">
        <div class="wrap clearfix">
          <div class="content-list focus">
            <div class="content-tab">
              <div class="caption">开放预约科室</div>
              <div class="content-table">
                <table>

                </table>
              </div>
            </div>
            <div class="content-news">
              <div class="caption">
                预约规则
                <span>更新时间每日8：30更新</span>
              </div>
              <div class="content-news-tips">
                <div class="line">
                  <div class="line-name">预约周期:</div><div>7天</div>
                </div>
                <div class="line">
                  <div class="line-name">放号时间:</div><div>8：30</div>
                </div>
                <div class="line">
                  <div class="line-name">停诊时间:</div>
                  <div>下午14：00停止次日预约挂号，周五14：00停挂至下周一</div>
                </div>
                <div class="line">
                  <div class="line-name">退号时间:</div>
                  <div>就诊前一工作日14：00前取消</div>
                </div>
                <div class="line">
                  <div class="line-name">特殊规则:</div>
                  <div>取号地点不同：西院区预约号区号地点：
                  西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东
                  院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-list">
            <!-- 医院介绍 -->
            <div class="hospital-intro">

            </div>
          </div>
          <div class="content-list">
            <!-- 预约须知 -->

          </div>
          <div class="content-list">
          <!-- 停诊信息 -->
            <div class="stop-title">
            停诊信息
            </div>
            <table class="stop-tips-table">
              <tr>
                <th>日期</th>
                <th>星期</th>
                <th>时段</th>
                <th>科室</th>
                <th>特长</th>
                <th>职称</th>
                <th>挂号费</th>
                <th>可挂号数</th>
                <th>剩余好数</th>
                <th>替换方式</th>
              </tr>

            </table>
          </div>
          <div class="content-list">
            <!-- 查询取消 -->
            <div class="search-cancel">
              <div class="line">
                <span>预约识别码:</span>
                <input type="text" name="" value="">
                <button type="button" name="" value="">查询订单</button>
              </div>
            </div>
          </div>
        </div>
        <div class="wrap clearfix hidden">
          <table>
            <tr>
              <td>
                <div class="leftBtn">
                  <div class="wrap_btn">
                    <div class="btn"></div>
                  </div>
                  <div class="status">上午</div>
                  <div class="status">下午</div>
                  <div class="status">晚上</div>
                </div>
              </td>
              <td>
                <div class="main">
                  <div class="schedule_box clearfix">
                    <!-- 模板
                    <div class="schedule_box_item">
                      <div class="date">星期一 <br>2019-01-01</div>
                      <div class="status"></div>
                      <div class="status status_full">约满</div>
                      <div class="status"></div>
                    </div>
                  -->
                  </div>
                </div>
              </td>
              <td>
                <div class="rightBtn">
                  <div class="wrap_btn">
                    <div class="btn"></div>
                  </div>
                  <div class="status"></div>
                  <div class="status"></div>
                  <div class="status"></div>
                </div>
              </td>
              <td>
                <div class="content-news">
                  <div class="title">
                    预约规则
                  </div>
                  <div class="line">
                    <div class="line-name">预约周期:</div><div>7天</div>
                  </div>
                  <div class="line">
                    <div class="line-name">放号时间:</div><div>8：30</div>
                  </div>
                  <div class="line">
                    <div class="line-name">停诊时间:</div>
                    <div>下午14：00停止次日预约挂号，周五14：00停挂至下周一</div>
                  </div>
                  <div class="line">
                    <div class="line-name">退号时间:</div>
                    <div>就诊前一工作日14：00前取消</div>
                  </div>
                  <div class="line">
                    <div class="line-name">特殊规则:</div>
                    <div>取号地点不同：西院区预约号区号地点：
                    西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东
                    院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr >
              <td colspan="4">
                <div class="bottom">
                  <span class="choice">您还没有选择就诊日期</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
        </div>
      </div>



    <!-- footer -->
    <div class="footer" id="footer">
      Copyright (c) 2018 Copyright Holder All Rights Reserved.
    </div>
  </body>
  <!-- jquery的两种导入方式 -->
  <!-- <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> -->
  <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <!-- ui.js用到jquery库，所以jquery的库的导入要在ui.js之前，否则提示$未定义 -->
  <script type="text/javascript" src="js/ui.js"></script>


  </script>
</html>

css\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;
  /* background-color: pink; */
}
/* 顶部 */
.top {
	height: 30px;
	background-color: #f5f5f5;
}

.header{
	height: 92px;
}
/* 导航栏  */
.nav{
	height: 36px;
	background-color: #60bff2;

}

/* 医院简绍区域 */
.banner{
	width: 1000px;
	margin: 30px auto;
	height: 310px;
  /* background-color: #F7F7F7; */
}

/* 医院体系区域 */
.content{
	padding: 10px 0 10px 0;
  font-size: 14px;
	/* min-height: 520px; */
}



.content-lists .wrap{
	height: auto;
}
.content-list{
	width: 100%;
	font-size: 14px;
}
.content-tab{
	float: left;
	width: 720px;
	height: 410px;
	margin-right: 20px;
	border: 1px solid #ccc;
}
.content-news{
  float: right;
  width: 248px;
  height: 270px;
  border: 1px solid #ccc;

}

.footer{
	height: 70px;
	padding: 25px 0;
	background-color: #eceef2;
	margin-top: 20px;
}

css\base.css

p{
	margin: 0;
	padding: 0;
	display: inline-block;
}
a{
	text-decoration: none;
}
select,input{
	border: none;
	outline: none;
}
/* #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;
	background-color: pink;
}
.header .logo img{
	width: 100%;
	height: 100%;
}
.header .search {
	width: 326px;
	height: 38px;
	position: absolute;
	right: 0px;
	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 .right{
	float: right;
}

.nav a:hover{
	color: #d7f3ff;
}
/* 医院简绍区域 */
/* 医院简绍区域 */
.banner .wrap{
  background-color: #F7F7F7;
	height: 280px;
	/* padding: 20px 20px; */
}
.banner .title{
	height: 30px;
	border-bottom: 1px solid #acacac;
	margin: 10px 20px;
	padding-top:10px;

}
.banner .title .title-left{
	float: left;
}

.banner .title .title-left a{
	color: orange;
	font-size: 12px;
}
.banner .title .title-right{
	float: right;
	font-size: 12px;
}
.banner .title .title-right .title-right-tips{
	color: blue;
}

.banner .banner-content{
	margin: 10px 20px;
}
.banner .banner-content .left{
	float: left;
	width: 200px;
	height: 150px;
	background-color: pink;
}
.banner .banner-content .middle{
		float: left;
		width:450px;
		font-size: 12px;
		color:#acacac;
		margin-left: 20px;
		margin-right: 20px;
}


.banner .banner-content .middle span{
	padding-left: 20px;
	display: inline-block;
	width: 100%;
	height: 20px;
	line-height: 20px;
	background: url(../img/icon-web.png) 0px 0px no-repeat;
}
.banner .banner-content .middle .icon-address{
		background: url(../img/icon-web.png) 0px 0px no-repeat;
}

.banner .banner-content .middle .icon-web{
		background-position: 0 -20px;
}

.banner .banner-content .middle .icon-tel{
		background-position: 0 -40px;
}

.banner .banner-content .middle .icon-trans{
		background-position: 0 -60px;
}

.banner .banner-content .right{
	float: right;
	width: 250px;
	height: 212px;
	background-color: pink;
}
/* 医院体系区域 */
/* 医院体系区域 导航栏*/
.content .nav{
	width: 100%;
	height: 36px;
	background-color:white;
	border-bottom: 2px solid #60bff2;
	margin-bottom: 10px;
}

.content .nav .link{
	color:#60bff2;
	padding-left: 0px;
	margin-right: 30px;
	min-width: 100px;
}
.content .nav .selected{
	background-color: #60bff2;
	color: #fff;
}

.content .schedule{
	width: 100%;
	height: 36px;
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: bold;
}

/* .content .schedule .back{
	margin-left: 10px;
	font-size: 14px;
	font-weight: normal;
	color:#60bff2;
} */
.content .schedule .back a{
	margin-left: 10px;
	font-size: 14px;
	font-weight: normal;
	color:#60bff2;
}

/* 预约挂号 */
.content-lists .content-news .caption,
.content-lists .content-tab .caption{
	background-color: #eceef2;
	height: 36px;
	line-height: 36px;
	padding-left: 20px;
}

.content-lists .content-news .caption{
	color:#acacac;
	padding-left: 8px;
}

.content-lists .content-news .caption span{
	color:#60bff2;
	font-size: 12px;
}
/* .content .content-tab .content-table table, th, td */

.content-lists .content-list{
	display: none;
}
.content-lists .focus{
	display: block;
}

.content-table table,
.content-table tr,
.content-table td{
	border: 0px;
	border-collapse:collapse;
}
.content-table td{
	width:120px;
	height: 30px;
	line-height: 30px;
}
.content-table td a{
	font-weight: bold;
	padding-left: 20px;
	color: black;
}
.content-tab .content-table .classify{
	width:200px;
	background-color: #CEFFCE;
	vertical-align:top;
	text-align: center;
}
.content-tab .content-table .classify-item{
		width:120px;
}


.content-lists .content-news .content-news-tips{
	height: 236px;
	overflow: auto;
}

.content-lists .content-news .line{
	color:#acacac;
	line-height: 20px;
	font-size: 12px;
	width: 100%;
}

.content-lists .content-news .line div{
	display: inline-block;
	float: left;
	padding-top: 5px;
	width: 130px;
}
.content-lists .content-news .line .line-name{
	color:black;
	width: 60px;
	padding-left: 8px;
}

/* 医院介绍 */


/* 预约须知 */




/* 停诊信息 */
.content-list .stop-title{
	text-align: center;
	height: 38px;
	line-height: 38px;
	font-weight: bold;
	font-size: 16px;
}
.content-list .stop-tips-table th,
.content-list .stop-tips-table td,
.content-list .stop-tips-table{
	font-size: 12px;
	font-weight: normal;
	color:#acacac;
	border: 1px solid #acacac;
	padding: 5px 10px;
	text-align: center;
	border-collapse:collapse;
}
.content-list .stop-tips-table{
	margin: 0 auto;
}
.content-list .stop-tips-table th{
	min-width: 50px;
}
.content-list .stop-tips-table th:nth-of-type(4){
	width: 200px;
}
.content-list .stop-tips-table th:nth-of-type(6){
	width: 120px;
}

/* 查询取消 */
.search-cancel{
	padding: 100px;
	border:1px solid #acacac;
}
.search-cancel .line{
	margin: 0 auto;
	width: 400px;
	height: 40px;
	line-height: 40px;
	/* background-color: yellow; */
	text-align: center;
}
.search-cancel .line input{
	width: 200px;
	border:1px solid #acacac;
	height: 18px;
	/* display: inline-block; */
	vertical-align: middle;
	margin-left: 10px;
}
.search-cancel .line button{
	width: 80px;
	height: 20px;
	background-color: #60bff2;
	border-width: 0px;
	color:white;
	font-size: 12px;
	/* margin-top: 5px; */
	vertical-align: middle;
	margin-left: 10px;
}
.search-cancel .line button:hover{
	cursor: pointer;
}
/* 科室排班表 */

.content-lists .wrap:nth-of-type(2) table{
	width: 1000px;
	height: 320px;
	border-collapse:collapse;
	border: 1px solid #ccc;
}
.content-lists .wrap:nth-of-type(2) table td{
	border: 1px solid #ccc;
}


.content-lists .wrap .rightBtn,
.content-lists .wrap .leftBtn{
	width: 25px;
	/* float: left; */
	height: 270px;
	/* border-right: 1px solid #ccc; */
}


.content-lists .wrap .wrap_btn{
	height: 30px;
}
.content-lists .wrap .rightBtn .status,
.content-lists .wrap .leftBtn .status{
	height: 80px;
	line-height: 40px;
	text-align: right;
	padding-right: 2px;
	background-color: #CEFFCE;
	font-size: 12px;

}

.content-lists .wrap .leftBtn .btn{
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color:  transparent #60bff2 transparent transparent;
	margin-right: 7px;
}
.content-lists .wrap .rightBtn .btn{
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color:  transparent transparent transparent #60bff2;
	margin-left: 7px;

}
.content-lists .wrap .main{
	/* width : 90px * 7 */
	width: 700px;
	float: left;
	height: 270px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}

.content-lists .wrap:nth-of-type(2) .content-news{
	/* 1000 - 25 *2 - 700 = 250px; */
	/* width: 248px; */
	height: 270px;
	/* position: absolute;
	top:0px;
	right: 0px; */
	overflow: auto;
	/* float: right; */
	border: 0px;
}
.content-lists .wrap .content-news .title{
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
}
.content-lists .wrap .bottom{
	width: 1000px;
	height: 50px;
	/* border-top: 1px solid #acacac; */
	line-height: 50px;
	text-align: center;
}
.content-lists .wrap .bottom .choice{
	background: url(../img/icon-info.jpg) 0 0 no-repeat;
	padding-left: 30px;
}


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

css\ui.css

/* header区域 搜索栏 */
.ui-search{
	background: url(../img/ui-search.jpg) center no-repeat;
	font-size: 14px;
	color: #fff;
	position: relative;
}
.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: 73px;
	line-height: 26px;
	font-size: 13px;
	color: #A5A2A2;

}
.ui-search-submit{
	display: block;
	position: absolute;
	right: 0;
	top: 1px;
	width: 40px;
	height: 36px;
}


/* 科室排班表 */
.main .schedule_box{
	width: 9999px;
	height: 270px;
	position: absolute;
	top:0px;
	left: 0px;
	/* background-color: grey; */
}
.main .schedule_box .schedule_box_item{
	height: 270px;
	width: 99px;
	font-size: 12px;
	text-align: center;
	float: left;
}
.schedule_box .schedule_box_item .date{
	height: 30px;
	background-color: #F8F8F8;
	color:black;
	font-size: 12px;
	color: black;
}
.schedule_box .schedule_box_item .status{
	height: 80px;
	color:#60bff2;
}

.schedule_box .schedule_box_item .status_full{
	background-color: #CCFFFF;
	color:#60bff2;
	line-height: 90px;
}
.schedule_box .schedule_box_item div:not(:first-of-type){
	border-top: 1px solid #acacac;
}


.schedule_box .schedule_box_item:not(:first-of-type){
	border-left: 1px solid #acacac;
}

.hidden{
	display: none;
}

js\ui.js

// ui-search 定义
$.fn.UiSearch = function(){
  var ui = $(this);

  $('.ui-search-selected',ui).on('click',function(){
		$('.ui-search-select-list').show();
    //return false是为了防止事件冒泡
		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中点击事件
    return false;
  });

  $('body').on('click',function(){
    $('.ui-search-select-list').hide();
  })

}
$.fn.UiCotentList= function(){
  var ui = $(this);
  var navs = $('.link',this);
  var contentLists = $('.content-list');

  $('.link',ui).on('click',function(){
      var navIndex = $(this).index();
      contentLists.removeClass('focus').eq(navIndex).addClass('focus');
      navs.removeClass('selected').eq(navIndex).addClass('selected');
  })
}
var j=0;
$.fn.slideSchedule = function(dir){
  var ui = $(this);
  // console.log(ui);

  var width = $(".main").width();
  var content = $(".schedule_box ");
  $(this).click(function(){
    if(dir=="left"){
      j--;
      if(j<0){
        j=0;
        return;
      }

    }else if(dir=="right"){
      j++;
      if(j>6){
        j=6;
        return;
      }
    }
    var distance = -width*j;
      console.log("j"+j);
    console.log(distance+"px");
    $(content).css("left",distance+"px");


  })

}
$.fn.loadtable = function(){
  var weeks = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');

  for(var i=0;i<49;i++){
    var currDate = new Date();
    // getDay() 方法可返回一周（0~6）的某一天的数字。
    // 星期天为 0, 星期一为 1, 以此类推。
    currDate = new Date(currDate.getTime() + 24*60*60*1000*i);
    var currWeekDay = currDate.getDay();
    //获取当前日(1-31)
    var currDay = currDate.getDate()
    var currYear = currDate.getFullYear();
    //getMonth()，一月份: 0
    var currMonth = currDate.getMonth()+1;
    var week = weeks[currWeekDay];
    var str = week+'<br/>'+currYear+'-'+currMonth+'-'+currDay;
    // console.log(str);

    var html = new Array();
    html.push('<div class="schedule_box_item"><div class="date">'+str+'</div>');
    html.push('<div class="status"></div>');
    html.push('<div class="status status_full">约满</div>');
    html.push('<div class="status"></div></div>');
    $('.schedule_box').append(html.join(''));
  }
}
$.fn.back = function(){
  $(this).on('click',function(){
    $('.nav').removeClass('hidden');
    $('.schedule').addClass('hidden');
    $('.content-lists .wrap')[1].classList.add("hidden");
    // var test = $('.content-lists .wrap')[0].classList;
    // console.log(test);
    $('.content-lists .wrap')[0].classList.remove("hidden");
  })
}
$.fn.jump = function(){
  $(this).on('click',function(){
    console.log("click "+this);
    $('.nav').addClass('hidden');
    $('.schedule').removeClass('hidden');

    $('.content-lists .wrap')[0].classList.add("hidden");
    // var test = $('.content-lists .wrap')[0].classList;
    // console.log(test);
    $('.content-lists .wrap')[1].classList.remove("hidden");
  })
}

//test 测试数据
$.fn.loadData = function(){
  for(var i=0;i<4;i++){
    //一共四科
    for(var j=0;j<3;j++){
      //一共3行
      var eles = new Array();
      eles.push('<tr>');
      if(j==0){
            eles.push('<td rowspan="3" class="classify">门诊</td>');
      }
      for(var k=0;k<4;k++){
        eles.push('<td><a href="#" class="classify-item">口腔门诊</a></td>');
      }
      eles.push('</tr>')
      // console.log(eles.join(''));
      $(this).append(eles.join(''));
    }
  }
}

//test 测试数据



//页面初始化，事件绑定
$(document).ready(function(){
  $('.ui-search').UiSearch();
  $('.content .nav').UiCotentList();
  $('.leftBtn .wrap_btn').slideSchedule("left");
  $('.rightBtn .wrap_btn').slideSchedule("right");

  $('.schedule_box').loadtable();
  $('.back').back();



  //test
  $('.content-table table').loadData();


  $('.classify-item').jump();


})
leeeeeenas
关注
  • 11
    点赞
  • 踩
  • 102
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html5医院管理系统（纯前端）
04-21
医院管理系统网站模板，只有前端页面代码，功能模块齐全 html5医院网站模板，医院网上挂号预约网站模板 html5医院网站模板，医院网上挂号预约网站模板，只有前端页面
医院挂号相关html简单页面
05-15
编写简单医院挂号流程的html页面，供参考，包括首页，注册登录页面，医生挂号页面等
前端--医院设置信息列表效果实现-html代码部分
2401_84094979的博客
05-17 407
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
1：创建项目工程(1)
2401_84097436的博客
05-04 693
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Java项目:医院挂号预约管理系统(java+SSM+HTML+JavaScript+jsp+mysql)
常年被追砍的博客
05-16 5165
源码获取：俺的博客首页 "资源" 里下载！ 项目介绍 本项目分为管理员与医生两种角色； 管理员角色包含以下功能： 管理员登录,添加科室,科室增删改查,医生管理,查看预约信息,查看医生预约状态,反馈查看,公告发布等功能。 医生角色包含以下功能： 录界面,医生首页,提交挂号信息,个人信息修改,查看个人预约信息等功能。 环境需要 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐ID..
基于jQuery框架的医院HIS系统页面前端特效设计
04-16
随着互联网技术的发展，作为Web产品应用中的核心元素，前端页面的需求开始随着客户需求的变化在不断的更新和改变。文中针对医院HIS系统的前端页面需求改变，提出采用一种基于jQuery框架的医院系统前端页面特效设计方法。通过对前端页面开发的需求分析，并借助jQuery代码，实现HIS系统前端页面的交互和良好视觉效果，以此为广大的医务工作者和患者提供各位简洁、独立和交互性强的页面。
前端系列之实战(城市医院预约挂号平台1.框架搭建)
十二指环的博客
02-02 1421
项目简介：需求分析界面设计首页模块分析介绍HTML+CSS完成静态页面样式开发完成项目框架的搭建index.html<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>城市医院预约平台</title> <link rel="stylesheet" t
2023计算机毕业设计-基于springnoot的宠物医院预约管理系统HTML-JAVA(论文+开题报告+运行)
bocofChina的博客
03-23 674
SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis两个开源框架整合而成（SpringMVC是Spring中的部分内容）。常作为数据源较简单的web项目的框架。Spring就像是整个项目中装配bean的大工厂，在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象。也可以称之为项目中的粘合剂。Spring的核心思想是IoC（控制反转），即不再需要程序员去显式地new一个对象，而是让Spring框架帮你来完成这一切。
Web前端期末大作业--绿色自适应医疗健康医院网页设计（HTML+CSS+JavaScript+）实现
热门推荐
java李阳勇的博客
11-20 1万+
Web前端期末大作业--绿色自适应医疗健康医院网页设计（HTML+CSS+JavaScript+）实现 适合课程设计参考学习。
基于SSM的医院预约挂号系统
12-22
前端技术：HTML、CSS、JS、JQuery等 后端技术：JSP、SSM框架 运行环境：Windows7以上、JDK1.8 运行工具：Eclipse 运行服务器：Tomcat8.0及以上版本 是否基于Maven环境:是。 项目角色；（单角色） 适用场景：...
基于SpringBoot+Vue实现的医院在线挂号系统
最新发布
05-29
项目描述 基于SpringBoot+Vue实现的医院在线挂号系统设计了三种角色，分别是管理员、医生、用户，每种角色对应不同的菜单 系统实现了个人信息管理、...前端技术：html+css+Layui+jQuery+bootstrap+Vue+axios+Element-UI
预约挂号HTML前端页面模板.zip
08-05
预约挂号HTML前端页面模板，可自行根据所需更改。静态html。
浅蓝色预约挂号前端网页模板
06-01
浅蓝色预约挂号前端网页模板是一款html5模板，适合医院看病预约挂号排队网站模板，需要的朋友可以免费下载使用。
医院医疗官网网站模板html源码
12-04
医院医疗官网网站模板html源码
3-HTML5简约大气网上预约挂号医院网站模板.zip
11-13
3-HTML5简约大气网上预约挂号医院网站模板
基于SSM的医院挂号系统+源代码+文档说明
11-27
前端：JSP+CSS+JS+JQUERY+Layui ## 五、运行截图（点图片可放大） ![1679362527786](https://user-images.githubusercontent.com/124327024/228711603-d28c9994-784a-4628-a59a-897524d1decb.jpg) !...
Java项目：基于SSM框架实现的医院门诊挂号系统（ssm+B/S架构+源码+数据库+毕业论文+开题+任务书+PPT）
05-04
前端：jsp，css，jquery 三、系统功能 系统用户包括有管理员、药房、护士、医生。 主要功能如下： 个人中心 修改密码 个人信息 药房管理 护士管理 医生管理 病人信息管理 科室信息管理 挂号管理 诊断信息管理 ...
微信小程序|Springboot+Vue+Node开发实现医疗预约挂号系统
BS009的博客
10-12 4327
本项目基本UNI-APP前端框架开发，后台基于Springboot+Vue开发实现，完成了一个在线预约挂号系统，系统的使用角色有三个：管理员、患者、医生。 患者的主要功能： 注册登陆 查看资讯信息：对信息进行点赞、收藏、评论 查看医院的挂号大厅：可以对医生进行点赞评论，在线预约挂号 个人中心:管理个人信息，查看预约信息列表，取消预约信息，修改预约信息等操作 医生的主要功能： 登陆 查看资讯信息：对信息进行点赞、收藏、评论 查看医院的挂号大厅：可
基于javaweb的宠物医院预约挂号系统(java+JSP+Spring+SpringBoot+MyBatis+html+layui+maven+Mysql)
m0_70999423的博客
05-15 572
一、项目简述 功能包括： 用户分为宠物，医生，管理员，宠物主人可进行注册选择医生挂号，选择日期，选择号源，医生可进行宠物接诊，管理员可对宠物，医生信息的维护等等功能。 二、项目运行 环境配置： Jdk1.8 + Tomcat8.5 + mysql + Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持） 项目技术： JSP +Spring + SpringBoot + MyBatis + html+ css + JavaScript + JQuery + Ajax
互联网+智慧医院云解决方案共19页.pptx
03-20
1. 智慧挂号功能，通过预约平台实时提醒患者就诊时间和注意事项，减少排队等待。 2. 采用电子支付和微信推送方式，简化诊间费用结算，同时报告实时送达，减少纸质单据处理。 3. 智能导航系统帮助患者快速找到目的地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值