已经提交过了，按照老师的指导修改后还有几处问题
1、我原本是用的在线网站引入的jQuery，不知道为什么再次打开后就说$未定义，当时做的时候还是没有问题的，然后我就改为本地引入jQuery【使用的是后面的实战部分源码中的jQuery.js，应该是没问题的】，结果错误更多了，最后修改完以后控制台报出这些错误
2、按老师的指导修改后HTML结构中只加上了一个排班日期，并没有像老师说的那样加上49天
3、点击左右翻页按钮只会发生页面自动定位到最上面的情况，我也不知道是不是刷新了，a标签的href属性写为#还是会发生页面自动定位到最上面，不是说写成这个属性就不会刷新页面了吗？
4、我给这里设置了浮动的两部分【js动态添加的排班日期，左侧的排班表和右侧的预约规则】都加了clearfix类，这个类也生效了的，可是下面的预约信息却还是显示位置在最上面，添加的边框也是在上面，而这个预约信息显示在下面后挤在最右边，不知道为什么。
我暂时只发现了这几个问题，麻烦老师解答。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市预约挂号统一平台</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/ui.css">
</head>
<body>
<!-- top -->
<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>
<!-- header -->
<div id="header" class="header">
<div class="wrap clearfix">
<a href="#" class="logo"><img src="img/logo.png"></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"> </a>
</div>
</div>
</div>
<!-- nav -->
<div id="nav" class="nav">
<div class="wrap">
<a href="#" class="link">首页</a>
<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>
<!-- description -->
<div id="description" class="description">
<div class="wrap">
<div class="sub">
<div class="left">
<span class="name-title">北京协和医院 <a href="#" class="name-content">关注医院</a></span>
</div>
<div class="right">
<span class="type-title">等级：<span class="title-content">三级甲等</span></span>
<span class="type-title">区域：<span class="title-content">东城区</span></span>
<span class="type-title">分类：<span class="title-content">中国医科院所属医院</span></span>
</div>
</div>
<hr class="hr">
<div class="sup">
<div class="hos-pic"></div>
<div class="hos-des">
<p>[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同41号</p>
<p>http://www.pumch.cn/</p>
<p>东院咨询台:010-69155564;西院咨询台:010-69158010</p>
<p>东院: 106， 108， 110， 111， 116， 684， 685到东单路口北41， 104快，814到东单路口南; 1， 52， 728， 802到东单路口西; 20， 25，
37，39，到东单路口东；103， 104， 420，803到新东安市场；地铁1、5号线到东单。西院: 68到辟才胡同东口;更多乘车路线详见须知</p>
</div>
<div class="hos-address-pic"></div>
</div>
</div>
</div>
<!-- 科室排班区域 -->
<div class="menu">
<div class="wrap clearfix">
<div class="title">
<p> 科室排班表 <a href="index1.html">返回科室列表</a></p>
</div>
<div class="left schedule_main clearfix">
<!-- 左侧三角按钮 -->
<div class="schedule_tool_left">
<div class="date"> <a href="#" class="icon"></a> </div>
<div class="status">上午</div>
<div class="status">下午</div>
<div class="status">晚上</div>
</div>
<!-- 排班表 -->
<div class="schedule_box">
<div class="schedule_box_wrap clearfix" id="schedule_box_wrap">
<!-- 这里面就是js动态生成的排班表-->
</div>
</div>
<!-- 右侧三角按钮 -->
<div class="schedule_tool_right">
<div class="date"><a href="#" class="icon"></a></div>
<div class="status"></div>
<div class="status"></div>
<div class="status"></div>
</div>
</div>
<div class="right rule">
<table>
<caption>预约规则</caption>
<tr>
<td>
<p><span>预约周期:</span><br>
7天</p>
</td>
</tr>
<tr>
<td>
<p><span>放号时间:</span><br>
8:30 </p>
</td>
</tr>
<tr>
<td>
<p><span>停挂时间:</span><br>
下午14:00停止次日预约挂号(周五14:00后停挂至下周一)</p>
</td>
</tr>
<tr>
<td>
<p><span>退号时间:</span><br>
就诊前一工作日14:00前取消</p>
</td>
</tr>
<tr>
<td>
<p><span>特殊规则:</span><br>
① 取号地点不同:西院区预约号取号地点:西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点:东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。
<br><br><br><br><br><br><br><br>
</p>
</td>
</tr>
</table>
</div>
<!-- 预约信息 -->
<div class="info">
<span class="icon">您还没有选择就诊日期</span>
</div>
</div>
</div>
<!-- footer -->
<div id="footer" class="footer">
Copyright © 2017慕课网版权所有
</div>
<script src="js/jquery.js"></script>
<script src="js/schedule.js"></script>
<script src="js/ui.js"></script>
</body>
</html>
layout.css
body {
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
margin: 0 auto;
position: relative;
}
.clearfix::after {
content: ' ';
display: block;
clear: both;
height: 0;
line-height: 0;
zoom: 1;
}
.top {
width: 100%;
height: 30px;
background-color: #f5f5f5;
}
.header {
height: 92px;
}
.nav {
height: 36px;
background-color: #60bff2;
}
.description {
margin: 30px 0;
height: 300px;
}
.description .wrap {
height: 100%;
background-color: #F7F7F7;
}
.system {
margin: 30px 0;
}
.footer {
width: 100%;
height: 50px;
padding: 25px 0;
background-color: #eceef2;
}
.menu {
height: 600px;
}
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: 92px;
padding-left: 9px 0;
display: inline-block;
}
.header .logo img {
width: 100%;
height: 100%;
}
.header .search {
width: 320px;
height: 38px;
position: absolute;
right: 0;
top: 29px;
}
/* nav模块内样式 */
.nav .link {
float: left;
padding: 0 15px;
line-height: 36px;
color: #fff;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav a:hover {
color: #2d7899;
background-color: #87CEEB;
}
.nav .right {
float: right;
}
/* 医院简介区域 */
.description .sub {
padding: 15px 20px;
}
.description .sub .left,
.description .sub .right {
float: left;
height: 30px;
line-height: 30px;
}
.description .sub .left .name-title {
font-size: 20px;
}
.description .sub .left .name-content {
font-size: 15px;
color: rgb(245, 184, 104);
}
.description .sub .right {
float: right;
}
.description .sub .right .type-title {
font-size: 15px;
color: rgb(16, 72, 240);
}
.description .sub .right .title-content {
color: #000;
}
.description .hr {
width: 960px;
margin: 30px auto 15px;
}
.description .sup {
padding: 0 20px;
}
.description .sup div {
float: left;
margin: 0;
padding: 0;
}
.description .sup .hos-pic {
width: 250px;
height: 180px;
background: url(../img/hospital-1.jpg) left no-repeat;
background-size: 100% 100%;
}
.description .sup .hos-des {
width: 420px;
margin: 0 20px;
}
.description .sup .hos-des p {
width: 420px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #868686;
text-indent: 20px;
position: relative;
}
.description .sup .hos-des p::before {
background: url(../img/icon-web.png) 0 0 no-repeat;
content: ' ';
display: block;
width: 18px;
height: 18px;
position: absolute;
left: 0;
top: 6px;
}
.description .sup .hos-des p:nth-child(2)::before {
background-position-y: -22px;
}
.description .sup .hos-des p:nth-child(3)::before {
background-position-y: -44px;
}
.description .sup .hos-des p:nth-child(4)::before {
background-position-y: -65px;
}
.description .sup .hos-address-pic {
width: 250px;
height: 180px;
background: url(../img/map-1.png) left no-repeat;
background-size: 100% 100%;
}
/* system模块内样式 */
.system .block-caption {
border-bottom: 2px solid #60bff2;
}
.system .block-caption .link {
float: left;
padding: 0 15px;
line-height: 36px;
color: #60bff2;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.system .block-caption .link_focus {
color: #fff;
background-color: #60bff2;
position: relative;
}
.system .block-caption a:hover {
color: #fff;
background-color: #60bff2;
}
.system .block-content .first .left {
width: 700px;
margin-right: 20px;
float: left;
}
.system .block-content .first .left table {
font-size: 15px;
}
.system .block-content .first .left table td {
border: .5px solid rgb(244, 246, 250);
}
.system .block-content .first .left table tr td:nth-child(1) {
width: 130px;
background: rgb(242, 251, 255);
text-align: center;
vertical-align: top;
}
.system .block-content .first .left table tr.title td {
font-weight: normal;
background: rgb(244, 246, 250);
height: 30px;
line-height: 30px;
}
.system .block-content .first .left table tr td:nth-child(2) a {
display: inline-block;
width: 110px;
color: #000;
margin: 0 5px 0 15px;
height: 30px;
line-height: 30px;
}
.system .block-content .first .right {
float: right;
width: 250px;
}
.system .block-content .first .right .title {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 15px;
background: rgb(244, 246, 250);
text-indent: 10px;
}
.system .block-content .first .right .title span {
font-size: 12px;
color: #2da5e1;
}
.system .block-content .first .right .content {
overflow-y: scroll;
font-size: 13px;
height: 280px;
}
.system .block-content .first .right .content table td:nth-child(1) {
width: 60px;
vertical-align: top;
}
.system .block-content .first .right .content table td {
line-height: 20px;
}
.system .block-content .two p {
text-indent: 2em;
font-size: 15px;
line-height: 25px;
margin: 10px 0;
}
.system .wrap .block-content div.three {
height: 850px;
}
.system .block-content .three h4 {
text-align: center;
}
.system .block-content .three h6 {
margin: 0;
line-height: 20px;
}
.system .block-content .three p {
display: block;
font-size: 13px;
line-height: 25px;
}
.system .wrap .block-content div.five {
height: 350px;
}
.system .wrap .block-content div.four {
height: 650px;
}
.system .block-content .four table {
border-collapse: collapse;
}
.system .block-content .four table caption {
font-weight: bold;
margin: 20px auto;
}
.system .block-content .four table td {
font-size: 13px;
text-align: center;
border: 1px solid #acacac;
padding: 5px 20px;
}
.system .block-content .five hr {
color: #acacac;
margin: 100px 0;
}
.system .block-content .five div {
text-align: center;
font-size: 15px;
height: 30px;
line-height: 30px;
}
.system .block-content .five div input {
width: 200px;
height: 28px;
padding: 0;
border: 1px solid #acacac;
}
.system .block-content .five div span {
display: inline-block;
background: #2da5e1;
color: #fff;
width: 100px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
/* footer模块内样式 */
.footer {
line-height: 50px;
text-align: center;
font-size: 12px;
color: #acacac;
margin-top: 20px;
}
/* menu模块内样式 */
.menu .wrap .title p {
margin: 20px 10px;
}
.menu .wrap .title p a {
font-size: 15px;
color: #2da5e1;
}
/* menu内排班表部分 */
.menu .wrap .left {
float: left;
}
.menu .wrap .schedule_main {
width: 798px;
}
.menu .wrap .schedule_main>div {
float: left;
font-size: 15px;
width: 40px;
height: 410px;
border: 1px solid rgb(219, 221, 223);
text-align: center;
border-right: none;
}
.menu .wrap .schedule_main .date {
height: 50px;
}
.menu .wrap .schedule_main .date .icon {
display: inline-block;
width: 100%;
height: 40px;
margin: 5px 0;
background: url(../img/icon-scheduling-left.jpg) center no-repeat;
}
.menu .wrap .schedule_main .schedule_tool_right .date .icon {
background-image: url(../img/icon-scheduling-right.jpg);
}
.menu .wrap .schedule_main .status {
height: 120px;
line-height: 120px;
background-color: rgb(242, 248, 255);
}
.menu .wrap .schedule_main .schedule_box {
background: none;
width: 715px;
overflow: hidden;
position: relative;
}
.menu .wrap .schedule_main .schedule_box .schedule_box_wrap {
position: absolute;
left: 0;
top: 0;
width: 99999px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.menu .wrap .schedule_main .schedule_box .schedule_box_wrap .schedule_box_item {
width: 100px;
}
.menu .wrap .schedule_main .schedule_box .schedule_box_wrap .schedule_box_item .date {
line-height: 25px;
background: rgb(248, 250, 252);
border-bottom: 1px solid rgb(219, 221, 223);
border-right: 1px solid rgb(219, 221, 223);
color: #a09d9d;
}
.menu .wrap .schedule_main .schedule_box .schedule_box_wrap .schedule_box_item .status {
background: none;
border-bottom: 1px solid rgb(219, 221, 223);
border-right: 1px solid rgb(219, 221, 223);
}
.menu .wrap .schedule_main .schedule_box .schedule_box_wrap .schedule_box_item .status_fu11 {
background: rgb(224, 238, 253);
color: #60bff2;
}
/* menu内预约规则部分 */
.menu .wrap .right {
float: right;
}
.menu .wrap .rule {
width: 200px;
height: 400px;
overflow-y: scroll;
border: 1px solid rgb(219, 221, 223);
}
.menu .wrap .rule table {
width: 100%;
height: 100%;
}
.menu .wrap .rule caption {
text-align: left;
height: 50px;
line-height: 50px;
padding-left: 10px;
}
.menu .wrap .rule td {
font-size: 15px;
border: none;
padding: 5px;
}
.menu .wrap .rule p {
display: block;
color: #acacac;
margin-left: 5px;
}
.menu .wrap .rule p span {
color: #000;
}
/* menu内预约情况部分 */
.menu .wrap .info {
text-align: center;
color: #acacac;
font-size: 20px;
height: 60px;
line-height: 60px;
border: 1px solid rgb(219, 221, 223);
}
.menu .wrap .info span {
padding-left: 25px;
background: url(../img/icon-info.jpg) left center no-repeat;
}
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 {
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;
display: none;
}
.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;
top: 1px;
right: 0;
width: 40px;
height: 36px;
}
/* system部分的内容 */
.system .wrap .block-content {
width: 100%;
}
.system .wrap .block-content .ui-menu-item {
display: none;
left: 0;
top: 50px;
margin: 20px auto;
width: 100%;
height: 450px;
}
.system .wrap .block-content .first {
display: block;
}
schedule.js
var week = ["星期日", "星期一", "星期二", "星期三 ", "星期四 ", "星期五 ", "星期六 "];
// 输出今天之后7个星期的排班
var pageCount = 7;
var days = pageCount * 7; // 7 个星期, 所以为49天
var date = new Date();
var time = date.getTime();
//每次循环,添加一天的结构,如下循环49次
for (i = 0; i < days; i++) {
//处理七个星期的排班
var _t = time + i * 86400 * 1000; // 1天的毫秒数 ，每次循环添加一天的毫秒数，就是下一天
var _d = new Date(_t);
var html = [];
//获取当前日期
var w = week[_d.getDay()];
var y = _d.getFullYear();
var m = _d.getMonth() + 1;
//如果小于10， 显示2000.1.1这样的格式不好看，拼接一个0，显示2000.01.01
m = m < 10 ? '0' + m : m;
var d = _d.getDate();
d = d < 10 ? '0' + d : d;
//动态生成结构
html.push('<div class="schedule_box_item"> <div class="date">' + w + '<br>' + y + '-' + m + '-' + d + '</div>');
html.push('<div class="status"></div>'); //上午
html.push('<div class="status status_fu11">约满</div>'); //下午
html.push('<div class="status"></div></div>'); // 晚上
$('#schedule_box_wrap').append(html.join('')); //添加到页面中
}
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-menu定义
$.fn.UiMenu = function (header, content, focus_prefix) {
var ui = $(this);
var links = $(header, ui);
var items = $(content, ui);
var focus_prefix = focus_prefix || '';
links.on('click', function () {
var index = $(this).index();
links.removeClass(focus_prefix + '_focus').eq(index).addClass(focus_prefix + '_focus');
items.hide().eq(index).show();
return false;
})
}
// UiSchedule定义
$.fn.UiSchedule = function (lefticon, righticon, schedule) {
var ui = $(this);
var lefticon = $(lefticon, ui);
var righticon = $(righticon, ui);
var schedule = $(schedule, ui);
var change = $('.schedule_box_item', schedule).width();
lefticon.on('click', function () {
if (left < 0) {
left += change;
schedule.animate({
'left': left + 'px'
});
}
})
righticon.on('click', function () {
if (left > width) {
left -= change;
schedule.animate({
'left': left + 'px'
});
}
})
}
// 页面的脚本逻辑
$(function () {
$('.ui-search').UiSearch();
$('.system .wrap').UiMenu('.block-caption>.link', '.block-content>.ui-menu-item', 'link');
$('.menu .wrap .schedule_main').UiSchedule('.schedule_tool_left .date', '..schedule_tool_right .date', '.schedule_box .schedule_box_wrap');
});
正在回答
同学你好，使用在线jQuery文件，如果网络不好会请求不到，所以会报错。不知道同学换成本地的使用的哪一个jQuery文件，可能是jQuery文件的问题，老师这边换成自己本地的jQuery可能会与同学的测试产生偏差。查看到同学还有一次提交作业的机会，建议同学先提交作业，批复作业的老师能够拿到你完整的项目帮你指导。后续如果还有问题，可以在问答区提问哦。
祝学习愉快 ~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星