html日历js代码

晋新宁 3周前 9浏览 0评论

HTML日历JS代码是一种非常实用的Web开发工具，可以用来展示重要日期、安排活动或者显示日程安排。下面是一个简单的HTML日历JS代码示例：

<!DOCTYPE html>
<html>
<head>
<title>HTML日历JS代码示例</title>
<script>
function showCalendar() {
  var d = new Date();
  var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  var month = d.getMonth();
  var year = d.getFullYear();
  var firstDay = new Date(year, month, 1);
  var startingDay = firstDay.getDay();
  var monthLength = new Date(year, month+1, 0).getDate();

  var calendarTable = document.getElementById("calendar");

  // clear any existing calendar
  calendarTable.innerHTML = "";

  // month and year header
  var headerRow = document.createElement("tr");
  var header = document.createElement("td");
  header.setAttribute("colspan", "7");
  header.innerText = months[month]+" "+year;
  headerRow.appendChild(header);
  calendarTable.appendChild(headerRow);

  // day labels
  var labelRow = document.createElement("tr");
  var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
  for (var i = 0; i < days.length; i++) {
    var label = document.createElement("td");
    label.innerText = days[i];
    labelRow.appendChild(label);
  }
  calendarTable.appendChild(labelRow);

  // fill in calendar
  var date = 1;
  for (var i = 0; i < 6; i++) {
    var weekRow = document.createElement("tr");
    for (var j = 0; j < 7; j++) {
      if (i === 0 && j < startingDay) {
        var day = document.createElement("td");
        var dayText = document.createTextNode("");
        day.appendChild(dayText);
        weekRow.appendChild(day);
      } else if (date > monthLength) {
        break;
      } else {
        var day = document.createElement("td");
        var dayText = document.createTextNode(date);
        day.appendChild(dayText);
        weekRow.appendChild(day);
        date++;
      }
    }
    calendarTable.appendChild(weekRow);
  }
}

window.onload = showCalendar;
</script>
</head>
<body>
<table id="calendar"></table>
</body>
</html>

这段代码的功能是：根据当前日期生成当月的日历。它包含了一个名为“showCalendar”的函数，用于生成日历的HTML代码，并将其添加到浏览器窗口中。该函数使用了多种JavaScript API，例如Date对象、getElementById方法、appendChild方法等。showCalendar函数首先计算出当前月份的第一天是星期几，然后根据这个值将第一行第一天之前的单元格设置为空。

接下来，该函数为表格创建了一个标题行，包含当前月份和年份的文本，并使用setAttribute方法为表头单元格设置span属性，以使其跨越整个表格的列数。

然后通过一个简单的for循环创建了星期几的标签行，然后通过另一个for循环填充日历的单元格。由于每月的天数不同，该函数使用Date对象获取当月最后一天的日期并计算月份的长度。只有在填充日历的for循环中，当变量“date”大于月份的长度时才停止。

通过使用这个简单的HTML日历JS代码，可以轻松地创建实用的日程安排并展示给用户。

上一篇 jquery 保存样式

下一篇 jquery 从头部插入

网站导航

网站导航

最近发表

文章归档

html日历js代码