潍坊做网站教程百度推广官网入口
医院挂号，可能需要切换日期，选择一周内的某一天。
提供一周内的日期段，通过点击，切换到不同天。
简单的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>