ajax+php 旅游价格展示日历

以你之姓@ 2021-10-01 09:30 308阅读 0赞

### 前台页面 ###

<div class="cal" data-url="ajaxDate.php">
        <input type="hidden" name="cyear" value=""/>
        <input type="hidden" name="cmonth" value=""/>
        <div class="cal-head">
            <span class="head"></span>
            <span>周日</span>
            <span>周一</span>
            <span>周二</span>
            <span>周三</span>
            <span>周四</span>
            <span>周五</span>
            <span>周六</span>
         </div>
         <div class="cal-btn">
             <div class="cal-btn-prev"></div>
             <div class="cal-btn-date">
                 <p class="y"><span></span>年</p>
                 <p class="m"><span></span>月</p>
             </div>
             <div class="cal-btn-next"></div>
          </div>
          <div class="cal-content">
          </div>
    </div>

### css ###

/* 日历框样式 */
    .cal{
        width: 650px;
        height: 350px;
        margin-top: 10px;
        display: flex;
        display: -webkit-flex; /* Safari */
        flex-wrap: wrap;
    }
    .cal-head {
        width: 650px;
        height: 38px;
        background: #0081cc;
        font-size: 17px;
        color: #ffffff;
        line-height: 36px;
        display: flex;
        display: -webkit-flex; /* Safari */
    }
    .cal-head span{
        width: 81px;
        height: 38px;
        text-align: center;
        display: block;
    }
    .cal-head span.head{
        width: 82px;
    }
    .cal-btn{
        width: 80px;
        height: 311px;
        background: #ffffff;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .cal-btn-prev{
        width: 80px;
        height: 51px;
        background: url('../images/cal-btn.png') no-repeat 0 0;
        cursor: pointer;
    }
    .cal-btn-date{
        width: 80px;
        height: 127px;
        text-align: center;
        font-size: 16px;
        padding-top: 82px;
    }
    .cal-btn-date p{
        color: #0080cc;;
    }
    .cal-btn-next{
        width: 80px;
        height: 51px;
        background: url('../images/cal-btn.png') no-repeat 0 -51px;
        cursor: pointer;
    }
    .cal-content{
        width: 568px;
        height: 312px;
        background: #ffffff;
        display: flex;
        display: -webkit-flex; /* Safari */
        flex-wrap: wrap;
    }
    .cal-detail-box{
        width: 68px;
        height: 45px;
        padding: 3px 6px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color: #a0a0a0;
        position: relative;
    }
    .cal-detail-box.active{
        color: #0080cc;
    }
    .cal-detail-box.active p{
        color: #ed6c00;
        font-size: 13px;
    }
    .cal-detail-box.active p span{
        font-size: 14px;
    }
    .cal-detail-box .price-detail{
        position: absolute;
        top: -1px;
        left: 73px;
        width: 200px;
        background: #fff;
        min-height: 45px;
        padding: 3px 6px;
        border: 1px solid #ccc;
        display: none;
        z-index: 10010;
    }

### js ###

### ajaxDate.php ###

<?php 
    if ($action == "departure_time") {
    
        $year = $_POST["cyear"]; //当前年份
        $month = $_POST["cmonth"]; //当前月份
        $id =  $_POST["id"]; //当前项目id
    
        //获得该月的第一天所在星期中的第几天，数字表示0（表示星期天）到6（表示星期六）。
        $date['start_week'] = date('w', mktime(0,0,0,$month,1,$year));
            //获得该月的总天数。
        $date['days']= date("t",mktime(0,0,0,$month,1,$year));
        $now_date = date('d');
        $html = '';
    
        $sql = "SELECT * FROM schedule WHERE pid = {$id} AND flag = 1 AND year = '{$year}' AND month = '{$month}'";
        $res = $db->getall($sql);
    
        $res_arr = array();
        if (!empty($res)) {
            foreach ($res as $key=>$value) {
                $res_arr[$value['day']] = $value;
            }
        }
        
        for ($i=0;$i<$date['start_week'];$i++) {
            $html .= '<div class="cal-detail-box"></div>';
        }
        for ($d=1;$d<=$date['days'];$d++) {
            if (!empty($res_arr[$d])) {
                $html .= "<div class='cal-detail-box active'>".$d."<p>￥<span>".$res_arr[$d]['price']."</span></p><div class='price-detail'><p>成人价：".$res_arr[$d]['price']."</p>";
                if ($res_arr[$d]['child_price'] > 0) {
                    $html .= "<p>儿童价：".$res_arr[$d]['child_price']."</p>";
                } 
                $html .= "</div></div>";
            } else {
                $html .= "<div class='cal-detail-box'>".$d."</div>";
            }
        }
    
        $end_date = $date['days']+$date['start_week'];
    
        for ($j=$end_date; $j<42; $j++) {
            $html .= '<div class="cal-detail-box"></div>';
        }
    
        $array['data'] = array();
        $array['info'] =  0;
        $array['status'] = 1;
        $array['data']['year'] = $year;
        $array['data']['month'] = $month;
        $array['data']['html'] = $html;
        
        echo json_encode($array);die;
    }

#### 最终效果: ####

![6587214-9883a124784d43b3.png][]

image.png

[6587214-9883a124784d43b3.png]: /images/20210804/ab92b273b4814191a6045dcb99e1cc86.png