jquery 今天、明天、后天半小时选择器

蛋炒贩炒蛋

已于 2022-09-09 10:02:58 修改

阅读量1k

点赞数 2

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

于 2022-09-09 10:01:32 首次发布

本文链接：https://blog.csdn.net/danchaofan_23/article/details/126777007

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本功能说明

1.天数为今天明天后天，如果当前时间大于设置的每天的结束时间则为明天和后天，时间为每半个小时显示，开始时间为传入的开始时间格式 9:00 如果当前时间大于开始时间则从现在时间开始
在这里插入图片描述

点击确定后输出选择的时间

完整代码 (需要Jquery文件)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <select name="day" id="dayBox" onchange="dayChange()">

    </select>
    <select name="time" id="timeBox">
    </select>
    <button onclick="confirm()">确定</button>

</body>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script>
    let timeSelectArr = [];
    let timeBox = $("#timeBox");
    let dayBox = $("#dayBox");
    function setBoxDate() {
        let temp1 = '';
        timeSelectArr.forEach((d, i) => [
            temp1 = temp1 + `<option value="${d.value}" data-index=${i} >${d.label}</option>`
        ])
        dayBox.html(temp1)
        let temp2 = '';
        timeSelectArr[0].children.forEach((d, i) => [
            temp2 = temp2 + `<option value="${d.value}">${d.label}</option>`
        ])
        timeBox.html(temp2)
    }
    initTime();
    setBoxDate();
    // 点击确认
    function confirm() {
        let selectTime = "";
        var options1 = $("#dayBox option:selected");
        var options2 = $("#timeBox option:selected");
        if (options2.val() == '现在') {
            let date = new Date();
            let hh = date.getHours() < 10 ? '0' + (date.getHours() * 1) : date.getHours();
            let mm = date.getMinutes() < 10 ? '0' + (date.getMinutes() * 1) : date.getMinutes();

            selectTime = options1.val() + " " + hh + ":" + mm
        } else {
            selectTime = options1.val() + " " + options2.val()
        }
        console.log(selectTime)
    }
    // 天改变
    function dayChange(e) {
        var options = $("#dayBox option:selected");
        var index = options.data("index")
        let temp2 = '';
        timeSelectArr[index].children.forEach((d, i) => [
            temp2 = temp2 + `<option value="${d.value}">${d.label}</option>`
        ])
        timeBox.html(temp2)
    }
    // 初始化数据 默认开始时间为9:00,结束时间为 18:00
    function initTime(start = '9:00', end = '18:30') {

        // 将时间格式化函数
        const getDate = (day) => {
            let date = new Date();
            date.setDate(date.getDate() + day);
            let YY = date.getFullYear();
            let MM = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() * 1 + 1) : date.getMonth() + 1;
            let DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            return YY + '-' + MM + '-' + DD
        };
        for (let day = 0; day < 3; day++) {
            let t2 = [];
            // 获取循环次数
            function formatDate(date) {
                dateH = date.split(":")[0] * 1;
                dateM = date.split(":")[1] * 1;
                let startDate = new Date();
                startDate.setHours(dateH)
                startDate.setMinutes(dateM)
                startDate.setSeconds(0);
                return startDate.getTime()
            }
            let startTime = Math.floor(formatDate(start));
            let endTime = Math.floor(formatDate(end));
            let cha = endTime - startTime;
            let total = cha / 1800000; //30分钟是30 *60 *1000 毫秒
            let nowTime = new Date().getTime();
            if (day == 0) {
                if (nowTime > endTime) {
                    continue
                }
                t2.push({
                    value: "现在",
                    label: "现在",
                })
            }
            for (let i = 0; i <= total; i++) {
                let temp = new Date(
                    startTime + (i * 1800000)
                )
                if (temp.getTime() > nowTime || day != 0) {
                    let tempH = temp.getHours();
                    let tempM = temp.getMinutes();
                    tempH = tempH < 10 ? '0' + tempH : tempH;
                    tempM = tempM < 10 ? '0' + tempM : tempM;

                    t2.push({
                        value: tempH + ":" + tempM,
                        label: tempH + ":" + tempM,
                    })
                }
            }
            let dayNameArr = ["今天", "明天", "后天"];
            let t1 = {
                value: getDate(day),
                label: dayNameArr[day],
                children: t2
            };
            timeSelectArr.push(t1)

        }

    }

    console.log(timeSelectArr)




</script>

</html>