1. Python技术站首页
  2. 其他
  3. JavaScript

js+html+css实现简单日历效果

• JavaScript

下面是 "js+html+css实现简单日历效果"的攻略：

1. 导入CSS和JS文件

在head标签中导入显示日历所需的CSS和JS文件

<head>
  <link rel="stylesheet" type="text/css" href="calendarStyle.css">
  <script type="text/javascript" src="calendar.js"></script>
</head>

2. HTML的元素和结构

在页面中添加一个包含日历的div元素：

<div class="calendar-container">
  <div class="calendar-header">
    <button class="btn prev">上一月</button>
    <h2 class="calendar-title"></h2>
    <button class="btn next">下一月</button>
  </div>
  <table class="calendar-table">
    <thead>
      <tr class="calendar-weekdays"></tr>
    </thead>
    <tbody class="calendar-days"></tbody>
  </table>
</div>

容器元素有一个类“calendar-container”，有两个子元素 - 头部和表格。头部包括一个标题、前进按钮和后退按钮。表格通过thead元素显示哪些日期在哪些列。在tbody元素中，将它们的标头(列)显示“MON”、“TUE”、“WED”等式。

3. JS的逻辑实现

JavaScript文件将创建日期，以填充日历表。定义一个名为“Calendar”类的构造函数，并将其用于创建新的日历实例。

创建Calendar的步骤：

  1. 获取当前月份和年份；
  2. 创建一个填充表格的函数；
  3. 创建一个新的日期对象，设置年份和月份，然后设置为当前月份的第一天；
  4. 根据当月第一日是星期几，确定日历的初始列数；
  5. 表格每个单元格的循环是为期一个月的日期。
  6. 将每个表格单元格填充到html日历表中；
  7. 自增一个月，直到日历结束。
class Calendar {
  constructor(selector, events) {
    this.selector = selector;
    this.events = events;
    this.date = new Date();
    this.currentYear = this.date.getFullYear();
    this.currentMonth = this.date.getMonth();
    this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
    this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
    this.container = document.querySelector(selector);
    this.title = this.container.querySelector(".calendar-title");
    this.weekdays = this.container.querySelector(".calendar-weekdays");
    this.days = this.container.querySelector(".calendar-days");
    this.prevBtn = this.container.querySelector(".prev");
    this.nextBtn = this.container.querySelector(".next");
    this.createCalendar();
  }

  createCalendar() {
    this.title.textContent = `${this.currentYear}年${this.currentMonth + 1}月`;
    this.weekdays.innerHTML = "";
    this.days.innerHTML = "";

    let weekdayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    for (let i = 0; i < weekdayName.length; i++) {
      let weekday = weekdayName[i];
      let th = document.createElement("th");
      th.textContent = weekday;
      this.weekdays.appendChild(th);
    }

    let day = 1;
    let row = document.createElement("tr");
    for (let i = 0; i < this.currentDay; i++) {
      let td = document.createElement("td");
      row.appendChild(td);
    }

    while (day <= this.daysInMonth) {
      let td = document.createElement("td");
      td.textContent = day;
      row.appendChild(td);

      if ((day + this.currentDay) % 7 === 0) {
        this.days.appendChild(row);
        row = document.createElement("tr");
      }

      day++;
    }

    if (row.children.length > 0) {
      this.days.appendChild(row);
    }

    this.prevBtn.addEventListener("click", () => {
      this.currentMonth--;
      if (this.currentMonth === -1) {
        this.currentMonth = 11;
        this.currentYear--;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });

    this.nextBtn.addEventListener("click", () => {
      this.currentMonth++;
      if (this.currentMonth === 12) {
        this.currentMonth = 0;
        this.currentYear++;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });
  }
}

let calendar = new Calendar(".calendar-container");

4. CSS的样式设置

最后，为日历设置CSS样式来使其更美观和易读。以本文为例给出样式修改：

.calendar-container {
  width: 500px;/*日历宽度*/
  margin: auto;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  background-color: #fff;
  padding: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-title {
  margin: 0;
  font-size: 20px;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-weekdays {
  text-align: center;
  font-weight: bold;
  background-color: #f6f6f6;
}

.calendar-weekdays th {
  padding: 5px;
}

.calendar-days td {
  padding: 5px;
  text-align: center;
}

.calendar-days td.is-today {
  color: white;
  background-color: #2e90d9;
}

.calendar-days td.is-event {
  color: white;
  background-color: #42c878;
}

.prev, .next {
  padding: 12px;
  border: none;
  border-radius: 2px;
  background-color: #f6f6f6;
  color: #333;
  cursor: pointer;
}

.prev:hover, .next:hover {
  background-color: #e9e9e9;
}

示例

示例1: 在HTML中修改日历样式:

<div class="calendar-container" style="width: 800px;">
  <div class="calendar-header">
    <button class="btn prev">上一月</button>
    <h2 class="calendar-title"></h2>
    <button class="btn next">下一月</button>
  </div>
  <table class="calendar-table">
    <thead>
      <tr class="calendar-weekdays"></tr>
    </thead>
    <tbody class="calendar-days"></tbody>
  </table>
</div>

此示例通过设置calendar-container的width，修改日历的宽度。

示例2: 在JS中修改日历的顺序

假设我们要在日历头部添加一个显示今日日期的元素，并且将日历的前进/后退按钮调整为标题下方。

修改JS代码如下：

class Calendar {
  constructor(selector, events) {
    this.selector = selector;
    this.events = events;
    this.date = new Date();
    this.currentYear = this.date.getFullYear();
    this.currentMonth = this.date.getMonth();
    this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
    this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
    this.container = document.querySelector(selector);
    this.header = document.createElement("div");// 添加的元素
    this.title = this.container.querySelector(".calendar-title");
    this.subTitle = document.createElement("p");// 添加的元素
    this.weekdays = this.container.querySelector(".calendar-weekdays");
    this.days = this.container.querySelector(".calendar-days");
    this.prevBtn = this.container.querySelector(".prev");
    this.nextBtn = this.container.querySelector(".next");
    this.createCalendar();
  }

  createCalendar() {
    this.header.classList.add("calendar-header");// 添加的元素
    this.subTitle.classList.add("calendar-subtitle");// 添加的元素
    this.header.appendChild(this.title);// 修改日历头部
    this.header.appendChild(this.subTitle);// 添加的元素
    this.container.insertBefore(this.header, this.weekdays);// 修改日历头部顺序
    this.title.textContent = `${this.currentYear}年${this.currentMonth + 1}月`;
    this.subTitle.textContent = `${this.date.getFullYear()}年${this.date.getMonth() + 1}月${this.date.getDate()}日`;
    this.weekdays.innerHTML = "";
    this.days.innerHTML = "";

    let weekdayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    for (let i = 0; i < weekdayName.length; i++) {
      let weekday = weekdayName[i];
      let th = document.createElement("th");
      th.textContent = weekday;
      this.weekdays.appendChild(th);
    }

    let day = 1;
    let row = document.createElement("tr");
    for (let i = 0; i < this.currentDay; i++) {
      let td = document.createElement("td");
      row.appendChild(td);
    }

    while (day <= this.daysInMonth) {
      let td = document.createElement("td");
      td.textContent = day;
      row.appendChild(td);

      if ((day + this.currentDay) % 7 === 0) {
        this.days.appendChild(row);
        row = document.createElement("tr");
      }

      day++;
    }

    if (row.children.length > 0) {
      this.days.appendChild(row);
    }

    this.prevBtn.addEventListener("click", () => {
      this.currentMonth--;
      if (this.currentMonth === -1) {
        this.currentMonth = 11;
        this.currentYear--;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });

    this.nextBtn.addEventListener("click", () => {
      this.currentMonth++;
      if (this.currentMonth === 12) {
        this.currentMonth = 0;
        this.currentYear++;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });
  }
}

let calendar = new Calendar(".calendar-container");

在此示例中，我们创建了一个新的元素‘div’，并在标记中为其添加了类“calendar-header”(因为这是我们想要在页面顶部放置的)和“calendar-subtitle”，以便在日历头部中创建一个新元素。我们通过使用this.header.appendChild(this.title)和this.header.appendChild(this.subTitle)修改了日历头部。最后，通过使用this.container.insertBefore(this.header, this.weekdays)方法，将新元素添加到旧元素的前面。

通过以上两个示例，你需要了解以下几个方面来实现简单的日历：

  • 在HTML中添加元素和结构；
  • 在CSS中设置布局和样式；
  • 在JS中设置逻辑和动态效果。

总结:

这里给出了如何使用js+html+css实现简单日历的完整攻略，包括所需的HTML结构，CSS样式和Javascript逻辑实现。同时，我们还给出了两个示例，演示如何在HTML和JS中对日历样式和顺序进行更改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js+html+css实现简单日历效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Html5新增了哪些功能

    HTML5是HTML最新的版本，它新增了许多新功能和更新了一些旧有的功能。下面将详细介绍HTML5新增的主要功能。 1. 语义化标签 HTML5新增了一些语义化标签，方便开发者更好地描述网页中的内容和结构，便于搜索引擎和屏幕阅读器解析。比如： <header> <h1>这是网站标题</h1> <nav> &lt…

    JavaScript 2023年6月11日
    00

  • springboot项目如何防止XSS攻击

    在SpringBoot项目中防止XSS攻击可以采取以下措施： 使用HTML转义库 在应用中使用HTML转义库比如jsoup、owasp-esapi、htmlentities等，可以过滤掉HTML标签并且转义掉敏感字符，这样可以有效避免XSS攻击。 例如，在Spring Boot项目中，我们可以使用前面提到的jsoup库来进行HTML转义： String sa…

    JavaScript 2023年6月11日
    00

  • 一个Js文件函数中调用另一个Js文件函数的方法演示

    为了更好地讲解“一个Js文件函数中调用另一个Js文件函数的方法演示”， 我们将分为以下几个部分介绍： 准备工作：建立两个JS文件，定义函数 示例一：在HTML文件中通过script标签依次引入两个JS文件并演示调用 示例二：通过webpack打包两个JS文件并演示调用 1. 准备工作 我们先建立两个JS文件，分别命名为 file1.js 和 file2.js…

    JavaScript 2023年5月27日
    00

  • Javascript中使用exec进行正则表达式全局匹配时的注意事项

    在JavaScript中，exec()方法是用于在字符串中执行一个正则表达式搜索的方法，它返回一个包含查找结果的数组。而对于全局匹配，exec() 方法可以在同一个字符串中多次运行来查找所有匹配，但是这也涉及到一些注意事项。 注意事项 必须使用while循环或递归来遍历所有匹配 在使用exec()方法时，需要使用while循环或递归来遍历所有匹配。每次调用e…

    JavaScript 2023年6月10日
    00

  • 轻松掌握JavaScript中的Math object数学对象

    轻松掌握JavaScript中的Math Object数学对象 在JavaScript中，Math对象是一个全局对象，提供了许多数学计算相关的方法和属性，使得我们可以轻松完成数学计算并得到期望的结果。本文将介绍Math对象常用的方法和属性，帮助你快速掌握JavaScript中的数学计算。 常用方法 Math.abs() Math.abs() 方法返回一个数的…

    JavaScript 2023年5月28日
    00

  • JS实战例子之实现自动打字机动效

    下面是JS实战例子之实现自动打字机动效的完整攻略。 简介 实现自动打字机动效的核心是要让文字逐字逐句显示。这个效果可以通过JS动态改变文字的内容和样式来实现。主要步骤包括： 编写html和css样式； 在JS中获取要显示的文字并逐字逐句显示。 下面我们详细讲解这两个步骤。 编写html和css样式 首先，在html中放置一段要显示的文字，例如： <p …

    JavaScript 2023年5月28日
    00

  • js获取浏览器基本信息大全

    获取浏览器基本信息是前端开发中比较常用的一个需求。通过 JavaScript 可以获取浏览器的类型、版本号、操作系统类型等信息。下面就来详细讲解一下如何获取浏览器基本信息。 获取浏览器类型和版本号 可以使用 navigator.userAgent 获取当前浏览器的 UserAgent 字符串，然后通过正则表达式匹配出浏览器类型和版本号。 // 获取浏览器类型…

    JavaScript 2023年6月11日
    00

  • 详解JavaScript中的链式调用

    下面我来详细讲解一下JavaScript中的链式调用。 什么是链式调用 链式调用指的是在一个对象上连续调用多个方法，实现简洁明了的代码结构。例如： obj.method1().method2().method3(); 其中，obj是一个对象，method1()、method2()、method3()是该对象上的三个方法。链式调用可以让代码更加简洁和易读，同时…

    JavaScript 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部