基本功能说明
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>
