jQuery办公室预约时间特效代码下载


jQuery办公室预约时间特效代码下载
jQuery办公室预约时间特效代码下载以及办公室、预约时间等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

<div class="office">
    <!--预约时间-->
    <div class="weui-panel">
        <div class="office-time">
            <h4>请选择预约日期</h4>
            <p>只可提前预约最近5天</p>
            <div class="office-time-con office-time-data">
                <div class="checked office-time-item date_" val="2019-11-25">今天<span>11月25日</span></div>
                <div class="office-time-item date_" val="2019-11-26">明天<span>11月26日</span></div>
                <div class="office-time-item date_" val="2019-11-27">后天<span>11月27日</span></div>
                <div class="office-time-item date_" val="2019-11-28">星期四<span>11月28日</span></div>
                <div class="office-time-item date_" val="2019-11-29">星期五<span>11月29日</span></div>
                <div class="office-time-item date_" val="2019-11-30">星期六<span>11月30日</span></div>
                <div class="office-time-item date_" val="2019-12-01">星期天<span>12月01日</span></div>
                <div class="office-time-item date_" val="2019-12-02">星期一<span>12月02日</span></div>
                <div class="office-time-item date_" val="2019-12-03">星期二<span>12月03日</span></div>
                <div class="office-time-item date_" val="2019-12-04">星期三<span>12月04日</span></div>
                <div class="office-time-item date_" val="2019-12-05">星期四<span>12月05日</span></div>
                <div class="office-time-item date_" val="2019-12-06">星期五<span>12月06日</span></div>
                <div class="office-time-item date_" val="2019-12-07">星期六<span>12月07日</span></div>
                <div class="office-time-item date_" val="2019-12-08">星期天<span>12月08日</span></div>
                <div class="office-time-item date_" val="2019-12-09">星期一<span>12月09日</span></div>
            </div>
        </div>
    </div>
    <!--预约时段-->
    <div class="weui-panel">
        <div class="office-time">
            <h4>请选择预约时段</h4>
            <p>每个数字代表一个时段,例如9点表示9:00:00~9:59:59</p>
            <div class="office-time-legend">
                <div class="office-time-legend-item">
                    <div class="legend-img used"></div>
                    <div class="legend-text">可选</div>
                </div>
                <div class="office-time-legend-item">
                    <div class="legend-img disabled"></div>
                    <div class="legend-text">已预订</div>
                </div>
                <div class="office-time-legend-item">
                    <div class="legend-img checked"></div>
                    <div class="legend-text">已选</div>
                </div>
            </div>
            <div class="office-time-con office-time-slot" id="timeSoltCon">
                <div class="office-time-item slot_" data-time="1574632800">06:00</div>
                <div class="office-time-item slot_" data-time="1574634600">06:30</div>
                <div class="office-time-item slot_" data-time="1574636400">07:00</div>
                <div class="office-time-item slot_" data-time="1574638200">07:30</div>
                <div class="office-time-item slot_ disable" data-time="1574640000">08:00</div>
                <div class="office-time-item slot_ disable" data-time="1574641800">08:30</div>
                <div class="office-time-item slot_ disable" data-time="1574643600">09:00</div>
                <div class="office-time-item slot_ disable" data-time="1574645400">09:30</div>
                <div class="office-time-item slot_" data-time="1574647200">10:00</div>
                <div class="office-time-item slot_" data-time="1574649000">10:30</div>
                <div class="office-time-item slot_" data-time="1574650800">11:00</div>
                <div class="office-time-item slot_" data-time="1574652600">11:30</div>
                <div class="office-time-item slot_" data-time="1574654400">12:00</div>
                <div class="office-time-item slot_" data-time="1574656200">12:30</div>
                <div class="office-time-item slot_" data-time="1574658000">13:00</div>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_main" href="javascript:;" id="submitOrder">立即预约</a>
    </div>
</div>
<!-- body 最后 -->
<script>
    var box1,box2;
    $('.date_').click(function() {
        $('.date_').removeClass('checked');
        $(this).addClass('checked');
    });
    $(".slot_").on("click", function () {
        var $this = $(this);
        var $boxes = $this.parent().children();
        if ($this.hasClass('disable'))
            return;
        if (!box1) {
            // 点击第一个盒子的时候清空所有box的checked状态
            // 移除之前存储的box2变量
            // 只给当前盒子增加checked
            box1 = $this;
            $boxes.removeClass('checked');
            $this.addClass('checked');
            box2 = null;
        } else if (!box2) {
            // 点击第二个盒子的时候
            // 计算从哪个盒子开始到哪个盒子结束需要增加checked状态
            box2 = $this;
            var box1Index = box1.index();
            var box2Index = box2.index();
            // 这里从“第一个盒子”、“第二个盒子”的概念切换到“开始盒子”和“结束盒子”
            var startBoxIndex = Math.min(box1Index, box2Index);
            var endBoxIndex = Math.max(box1Index, box2Index);
            // 重复点击第一个盒子时,不计算为第二个盒子
            if (startBoxIndex === endBoxIndex) {
                box2 = null;
            }
            // 开始盒子和结束盒子之间所有的盒子
            var $startEndBoxRange = $boxes.filter(function () {
                var index = $(this).index();
                return index >= startBoxIndex && index <= endBoxIndex;
            });
            var $disableBoxes = $startEndBoxRange.filter(function () {
                return $(this).hasClass('disable');
            });
            // 用户选择的区间是否包含禁用的盒子
            if ($disableBoxes.length) {
                // 包含禁用盒子则提示,并重置第二盒子
                alert('disabled in range');
                box2 = null;
            } else {
                // 不包含禁用盒子
                $boxes.removeClass('checked');
                $startEndBoxRange.addClass('checked');
                // 到这里用户选择完了开始和结束区间
            }
        } else {
            // 当已经选择了第二个盒子后重新点击,意味着刚才选过的一系列盒子作废
            // 用户期望重新选择盒子区间
            // 和选择第一个盒子后的逻辑相同
            box1 = $this;
            $boxes.removeClass('checked');
            $this.addClass('checked');
            box2 = null;
        }
    })
    $("#submitOrder").on('click',function(){
        if(box1 && box2){
            var startTime = box1.attr("data-time");
            var endTime = box2.attr("data-time");
            if(startTime && endTime){
                alert("预约成功")
            }else{
                alert("请选择预约时间")
            }
        }else{
            alert("请选择两个时间点")
        }
    })
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章