体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么我的currentPage变量说无定义

来源：5-12 项目作业

慕九州8176055

2020-02-07 21:15:21

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="./css/layout.css">

<link rel="stylesheet" href="./css/base.css">

<link rel="stylesheet" href="./css/ui.css">

<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

</head>

<body>

<div class="top">

<div class="wrap">

<p class="call">010-114/116114电话预约</p>

<p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;&nbsp;&nbsp;

<a href="#">登录</a>

<a href="#">注册</a>

&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#">帮助中心</a>

</p>

</div>

</div>

<div class="header">

<div class="wrap">

<a class="logo" href="index.html"><img src="./img/logo.png" alt="logo"></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">

<div class="wrap clearfix">

<a href="#2" class="link">首页</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>

<a href="#2" class="link right">社会知名医院</a>

</div>

</div>

<div class="hospital_main">

<div class="wrap all clearfix">

<div class="caption clearfix">

<div class="item-name">北京协和医院<span class="item-name-dd">关注医院</span></div>

<div class="item-info">

<span class="info-item">等级：</span>三级甲等

<span class="info-item">区域：</span>东城区

<span class="info-item">分类：</span>中国医科院所属医院

</div>    

</div>

<div class="main-content">

<img class="main-content-left" src="./img/hospital-1.jpg" alt="">

<div class="main-content-center">

<div class="item">[东院]北京市东城区帅园府一号 [西院]北京市西城区大木仓胡同41号</div>

<div class="item">http：//www.pumch.cn/</div>

<div class="item">东院咨询台：010-69155564:；西院咨询台：010-69158010</div>

<div class="item">东院：106,108,110,111,684,685到东单路口北；41,104快，814到东单路口南

；1,52,728,802到东单路口西；20,25,37,39到东单路口东

东院：106,108,110,111,684,685到东单路口北；41,104快，814到东单路口南

；1,52,728,802到东单路口西；20,25,37,39到东单路口东建须知。

</div>

</div>

<img class="main-content-right" src="./img/map-1.png" alt="">

</div>

</div>

</div>

<div class="schedule">

<div class="wrap">

<div class="caption">科室排班表<a href="./index.html">返回科室列表</a></div>

<div class="info">

<div class="left">

<div class="schedule-prevday" id="schedule-prevday"><img src="./img/icon-scheduling-left.jpg" alt=""></div>

<p>上午</p>

<p>下午</p>

<p>晚上</p>

</div>

<div class="schedule_box">

<div class="schedule_box_wrap" id="schedule_box_wrap"></div>

</div>

<div class="right">

<div class="schedule-nextday" id="schedule-nextday"><img src="./img/icon-scheduling-right.jpg" alt=""></div>

</div>

</div>

</div>

</div>

<div id="footer" class="footer">

Copyright © 2017慕课网版权所有

</div>

<a href="#" class="go-top"></a>

<script type="text/javascript" src="./js/ui.js"></script>

</body>

</html>

/* #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: 12px 0;

display: inline-block;

}

.header .logo img{

width: 100%;

height: 100%;

}

.header .search {

    width: 326px;

    height: 38px;

    position: absolute;

    right: 0px;

    top: 31px;

    /* background-color: orange; */

}


/* #nav 模块内样式 */

.nav .link{

display: inline-block;

float: left;

margin-left: 30px;

line-height: 36px;

color: #fff;

text-align: center;

padding:0 5px;

}

.nav .right{

float: right;

}

.nav .link:hover{

background-color: #87CEEB;

cursor: pointer;

}


/* #hospital_main 模块内样式 */

.hospital_main .wrap .caption{

width: 960px;

height: 40px;

margin: 20px;

position: absolute;

border-bottom: 1px solid gray;

/* padding-bottom: 20px; */

}

.hospital_main .wrap .caption .item-name{

float: left;

font-size: 16px;

}

.hospital_main .wrap .caption .item-name .item-name-dd{

font-size: 10px;

color: orange;

top:10px;

padding-left: 10px;

}

.hospital_main .wrap .caption .item-info{

float: right;

color: #000;

font-size: 13px;

}

.hospital_main .wrap .caption .item-info .info-item{

color: blue;

}

.main-content {

position: absolute;

top: 60px;

margin: 20px;

float: left;

}

.main-content img{

display: block;

width: 200px;

height: 200px;

float: left;


}

.main-content-center{

font-size: 13px;

width: 500px;

float: left;

margin: 10px 20px 10px;

}

.main-content-center .item{

position: relative;

padding-bottom: 12px;

padding-left: 30px;

color: #868686;

}

.main-content-center .item:before{

content: ' ';

display: block;

width: 22px;

height: 21px;

position: absolute;

left: 0;

top: 1px;

background: url('../img/icon-web.png') 5px 0 no-repeat;

}

.main-content-center .item:nth-child(2):before{

background-position-y: -22px;

}

.main-content-center .item:nth-child(3):before{

background-position-y: -60px;

}

.main-content-center .item:nth-child(4):before{

background-position-y: -80px;

}

/*医院介绍*/

.content-tab{

background: none;

}

.content-tab .caption{

    height: 34px;

    line-height: 34px;

border-bottom: 2px solid #60bff2;

}

.content-tab .caption .item{

    display: block;

    width: 112px;

    height: 34px;

    text-align: center;

    float: left;

    color: #00b3ea;

}

.content-tab .caption .item_focus{

    background-color: #60bff2;

    color: #fff;

}

.content-tab .block{

    /* border: 2px solid black; */

width: 100%;

margin-top: 20px;

}

/*医院介绍*/

.content-tab .block .item .introduce p{

font-size: 14px;

color: gray;

line-height: 20px;

margin: 20px 20px 0px;

text-indent: 20px;

}

/*预约须知*/

.content-tab .block .item .rule h3{

margin: 0 auto;

text-align: center;

padding: 20px 0;

}

.content-tab .block .item .rule p{

font-size: 10px;

color: black;

line-height: 25px;

margin: 0px 20px 0px;

}

.content-tab .block .item .rule .special{

font-weight: bold;

padding-top: 20px;

}

/*停诊信息*/

.content-tab .block .item .message h3{

margin: 0 auto;

text-align: center;

padding: 20px 0;

}

.content-tab .block .item .message table{

border-right:1px solid #868686;border-bottom:1px solid #868686;

color: #868686;

font-size: 13px;

text-align: center;

margin: 0 auto;

border-collapse: collapse;

}

.content-tab .block .item .message table td{

border-left:1px solid #868686;border-top:1px solid #868686;

padding: 10px;

text-align: center;

}

/*查询取消*/

.content-tab .block .item .sousuo{

margin: 0 auto;

height: 100px;

width: 400px;

padding-top: 100px;

}

.content-tab .block .item .sousuo div{

display: inline;

}

.content-tab .block .item .sousuo input{

width: 150px;

height: 20px;

line-height: 20px;

font-size: 13px;

color: #A5A2A2;

border: 1px solid #868686;

}

.content-tab .block .item .sousuo a{

display: inline-block;

background-color:#00b3ea;

color: #fff;

width: 70px;

height: 24px;

line-height: 24px;

font-size: 14px;

border:1px solid #00b3ea;

border-radius: 10px;

text-align: center;

}


/*预约挂号*/

.content-tab .block .item .one{

margin: 0 auto;

height: 500px;

}

/*右边*/

.content-tab .block .item .one .right{

width: 300px;

height: 300px;

overflow: auto;

float:right;

}

.content-tab .block .item .one .right .content{

width: 270px;

height: 800px;

border: 1px solid #f7f7f7;

}

.content-tab .block .item .one .right .content p{

font-size: 13px;

padding: 15px 0px 0px 15px;

color: #868686;

}

.content-tab .block .item .one .right .content p span{

display: block;

}

.content-tab .block .item .one .right .content .special{

font-size: 16px;

padding: 15px 0px 15px 15px;

background-color: #F7F7F7;

}

.content-tab .block .item .one .right .content .special span{

font-size: 14px;

padding: 15px 0px 15px 15px;

color: #00b3ea;

display: inline;

}

/*左边*/

.content-tab .block .item .one .left{

width: 600px;

height: 500px;

float:left;

}

.content-tab .block .item .one .left .special{

font-size: 16px;

padding: 15px 0px 15px 15px;

background-color: #F7F7F7;

color: #868686;

}


.content-tab .block .item .one .left  table{

border-right:1px solid #868686;border-bottom:1px solid #868686;

color: #868686;

font-size: 13px;

text-align: center;

margin: 0 auto;

border-collapse: collapse;

margin-top: 10px;

}

.content-tab .block .item .one .left  table td{

border-left:1px solid #868686;border-top:1px solid #868686;

padding: 10px;

text-align: center;

}

.content-tab .block .item .one .left  table td a{

display: block;

color:#868686;

margin: 10px;


}


/*科室排班表*/

.schedule .wrap .caption {

font-size:16px;

padding-left: 20px;

margin-top: 30px;

}

.schedule .wrap .caption a{

color: #00b3ea;

font-size: 13px;

padding-left: 20px;

}

.schedule .wrap .info .left{

width: 37px;

height: 325px;

background-color: #87CEEB;

float: left;

border: 1px solid #A5A2A2;

}

.schedule .wrap .info .schedule_box{

width: 728px;

height: 325px;

float: left;

overflow: hidden;

}


.schedule .wrap .info .right{

width: 37px;

height: 325px;

background-color:#87CEEB;

float: left;

border: 1px solid #A5A2A2;

}

/*左侧*/

.schedule .wrap .info .left .schedule-prevday img{

display: block;

width: 37px;

height: 47px;

}

.schedule .wrap .info .left  p{

height: 93px;

text-align: center;

line-height: 93px;

}

/*右侧*/


.schedule .wrap .info .right .schedule-nextday img{

display: block;

width: 37px;

height: 47px;

}

/*中间*/

.schedule .wrap .info .schedule_box .schedule_box_wrap .schedule_box_item{

float: left;

width: 104px;

height: 325px;

vertical-align: middle;

}


.schedule .wrap .info .schedule_box .schedule_box_wrap .schedule_box_item .date{

height: 46px;

border: 1px solid #A5A2A2;

}

.schedule .wrap .info .schedule_box .schedule_box_wrap .schedule_box_item .status{

height: 93px;

line-height: 93px;

border: 1px solid #A5A2A2;

}



*{

margin: 0;

padding: 0;

}

p{

margin: 0;

padding: 0;

/* display: inline-block; */

}

a{

text-decoration: none;

}

select,input{

    border: none;

    outline: none;

}

.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: 100px;

}

.nav{

height: 36px;

    background-color: #60bff2;

}

.all{

height: 300px;

background-color: #F7F7F7;

margin-top: 38px;

}

.all1{

/* height: 300px; */

margin-top: 20px;

margin-bottom: 20px;

}

.footer{

width: 100%;

    height: 70px;

background-color: #eceef2;

line-height: 70px;

text-align: center;

font-size: 12px;

color: #acacac;

}

.schedule{

height: 400px;

}



/* 搜索 */

.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;

position: absolute;

left: 0;

top: 0;

text-indent: 14px;

line-height: 38px;

}

.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;

}

// ui-search 定义

$.fn.UiSearh = 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 定规


/**

* @param {string} header  TAB组件，的所有选项卡 item

* @param {string} content TAB组件，内容区域，所有 item

* @param {string} focus_prefix  选项卡高亮样式前缀，可选

*/


$.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;

    })

}

//动态日期

var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

// 输出今天之后7个星期的排班

$(function(){

    //先将容器里内容清空

    $('#schedule_box_wrap').empty();

    //设置一页也就是显示出来的有几个

    var pageCount = 7;

    

    //设置当前页面的页数为0，一页存放的是一周

    //可以把currentPage当成是第几周，第0页也就是第一周

    //当我们点击按钮查看上一周或者下一周的排班表时可以通过currentPage加一减一实现

        //一共要循环多少天的排班表，这里是49天

    var days = pageCount*7;


    //获取当前日期

    var date = new Date();

    var time = date.getTime();

    

    //进入for循环，遍历设置49天的排表

    for(i=0;i<days;i++){

        //1天的毫秒数也就是下一天的时间；

        var _t = time + i*86400*1000;

        var _d = new Date(_t);

        var html = [];


        var w = week[_d.getDay()];/*0-6*/

        var y = _d.getFullYear();

        //因为getMouth()结果为月份0-11，我们要1-12，所以在后面加1

        var m = _d.getMonth()+1;

        m = m < 10 ?'0'+m :m;

        //获取天

        var d = _d.getDate();

        d = d < 10 ? '0'+d :d;

        //将一天的排班表动态添加到我们准备的容器schedule_box_wrap中

        //+w+'<br>'+y+'-'+m+'-'+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_full">约满</div>');

        html.push('<div class="status></div></div>');

        $('#schedule_box_wrap').append(html.join(''));

    }

})



//按钮处理

//先获取最外层盒子schedule_box的宽度，在页面上显示的是一周的日期

var width = $('.schedule_box').width();

//给盒子schedule_box_wrap定义一个左右滑动事件flashleft,当点击左右按钮时触发这个时间

$('#schdule_box_wrap').on('flashLeft',function(){

    $(this).css('left',width*currentPage*-1);

});

//设置left偏移值

/*width*currentPage*-1,

width*currentPage是一周盒子的宽度乘以当前的页数

width*currentPage-1在乘以-1得到的值就是向左移动一周的宽度*/

$('.schedule-prevday').on('click',function(){

    //可以把currentPage当做是第几周

    if(currentPage-1>=0){//说明当前不是第一周，可以查看上一周

        currentPage-=1;

        $('#schdule_box_wrap').trggerHandler('flashLeft');

    }

    return false;

});

$('.schedule-nextday').on('click',function(){

    //先判断是不是最后一周

    if(currentPage+1 < pageCount){

        currentPage+=1;

        $('#schdule_box_wrap').trggerHandler('flashLeft');

    }

    return false;

})











// 页面的脚本逻辑

$(function () {

$('.ui-search').UiSearh();/*搜索*/

$('.content-tab').UiTab('.caption > .item','.block > .item');

    

});



写回答

1回答

好帮手慕夭夭

2020-02-08

同学你好，因为代码中并没有定义这个变量就使用了，所以会报错。如下修改:

http://img.mukewang.com/climg/5e3e25ef094406bb07950396.jpg

另外，代码中还有几处错误如下：

单词拼错，修改如下

http://img.mukewang.com/climg/5e3e2c3b094da47606740179.jpg

判断条件需要修改一下，currentPage表示第几张排班，索引0~6 。判断索引大于0 ，则表示还没有切换到第一张。判断小于6，则表示还没有切换到最后一张。

http://img.mukewang.com/climg/5e3e2c8509786a9d08800597.jpg

http://img.mukewang.com/climg/5e3e2cee097736bb08970516.jpg

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

回答 2

老师为什么不行，在vscode上我的定义currentpage是灰色的，报错显示未定义

回答 1

为什么要用triggerHander（），不直接调函数

回答 2

这个加号是做什么用的？我在百度查了jquery的 gt用法直接写数字就可以了啊？

回答 4

老师说的ui组件的函数有啥特别之处吗？

回答 2

打开慕课网App查看更多内容