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日

相关文章

  • JavaScript的漂亮的代码片段

    JavaScript的漂亮的代码片段是指在保证实现功能的前提下，代码的可读性、易扩展性等方面都表现出色的代码段。以下是编写漂亮的JavaScript代码片段的一些攻略： 细分代码段 为了提高可读性和可维护性，代码通常需要将不同的任务分成不同的部分。这些部分通常是单独的函数或方法。函数的任务应该足够小，不超过几十行，这样就可以更好地组织代码。有了这个设计，我们…

    JavaScript 2023年6月10日
    00

  • 如何为你的JavaScript代码日志着色详解

    下面是关于如何为JavaScript代码日志着色的完整攻略： 为什么需要为JavaScript代码日志着色 当我们在开发JavaScript应用程序时，经常需要查看日志信息来调试代码、排除错误等。但是，当日志信息量过大时，我们很难一眼区分出哪些是错误信息、哪些是调试信息、哪些是警告信息等。因此，着色的日志信息能够更快更直观地帮助我们了解代码的执行情况，提高代…

    JavaScript 2023年5月28日
    00

  • WebAssembly初尝试

    前言 之前老是听别人提到WebAssembly这个词，一直对其比较模糊，不能理解是个啥东西，后来自己实践了一下，发现其实就是一种提高代码性能的手段。 简介 WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和 Rust 等低级源语言提供一个高效的编译目标。（解释来自M…

    JavaScript 2023年4月17日
    00

  • JS自动倒计时30秒后按钮才可用(两种场景)

    当我们需要用户在规定时间内完成某些操作，而不希望用户在规定时间之前提交多次请求时，可以使用JS自动倒计时，以此限制用户在规定时间之前不能再触发该操作。 以下是JS自动倒计时的完整攻略，包含两种场景的具体实现方法。 场景一：按钮点击后30秒后才可再次触发 HTML代码 首先，我们需要在HTML代码中创建一个按钮，例如以下代码： <button id=&q…

    JavaScript 2023年6月10日
    00

  • JS匿名函数类生成方式实例分析

    JS匿名函数类生成方式是指通过使用匿名函数的方式创建JS类，使得该类的定义与创建同时进行，并在全局作用域中生效。这种方式的优点是可以防止类命名污染和作用域冲突，同时也可以封装类的内部实现。 下面是一个JS匿名函数类的示例代码： var someClass = (function() { var privateVariable = 10; function p…

    JavaScript 2023年5月27日
    00

  • JavaScript DOM 添加事件

    JavaScript DOM 添加事件的完整攻略如下： 1. 确认要添加事件的HTML元素 在JavaScript中，我们首先需要确认要给哪个HTML元素添加事件。这个HTML元素可以是任何一个有效的DOM元素，比如一个按钮，一个输入框，一个复选框等等。我们可以使用DOM选择器（getElementById()、querySelector()等）去获取这个H…

    JavaScript 2023年6月10日
    00

  • 深入理解javascript严格模式(Strict Mode)

    深入理解JavaScript严格模式 JavaScript严格模式(Strict Mode)是ECMAScript 5引入了一种新的执行模式，主要用于消除JavaScript语言的一些不合理、不严谨之处，减少一些怪异行为。 启用严格模式 全局启用严格模式 要想在全局范围启用严格模式，需要在JavaScript源码文件的顶部添加如下代码： "use …

    JavaScript 2023年5月28日
    00

  • jQuery实现动态加载(按需加载)javascript文件的方法分析

    下面为您详细讲解“jQuery实现动态加载(按需加载)javascript文件的方法分析”的完整攻略。 什么是动态加载javascript文件？ 在网站开发中，js是必不可少的组成部分。但有时我们的网页可能需要加载多个js文件，如果在页面加载的时候将所有的js文件一次性下载就会影响到页面的加载速度。 因此，动态加载(按需加载)javascript文件成为一种…

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