醫院掛號，可能需要切換日期，選擇一周內的某一天。
提供一周內的日期段，通過點擊，切換到不同天。
簡單的js，html實例。切換玩調用后臺接口，實現后續邏輯。
使用Vue,插值語法，更簡單。
一周日歷切換
代碼:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"/><title>顯示一周日期</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><style>.container {display: flex;}.box {/* 這里可以添加具體的樣式 */flex:1;background-color: white;margin:0 auto;text-align:center;padding: 7px; /* 內邊距 */}.box_active{background: #0093E9;color: #fff;border-radius: 5px;border: 1px solid #D9D9D9; /* 邊框顏色 */box-shadow: 0 0 10px 0 rgba(0, 148, 233, 0.63)}</style></head><body><div class="container"><div class="box " id="week_div_0"><text style="display: block; font-size: 18px; " id="week_shu_0"></text><text style="display: block; font-size: 12px;" id="week_wen_0"></text></div><div class="box" id="week_div_1"><text style="display: block; font-size: 18px;" id="week_shu_1"></text><text style="display: block; font-size: 12px;" id="week_wen_1"></text></div><div class="box" id="week_div_2"><text style="display: block; font-size: 18px;" id="week_shu_2"></text><text style="display: block; font-size: 12px;" id="week_wen_2"></text></div><div class="box" id="week_div_3"><text style="display: block; font-size: 18px;" id="week_shu_3"></text><text style="display: block; font-size: 12px;" id="week_wen_3"></text></div><div class="box" id="week_div_4"><text style="display: block; font-size: 18px;" id="week_shu_4"></text><text style="display: block; font-size: 12px;" id="week_wen_4"></text></div><div class="box" id="week_div_5"><text style="display: block; font-size: 18px;" id="week_shu_5"></text><text style="display: block; font-size: 12px;" id="week_wen_5"></text></div><div class="box" id="week_div_6"><text style="display: block; font-size: 18px;" id="week_shu_6"></text><text style="display: block; font-size: 12px;" id="week_wen_6"></text></div></div><script>let myDate = new Date();myDate.setDate(myDate.getDate() + 0);let dateArray = [];let weekArray = [];let dateTemp = '';let week = ['日', '一', '二', '三', '四', '五', '六'];for (var i = 0; i < 7; i++) {dateTemp = myDate.getFullYear() + "-" + FormatDate((myDate.getMonth() + 1)) + "-" + FormatDate(myDate.getDate()) + "";dateArray.push(dateTemp);weekArray.push(week[myDate.getDay()]);myDate.setDate(myDate.getDate() + 1);}console.log("dateArray",dateArray) //日期 2025-03-26console.log("weekArray",weekArray) //星期數據 周三console.log("dateArray[0]",dateArray[0]) //當前日期//日，或月，小于10的，在前面加0，如 2025-3-1格式化后為 2025-03-01function FormatDate(n) {if (n < 10) {return '0' + n;} else {return n;}}</script><script language="javascript" type="text/javascript" >//初始化,日期數據抬頭展示for(let i= 0 ; i<7; i ++){//console.log("點擊i",i)$('#week_shu_' + i).text(dateArray[i].substring(8,10)) //2025-03-26$('#week_wen_' + i).text(weekArray[i])}let choose_id = "0"let choose_date = dateArray[choose_id]//執行一次，默認開始日期的，后臺請求$("#week_div_" + choose_id ).addClass("box_active");queryInfo(choose_date)//綁定點擊事件for (let j = 0; j < 7; j++) {$('#week_div_' + j).on('click', (function(index) {return function() {$("#week_div_" + choose_id ).removeClass("box_active");$("#week_div_" + index ).addClass("box_active");choose_id = index//選擇日期，調用之后的邏輯處理queryInfo(dateArray[choose_id])};})(j) );}function queryInfo(param){//ajax 或其他后臺請求console.log("調用后臺接口，入參日期:",param )} </script></body>
<html>
)
學習第一講：簡介入門案例)
