这个HTML有办法这样显示吗

ly445414237 · 发表于 7 天前

万年历.rar (8.44 KB, 下载次数: 3)

人杰啊 · 发表于 7 天前

有点听不懂

aipca · 发表于 7 天前

度娘搜一下黄历，然后看看别人的源码参考一下

易有易用 · 发表于 7 天前

ai生成一个html万年历页面不就行了么

ly445414237 · 发表于 7 天前

易有易用发表于 2025-3-19 13:29
ai生成一个html万年历页面不就行了么

生成出来不也是这样？我是要能自定义显示

jianxi34 · 发表于 7 天前

css+js能实现

jingyi11023995 · 发表于 5 天前

<!DOCTYPE html>
<html>
<head>
<title>交互式日历</title>
<style>
      /* 保持原有样式不变 */
      table {
         border-collapse: collapse;
         width: 100%;
         margin: 20px 0;
      }
      th, td {
         border: 1px solid #dddddd;
         text-align: center;
         padding: 8px;
      }
      th {
         background-color: #f2f2f2;
      }
      .weekend {
         background-color: #ffe6e6;
      }
      /* 添加下拉菜单样式 */
      .controls {
         margin: 20px 0;
      }
      select {
         padding: 8px;
         margin-right: 10px;
      }
</style>
</head>
<body>
<div class="controls">
      <select id="year-select"></select>
      <select id="month-select">
         <option value="1">1月</option>
         <option value="2">2月</option>
         <option value="3">3月</option>
         <option value="4">4月</option>
         <option value="5">5月</option>
         <option value="6">6月</option>
         <option value="7">7月</option>
         <option value="8">8月</option>
         <option value="9">9月</option>
         <option value="10">10月</option>
         <option value="11">11月</option>
         <option value="12">12月</option>
      </select>
</div>

<h2 id="month-year"></h2>
<table id="calendar">
      <thead>
         <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
         </tr>
      </thead>
      <tbody>
         
      </tbody>
</table>

<script>
      // 初始化年份选择
      function initYearSelect() {
         const yearSelect = document.getElementById('year-select');
         const currentYear = new Date().getFullYear();

         // 添加前后10年的选项
         for (let i = currentYear - 10; i <= currentYear + 10; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i + '年';
            yearSelect.appendChild(option);
         }

         // 设置默认选中当前年份
         yearSelect.value = currentYear;
      }

      // 计算日历数据（新增year和month参数）
      function calculateCalendarData(year, month) {
         // 获取月份信息
         const firstDay = new Date(year, month - 1, 1);
         const lastDay = new Date(year, month, 0);

         // 计算总天数和起始星期
         const totalDays = lastDay.getDate();
         const startDay = firstDay.getDay();

         // 计算需要的行数
         let totalRows = Math.ceil((totalDays + startDay) / 7);

         // 创建二维数组存储每行数据
         const calendarMatrix = [];
         let dayCounter = 1;

         for (let row = 0; row < totalRows; row++) {
            const currentRow = [];

            for (let col = 0; col < 7; col++) {
                  // 计算当前单元格对应的日期
                  const currentDate = row * 7 + col - startDay + 1;

                  if (currentDate > 0 && currentDate <= totalDays) {
                     currentRow.push({
                        date: currentDate,
                        day: new Date(year, month - 1, currentDate).getDay()
                     });
                  } else {
                     currentRow.push(null); // 用null表示空白单元格
                  }
            }
            calendarMatrix.push(currentRow);
         }

         return calendarMatrix;
      }

      // 生成日历表格（新增year和month参数）
      function generateCalendar(year, month) {
         const calendarData = calculateCalendarData(year, month);
         const calendarBody = document.querySelector('#calendar tbody');
         calendarBody.innerHTML = '';

         calendarData.forEach(rowData => {
            const row = document.createElement('tr');

            rowData.forEach(cellData => {
                  const cell = document.createElement('td');

                  if (cellData) {
                     cell.textContent = `${month}月${cellData.date}日`;
                     if (cellData.day === 0 || cellData.day === 6) {
                        cell.classList.add('weekend');
                     }
                  }
                  // 空白单元格保持为空
                  row.appendChild(cell);
            });

            calendarBody.appendChild(row);
         });

         // 设置月份标题
         document.getElementById('month-year').textContent =
            `${year}年${month}月`;
      }

      // 事件监听
      function setupEventListeners() {
         const yearSelect = document.getElementById('year-select');
         const monthSelect = document.getElementById('month-select');

         yearSelect.addEventListener('change', function() {
            const selectedYear = parseInt(this.value);
            const selectedMonth = parseInt(monthSelect.value);
            generateCalendar(selectedYear, selectedMonth);
         });

         monthSelect.addEventListener('change', function() {
            const selectedYear = parseInt(yearSelect.value);
            const selectedMonth = parseInt(this.value);
            generateCalendar(selectedYear, selectedMonth);
         });
      }

      // 初始化应用
      function init() {
         initYearSelect();
         const currentYear = new Date().getFullYear();
         const currentMonth = new Date().getMonth() + 1;
         generateCalendar(currentYear, currentMonth);
         setupEventListeners();
      }

      // 启动应用
      init();
</script>
</body>
</html>

xizhihan · 发表于昨天 23:43

这个就让AI生成一下好了呀，然后如果要易语言调用那就水星或miniblink内核

		自动登录	找回密码
密码			注册

[其它求助] 这个HTML有办法这样显示吗

浏览过的版块