前端 css + js 预约列表

逸曦穆泽

已于 2022-03-11 16:21:54 修改

阅读量1.1k

点赞数 2

分类专栏： web前端文章标签： css 前端 javascript

于 2022-01-19 15:06:41 首次发布

本文链接：https://blog.csdn.net/qq_41408081/article/details/122581214

版权

web前端专栏收录该内容

65 篇文章 2 订阅

订阅专栏

序：预约一个星期的数据，比如当天是19号，预约时间从明天开始计算，其实也可以从后端写计算好的数据返回，前端只负责渲染就行

图：

内容：

<head>
    <meta charset="UTF-8">
    <title>预约</title>

    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
    <style>
        :root{
            --border-color:#ccc;
        }
        .date_picker{background-color:#fff;margin-bottom: 30px;}
        .date_picker_tle{font-size:1.6em;font-weight: bold;text-align: center;margin-bottom: 15px;font-family: cursive;}
        .date_picker_list{text-align:center;height:100px;overflow-x: auto;overflow-y: hidden;}
        .date_picker_list::-webkit-scrollbar {width:3px;height:3px;}
        .date_picker_list::-webkit-scrollbar-thumb {border-radius:5px;background:transparent;}
        .date_picker_list::-webkit-scrollbar-track {border-radius:0;background:transparent;}

        .date_picker_list .picker_list{display: grid;grid-template-rows: auto auto;grid-template-columns: auto auto auto auto auto auto auto;justify-content: center;font-family: cursive;font-size: .8em;}
        .date_picker_list .picker_list .picker_col{display: grid;grid-auto-columns: auto auto;width:100%;height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);}
        .date_picker_list .picker_list .picker_col:first-child{border-left:1px solid var(--border-color);}
        .date_picker_list .picker_list .picker_item{align-content: center;padding:8px 6px;font-family: math;border-bottom:1px solid var(--border-color);cursor:pointer;}
        .date_picker_list .picker_list .picker_click{line-height: 1.2;padding:10px 6px;align-content: center;cursor:pointer;}
        .date_picker_list .picker_list .picker_active{color:#fff;background-color: #1b9aee;transition: all .2s ease-in-out;}
        .date_picker_list .picker_list .picker_disable{color:#333;background-color: #dfe0e4;}
    </style>
</head>
<body>

<div class="date_picker">
    <p class="date_picker_tle">预约管理</p>
    <div class="date_picker_list">
        <div class="picker_list"></div>
    </div>
</div>
<script>
    // 预约列表
    var month_num = ["01","02","03","04","05","06","07","08","09","10","11","12"];
    var week_name = ["周日","周一","周二","周三","周四","周五","周六"];
    var currentDate = new Date();
    var currentYear = currentDate.getFullYear(); // 返回年份
    var currentMonthIndex = currentDate.getMonth(); // 数组索引（0-11）
    var currentDay = currentDate.getDate();      // 月中的第几天
    var weekStartIndex = currentDate.getDay();   // 返回星期几（0-6）=> 周日，周一，周二，周三，周四，周五，周六
    function weekList(data,userId) {
        var setStr = "",weekDate = "";
        for(var i=1; i <= 7; i++){
            weekStartIndex++;
            currentDay++;
            if(weekStartIndex > 6){
                weekStartIndex = 0
            }
            weekDate = currentYear+"-"+month_num[currentMonthIndex]+"-"+currentDay;
            // 用户id ，当天次数
            var uId = "",daySum = 0;
            // 循环数据列表
            for (let j = 0; j < data.length; j++) {
                // 对应时间 =》递增次数，判断用户存在
                if(data[j]["updated"] === weekDate){
                    daySum ++;
                    if(data[j]["user_id"] === userId){
                        uId = data[j]["user_id"];
                    }
                }
            }
            if(uId){
                // 已预约
                setStr += "<div class=\"picker_col\">\n" +
                    "    <div class='picker_item'>\n" +
                    "       <div>"+week_name[weekStartIndex]+"</div>\n" +
                    "       <div>"+month_num[currentMonthIndex]+"/"+currentDay+"</div>\n" +
                    "    </div>\n" +
                    "    <div class=\"picker_click picker_disable\">已预约</div>\n" +
                    " </div>";
            }else{
                if(daySum >= 3){
                    // 预约已满
                    setStr += "<div class=\"picker_col\">\n" +
                        "    <div class='picker_item'>\n" +
                        "       <div>"+week_name[weekStartIndex]+"</div>\n" +
                        "       <div>"+month_num[currentMonthIndex]+"/"+currentDay+"</div>\n" +
                        "    </div>\n" +
                        "    <div class=\"picker_click picker_disable\">已满</div>\n" +
                        " </div>";
                }else{
                    // 可预约
                    setStr += "<div class=\"picker_col\">\n" +
                        "   <div class='picker_item'>\n" +
                        "       <div>"+week_name[weekStartIndex]+"</div>\n" +
                        "       <div>"+month_num[currentMonthIndex]+"/"+currentDay+"</div>\n" +
                        "   </div>\n" +
                        "  <div class=\"picker_click picker_active\" data-time='"+currentYear+"-"+month_num[currentMonthIndex]+"-"+currentDay+"'>可预约</div>\n" +
                        "</div>";
                }
            }
            // console.log({"日期:":weekDate,"次数：":daySum,"userId:":uId});
        }
        $(".picker_list").html(setStr);
    }
    // 日期要换成当前日期往后几天的
     var data = [{id: 1, user_id: '1641282484', updated: '2022-01-20'},
    {id: 2, user_id: '1641282486', updated: '2022-01-21'},
    {id: 3, user_id: '1641282486', updated: '2022-01-22'},
    {id: 4, user_id: '1641282486', updated: '2022-01-23'},
    {id: 5, user_id: '1641282488', updated: '2022-01-23'},
    {id: 6, user_id: '1641282486', updated: '2022-01-23'}];
    weekList(data,"1641282486");
</script>
</body>

逸曦穆泽

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
7
评论
前端 css + js 预约列表

序：预约一个星期的数据，比如当天是19号，预约时间从明天开始计算，其实也可以从后端写计算好的数据返回，前端只负责渲染就行图：内容：<style> .date_picker{background-color:#fff;margin-bottom: 30px;} .date_picker_tle{font-size:1.6em;font-weight: bold;text-align: center;margin-bottom: 15px;font-famil.
复制链接

扫一扫