使用 HTML + JavaScript 实现一个日历任务管理系统

article/2025/6/21 14:50:35

在现代快节奏的生活中，有效的时间管理变得越来越重要。本项目是一个基于 HTML 和 JavaScript 开发的日历任务管理系统，旨在为用户提供一个直观、便捷的时间管理工具。系统不仅能够清晰地展示当月日期，还支持事件的添加、编辑和删除操作，并通过本地存储（localStorage）实现数据的保存。

效果演示

image-20250531215620228

image-20250531215651307

项目概述

本项目主要包含以下核心功能：

  • 日历展示：动态生成当月日期，并支持月份切换
  • 事件管理：支持添加、编辑、删除事件
  • 类型区分：支持三种类型事件

页面结构

HTML 部分定义了页面的主要布局，包含日历头部、日历主体、模态框三大部分，其中日历日期将通过JavaScript动态生成。

<div class="calendar-container"><div class="calendar-header"><h1 id="current-month"></h1><div class="calendar-nav"><button id="prev-month">上个月</button><button id="next-month">下个月</button><button id="add-event">添加事件</button></div></div><div class="calendar-grid" id="calendar-grid"><div class="calendar-day-header">周日</div><div class="calendar-day-header">周一</div><div class="calendar-day-header">周二</div><div class="calendar-day-header">周三</div><div class="calendar-day-header">周四</div><div class="calendar-day-header">周五</div><div class="calendar-day-header">周六</div><!-- 日历日期将通过JavaScript动态生成 --></div>
</div>
<div id="event-modal" class="modal"><div class="modal-content"><span class="close">&times;</span><h2 id="modal-title">添加新事件</h2><form id="event-form"><input type="hidden" id="event-id"><input type="hidden" id="event-date"><div class="form-group"><label for="event-title">标题</label><input type="text" id="event-title" required></div><div class="form-group"><label for="event-type">类型</label><select id="event-type"><option value="event">事件</option><option value="task">任务</option><option value="important">重要</option></select></div><div class="form-group"><label for="event-start">开始时间</label><input type="time" id="event-start"></div><div class="form-group"><label for="event-end">结束时间</label><input type="time" id="event-end"></div><div class="form-group"><label for="event-description">描述</label><textarea id="event-description" rows="3"></textarea></div><div class="form-actions"><button type="button" id="delete-event" style="display: none; background: #f44336; color: white; border: none;">删除</button><button type="button" id="cancel-event">取消</button><button type="submit" id="save-event" style="background: #4CAF50; color: white; border: none;">保存</button></div></form></div>
</div>

核心功能实现

定义基础数据

获取页面核心 DOM 元素，为后续操作做准备

const calendarGrid = document.getElementById('calendar-grid');
const currentMonthElement = document.getElementById('current-month');
const prevMonthButton = document.getElementById('prev-month');
const nextMonthButton = document.getElementById('next-month');
const addEventButton = document.getElementById('add-event');
const modal = document.getElementById('event-modal');
const closeButton = document.querySelector('.close');
const cancelButton = document.getElementById('cancel-event');
const deleteButton = document.getElementById('delete-event');
const eventForm = document.getElementById('event-form');

初始化当前日期信息

let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();

读取或初始化事件数据

let events = JSON.parse(localStorage.getItem('calendarEvents')) || [];
渲染日历

日历渲染算法流程如下：

  1. 计算当月第一天和最后一天的日期对象

  2. 确定当月第一天是星期几，用于定位起始位置

  3. 填充上个月末尾的日期（灰色显示）

  4. 循环生成当月的所有日期单元格

  5. 计算是否需要补充下个月初的日期

  6. 为今天添加特殊样式

  7. 最后调用 renderEvents 方法渲染当月所有事件

function renderCalendar(month, year) {// 更新当前月份显示currentMonthElement.textContent = `${year}年${month + 1}月`;// 清除之前的日历日期while (calendarGrid.children.length > 7) {calendarGrid.removeChild(calendarGrid.lastChild);}// 获取当月第一天和最后一天const firstDay = new Date(year, month, 1);const lastDay = new Date(year, month + 1, 0);// 获取第一天是星期几 (0-6, 0是周日)const firstDayOfWeek = firstDay.getDay();// 获取上个月的最后几天const prevMonthLastDay = new Date(year, month, 0).getDate();// 添加上个月的几天for (let i = firstDayOfWeek - 1; i >= 0; i--) {const dayElement = createDayElement(prevMonthLastDay - i, true);calendarGrid.appendChild(dayElement);}// 添加当月的所有天for (let i = 1; i <= lastDay.getDate(); i++) {const dayElement = createDayElement(i, false);// 检查是否是今天const today = new Date();if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {dayElement.style.backgroundColor = '#e8f5e9';}calendarGrid.appendChild(dayElement);}// 计算还需要添加多少天const totalDays = firstDayOfWeek + lastDay.getDate();const remainingDays = 7 - (totalDays % 7);// 添加下个月的前几天if (remainingDays < 7) {for (let i = 1; i <= remainingDays; i++) {const dayElement = createDayElement(i, true);calendarGrid.appendChild(dayElement);}}// 渲染事件renderEvents();
}
渲染事件

每个日期单元格都可能包含多个事件标记。

function renderEvents() {// 获取所有日期元素const dayElements = document.querySelectorAll('.calendar-day:not(.inactive)');dayElements.forEach(dayElement => {// 清除之前的事件const existingEvents = dayElement.querySelectorAll('.event');existingEvents.forEach(event => event.remove());// 获取当前日期const day = parseInt(dayElement.querySelector('.day-number').textContent);const date = new Date(currentYear, currentMonth, day);// 查找当天的所有事件const dayEvents = events.filter(event => {const eventDate = new Date(event.date);return eventDate.toDateString() === date.toDateString();});// 添加事件到日期dayEvents.forEach(event => {const eventElement = document.createElement('div');eventElement.className = `event ${event.type}`;eventElement.textContent = `${event.startTime} ${event.title}`;eventElement.dataset.id = event.id;// 添加点击事件eventElement.addEventListener('click', (e) => {e.stopPropagation();openModal(null, event.id);});dayElement.appendChild(eventElement);});});
}
新增/编辑事件

打开表单的模态框，点击空白日期时打开添加事件模态框，点击已有事件时打开编辑该事件的模态框。

function openModal(date = null, eventId = null) {const modalTitle = document.getElementById('modal-title');const eventDateInput = document.getElementById('event-date');const eventIdInput = document.getElementById('event-id');const eventTitleInput = document.getElementById('event-title');const eventTypeInput = document.getElementById('event-type');const eventStartInput = document.getElementById('event-start');const eventEndInput = document.getElementById('event-end');const eventDescriptionInput = document.getElementById('event-description');// 重置表单eventForm.reset();if (eventId) {// 编辑现有事件const event = events.find(e => e.id === eventId);if (event) {modalTitle.textContent = '编辑事件';eventIdInput.value = event.id;eventDateInput.value = event.date;eventTitleInput.value = event.title;eventTypeInput.value = event.type;eventStartInput.value = event.startTime || '';eventEndInput.value = event.endTime || '';eventDescriptionInput.value = event.description || '';deleteButton.style.display = 'inline-block';}} else {// 添加新事件modalTitle.textContent = '添加新事件';eventIdInput.value = generateId();if (date) {// 设置日期为点击的日期const formattedDate = formatDate(date);eventDateInput.value = formattedDate;} else {// 默认为今天const today = new Date();const formattedDate = formatDate(today);eventDateInput.value = formattedDate;}deleteButton.style.display = 'none';}modal.style.display = 'block';
}

事件验证后把事件保存到本地，并重新渲染日历。

function saveEvent() {const eventId = document.getElementById('event-id').value;const eventDate = document.getElementById('event-date').value;const eventTitle = document.getElementById('event-title').value;const eventType = document.getElementById('event-type').value;const eventStart = document.getElementById('event-start').value;const eventEnd = document.getElementById('event-end').value;const eventDescription = document.getElementById('event-description').value;// 验证if (!eventTitle) {alert('请输入标题');return;}// 查找是否已存在该事件const existingEventIndex = events.findIndex(e => e.id === eventId);const event = {id: eventId,date: eventDate,title: eventTitle,type: eventType,startTime: eventStart,endTime: eventEnd,description: eventDescription};if (existingEventIndex !== -1) {// 更新现有事件events[existingEventIndex] = event;} else {// 添加新事件events.push(event);}// 保存到本地存储localStorage.setItem('calendarEvents', JSON.stringify(events));// 重新渲染日历renderCalendar(currentMonth, currentYear);// 关闭模态框closeModal();
}
删除事件
function deleteEvent() {const eventId = document.getElementById('event-id').value;if (confirm('确定要删除这个事件吗？')) {// 从数组中移除事件events = events.filter(e => e.id !== eventId);// 保存到本地存储localStorage.setItem('calendarEvents', JSON.stringify(events));// 重新渲染日历renderCalendar(currentMonth, currentYear);// 关闭模态框closeModal();}
}
月份切换

点击【上个月】【下个月】按钮切换月份，系统会自动更新日历显示。

prevMonthButton.addEventListener('click', () => {currentMonth--;if (currentMonth < 0) {currentMonth = 11;currentYear--;}renderCalendar(currentMonth, currentYear);
});nextMonthButton.addEventListener('click', () => {currentMonth++;if (currentMonth > 11) {currentMonth = 0;currentYear++;}renderCalendar(currentMonth, currentYear);
});

扩展建议

  • 增加事件提醒功能
  • 支持“日”、“周”、“月”视图切换功能
  • 添加拖拽排序功能
  • 添加右键菜单快速操作功能

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日历任务管理系统</title><style>body {margin: 0;padding: 20px;}.calendar-container {max-width: 1000px;margin: 0 auto;}.calendar-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}.calendar-nav button {background: #4CAF50;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;}.calendar-nav button:hover {background: #45a049;}.calendar-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 10px;}.calendar-day-header {text-align: center;font-weight: bold;padding: 10px;background: #f2f2f2;}.calendar-day {border: 1px solid #ddd;min-height: 100px;padding: 5px;position: relative;}.calendar-day.inactive {background: #f9f9f9;color: #aaa;}.day-number {font-weight: bold;margin-bottom: 5px;}.event {background: #e3f2fd;border-left: 3px solid #2196F3;padding: 2px 5px;margin: 2px 0;font-size: 12px;border-radius: 2px;cursor: pointer;}.event.task {background: #e8f5e9;border-left-color: #4CAF50;}.event.important {background: #ffebee;border-left-color: #f44336;}.modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.4);}.modal-content {background-color: #fefefe;margin: 10% auto;padding: 20px;border: 1px solid #888;width: 80%;max-width: 500px;}.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;cursor: pointer;}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 5px;}.form-group input, .form-group select, .form-group textarea {width: 100%;padding: 8px;box-sizing: border-box;}.form-actions {text-align: right;}.form-actions button {padding: 8px 16px;margin-left: 10px;}</style>
</head>
<body>
<div class="calendar-container"><div class="calendar-header"><h1 id="current-month"></h1><div class="calendar-nav"><button id="prev-month">上个月</button><button id="next-month">下个月</button><button id="add-event">添加事件</button></div></div><div class="calendar-grid" id="calendar-grid"><!-- 日历头部 - 星期几 --><div class="calendar-day-header">周日</div><div class="calendar-day-header">周一</div><div class="calendar-day-header">周二</div><div class="calendar-day-header">周三</div><div class="calendar-day-header">周四</div><div class="calendar-day-header">周五</div><div class="calendar-day-header">周六</div><!-- 日历日期将通过JavaScript动态生成 --></div>
</div>
<!-- 添加/编辑事件的模态框 -->
<div id="event-modal" class="modal"><div class="modal-content"><span class="close">&times;</span><h2 id="modal-title">添加新事件</h2><form id="event-form"><input type="hidden" id="event-id"><input type="hidden" id="event-date"><div class="form-group"><label for="event-title">标题</label><input type="text" id="event-title" required></div><div class="form-group"><label for="event-type">类型</label><select id="event-type"><option value="event">事件</option><option value="task">任务</option><option value="important">重要</option></select></div><div class="form-group"><label for="event-start">开始时间</label><input type="time" id="event-start"></div><div class="form-group"><label for="event-end">结束时间</label><input type="time" id="event-end"></div><div class="form-group"><label for="event-description">描述</label><textarea id="event-description" rows="3"></textarea></div><div class="form-actions"><button type="button" id="delete-event" style="display: none; background: #f44336; color: white; border: none;">删除</button><button type="button" id="cancel-event">取消</button><button type="submit" id="save-event" style="background: #4CAF50; color: white; border: none;">保存</button></div></form></div>
</div>
<script>document.addEventListener('DOMContentLoaded', function() {const calendarGrid = document.getElementById('calendar-grid');const currentMonthElement = document.getElementById('current-month');const prevMonthButton = document.getElementById('prev-month');const nextMonthButton = document.getElementById('next-month');const addEventButton = document.getElementById('add-event');const modal = document.getElementById('event-modal');const closeButton = document.querySelector('.close');const cancelButton = document.getElementById('cancel-event');const deleteButton = document.getElementById('delete-event');const eventForm = document.getElementById('event-form');let currentDate = new Date();let currentYear = currentDate.getFullYear();let currentMonth = currentDate.getMonth();let events = JSON.parse(localStorage.getItem('calendarEvents')) || [];// 初始化日历renderCalendar(currentMonth, currentYear);// 月份切换prevMonthButton.addEventListener('click', () => {currentMonth--;if (currentMonth < 0) {currentMonth = 11;currentYear--;}renderCalendar(currentMonth, currentYear);});nextMonthButton.addEventListener('click', () => {currentMonth++;if (currentMonth > 11) {currentMonth = 0;currentYear++;}renderCalendar(currentMonth, currentYear);});addEventButton.addEventListener('click', () => {openModal();});closeButton.addEventListener('click', () => {closeModal();});cancelButton.addEventListener('click', () => {closeModal();});window.addEventListener('click', (event) => {if (event.target === modal) {closeModal();}});eventForm.addEventListener('submit', (e) => {e.preventDefault();saveEvent();});deleteButton.addEventListener('click', () => {deleteEvent();});// 渲染日历function renderCalendar(month, year) {// 更新当前月份显示currentMonthElement.textContent = `${year}年${month + 1}月`;// 清除之前的日历日期while (calendarGrid.children.length > 7) {calendarGrid.removeChild(calendarGrid.lastChild);}// 获取当月第一天和最后一天const firstDay = new Date(year, month, 1);const lastDay = new Date(year, month + 1, 0);// 获取第一天是星期几 (0-6, 0是周日)const firstDayOfWeek = firstDay.getDay();// 获取上个月的最后几天const prevMonthLastDay = new Date(year, month, 0).getDate();// 添加上个月的几天for (let i = firstDayOfWeek - 1; i >= 0; i--) {const dayElement = createDayElement(prevMonthLastDay - i, true);calendarGrid.appendChild(dayElement);}// 添加当月的所有天for (let i = 1; i <= lastDay.getDate(); i++) {const dayElement = createDayElement(i, false);// 检查是否是今天const today = new Date();if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {dayElement.style.backgroundColor = '#e8f5e9';}calendarGrid.appendChild(dayElement);}// 计算还需要添加多少天const totalDays = firstDayOfWeek + lastDay.getDate();const remainingDays = 7 - (totalDays % 7);// 添加下个月的前几天if (remainingDays < 7) {for (let i = 1; i <= remainingDays; i++) {const dayElement = createDayElement(i, true);calendarGrid.appendChild(dayElement);}}// 渲染事件renderEvents();}// 创建日期元素function createDayElement(day, inactive) {const dayElement = document.createElement('div');dayElement.className = 'calendar-day' + (inactive ? ' inactive' : '');const dayNumber = document.createElement('div');dayNumber.className = 'day-number';dayNumber.textContent = day;dayElement.appendChild(dayNumber);// 如果不是非活动日期，添加点击事件if (!inactive) {dayElement.addEventListener('click', () => {const currentDate = new Date(currentYear, currentMonth, day);openModal(currentDate);});}return dayElement;}// 渲染事件到日历function renderEvents() {// 获取所有日期元素const dayElements = document.querySelectorAll('.calendar-day:not(.inactive)');dayElements.forEach(dayElement => {// 清除之前的事件const existingEvents = dayElement.querySelectorAll('.event');existingEvents.forEach(event => event.remove());// 获取当前日期const day = parseInt(dayElement.querySelector('.day-number').textContent);const date = new Date(currentYear, currentMonth, day);// 查找当天的所有事件const dayEvents = events.filter(event => {const eventDate = new Date(event.date);return eventDate.toDateString() === date.toDateString();});// 添加事件到日期dayEvents.forEach(event => {const eventElement = document.createElement('div');eventElement.className = `event ${event.type}`;eventElement.textContent = `${event.startTime} ${event.title}`;eventElement.dataset.id = event.id;// 添加点击事件eventElement.addEventListener('click', (e) => {e.stopPropagation();openModal(null, event.id);});dayElement.appendChild(eventElement);});});}// 打开模态框function openModal(date = null, eventId = null) {const modalTitle = document.getElementById('modal-title');const eventDateInput = document.getElementById('event-date');const eventIdInput = document.getElementById('event-id');const eventTitleInput = document.getElementById('event-title');const eventTypeInput = document.getElementById('event-type');const eventStartInput = document.getElementById('event-start');const eventEndInput = document.getElementById('event-end');const eventDescriptionInput = document.getElementById('event-description');// 重置表单eventForm.reset();if (eventId) {// 编辑现有事件const event = events.find(e => e.id === eventId);if (event) {modalTitle.textContent = '编辑事件';eventIdInput.value = event.id;eventDateInput.value = event.date;eventTitleInput.value = event.title;eventTypeInput.value = event.type;eventStartInput.value = event.startTime || '';eventEndInput.value = event.endTime || '';eventDescriptionInput.value = event.description || '';deleteButton.style.display = 'inline-block';}} else {// 添加新事件modalTitle.textContent = '添加新事件';eventIdInput.value = generateId();if (date) {// 设置日期为点击的日期const formattedDate = formatDate(date);eventDateInput.value = formattedDate;} else {// 默认为今天const today = new Date();const formattedDate = formatDate(today);eventDateInput.value = formattedDate;}deleteButton.style.display = 'none';}modal.style.display = 'block';}// 关闭模态框function closeModal() {modal.style.display = 'none';}// 保存事件function saveEvent() {const eventId = document.getElementById('event-id').value;const eventDate = document.getElementById('event-date').value;const eventTitle = document.getElementById('event-title').value;const eventType = document.getElementById('event-type').value;const eventStart = document.getElementById('event-start').value;const eventEnd = document.getElementById('event-end').value;const eventDescription = document.getElementById('event-description').value;// 验证if (!eventTitle) {alert('请输入标题');return;}// 查找是否已存在该事件const existingEventIndex = events.findIndex(e => e.id === eventId);const event = {id: eventId,date: eventDate,title: eventTitle,type: eventType,startTime: eventStart,endTime: eventEnd,description: eventDescription};if (existingEventIndex !== -1) {// 更新现有事件events[existingEventIndex] = event;} else {// 添加新事件events.push(event);}// 保存到本地存储localStorage.setItem('calendarEvents', JSON.stringify(events));// 重新渲染日历renderCalendar(currentMonth, currentYear);// 关闭模态框closeModal();}// 删除事件function deleteEvent() {const eventId = document.getElementById('event-id').value;if (confirm('确定要删除这个事件吗？')) {// 从数组中移除事件events = events.filter(e => e.id !== eventId);// 保存到本地存储localStorage.setItem('calendarEvents', JSON.stringify(events));// 重新渲染日历renderCalendar(currentMonth, currentYear);// 关闭模态框closeModal();}}// 生成唯一IDfunction generateId() {return Date.now().toString(36) + Math.random().toString(36).substr(2);}// 格式化日期为YYYY-MM-DDfunction formatDate(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0');const day = String(date.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;}});
</script>
</body>
</html>

http://www.hkcw.cn/article/KgmkByNprL.shtml

相关文章

最卸载器——Geek Uninstaller 使用指南

最卸载器——Geek Uninstaller 使用指南

Geek Uninstaller 是一款轻量级的第三方卸载工具&#xff0c;专为 Windows 系统设计&#xff0c;提供比系统默认卸载器更彻底的应用清除能力。它体积小、绿色免安装&#xff0c;使用起来简单直观&#xff0c;但功能却不含糊。 一、为什么要用 Geek Uninstaller&#xff1f; Wi…
阅读更多...
在QT中，利用charts库绘制FFT图形

在QT中，利用charts库绘制FFT图形

第1章 添加charts库 1.1 .pro工程添加chart库 1.1.1 在.pro工程里面添加charts库 1.1.2 在需要使用的地方添加这两个库函数&#xff0c;顺序一点不要搞错&#xff0c;先添加.pro&#xff0c;否则编译器会找不到这两个.h文件。 第2章 Charts关键绘图函数 2.1 QChart 类 QChart 是…
阅读更多...
5G-A：开启通信与行业变革的新时代

5G-A：开启通信与行业变革的新时代

最近&#xff0c;不少细心的用户发现手机信号标识悄然发生了变化&#xff0c;从熟悉的 “5G” 变成了 “5G-A”。这一小小的改变&#xff0c;却蕴含着通信技术领域的重大升级&#xff0c;预示着一个全新的通信时代正在向我们走来。今天&#xff0c;就让我们深入了解一下 5G-A&a…
阅读更多...
web安全开发，在线%机器学习异常流量检测系统%开发demo

web安全开发，在线%机器学习异常流量检测系统%开发demo

框架:html,css,jquery,echart,python,flask,sklearn,uniapp,apk,kdd和nsl,mysql数据库。 经验心得 这是一个响应式的 H5 页面&#xff0c;适用于手机端和电脑端&#xff0c;平板&#xff0c;各种小程序。本来想vxxx小程序和AndroidStudo写两个但是工作量太多了加上也不是商用&…
阅读更多...
每日算法-250531

每日算法-250531

每日算法学习记录 - 250531 今天完成了两道 LeetCode 题目&#xff0c;主要用到了前缀和的思想。记录如下&#xff1a; 1. 2559. 统计范围内的元音字符串数 题目 思路 前缀和 解题过程 我们可以先预处理出一个前缀和数组 nums&#xff0c;其中 nums[i] 表示 words 数组中从下…
阅读更多...
CTFHub-RCE eval执行

CTFHub-RCE eval执行

观察源代码 我们可以发现源代码是request请求&#xff0c;所以我们可以通过GET或者POST请求&#xff0c;利用cmd参数进行命令执行 判断是Windows还是Linux 用GET请求 /?cmdsystem(ipconfig); 无回显 说明不是Windows系统 /?cmdsystem(ifconfig); 可以发现有回显&…
阅读更多...
MCP架构深度解析：从基础原理到核心设计

MCP架构深度解析：从基础原理到核心设计

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 持续学习&#xff0c;不断…
阅读更多...
MySql（九）

MySql（九）

目录 条件查询 1&#xff09;准备一张表 2&#xff09;插入数据 3&#xff09;条件查询格式 1---比较运算符 >大于 2---比较运算符 < 小于 3---比较运算符 > 大于等于 4---比较运算符 < 小于等于 5---比较运算符 ! 不等于 6---比较运算符 <> 不等于 7---比较…
阅读更多...
赛博算命之“帝王之术”——奇门遁甲的JAVA实现

赛博算命之“帝王之术”——奇门遁甲的JAVA实现

个人主页 文章专栏 文章目录 个人主页文章专栏 #前言#背景介绍#原理分析**一、干支系统计算**1. **四柱干支生成**2. **旬首与空亡判断** **二、九宫格与洛书模型**1. **地盘固定排布**2. **天盘动态移动** **三、阴阳遁与局数计算**1. **阴阳遁判断**2. **局数计算** **四、九…
阅读更多...
C++ 栈（Stack）与队列（Queue）深度解析：从原理到实战

C++ 栈（Stack）与队列（Queue）深度解析：从原理到实战

一、栈&#xff08;Stack&#xff09;&#xff1a;后进先出&#xff08;LIFO&#xff09;的线性结构 1. 核心特性与应用场景 特性&#xff1a;仅允许在栈顶进行元素的插入&#xff08;push&#xff09;和删除&#xff08;pop&#xff09;操作&#xff0c;遵循 “后进先出” 原…
阅读更多...
【C++高级主题】命令空间(五)：类、命名空间和作用域

【C++高级主题】命令空间(五)：类、命名空间和作用域

目录 一、实参相关的查找&#xff08;ADL&#xff09;&#xff1a;函数调用的 “智能搜索” 1.1 ADL 的核心规则 1.2 ADL 的触发条件 1.3 ADL 的典型应用场景 1.4 ADL 的潜在风险与规避 二、隐式友元声明&#xff1a;类与命名空间的 “私密通道” 2.1 友元声明的基本规则…
阅读更多...
Python Day38 学习

Python Day38 学习

继续昨日的内容浙大疏锦行 学习一下两种机制&#xff1a;try-except机制和try-except-else-finally机制 try-except 摘自讲义 try&#xff1a;把你认为可能会出错的代码放在这里。 except&#xff1a;如果 try 块里的代码真的出错了&#xff08;从出错开始就不会继续执行t…
阅读更多...
linux 1.0.7

linux 1.0.7

用户和权限的含义与作用 linux中的用户和文件 用户的权限是非常重要的 而且有些程序需要使用管理员身份去执行 这些都是非常重要的 不可能让所有的人拥有所有的权限 这样的工具可以避免非法的手段来修改计算机中的数据 linux之所以安全还是权限管理做的很棒 每个登录的用户都有…
阅读更多...
BFD 基本工作原理与实践：如何与 VRRP 联动实现高效链路故障检测？

BFD 基本工作原理与实践：如何与 VRRP 联动实现高效链路故障检测？

BFD 基本工作原理与实践&#xff1a;如何与 VRRP 联动实现高效链路故障检测&#xff1f; &#x1f310; BFD 的基本原理BFD 主要特点BFD 工作机制 &#x1f500; 为什么 VRRP 需要 BFD&#xff1f;&#x1f527; BFD VRRP 配置实战&#xff08;华为设备&#xff09;&#x1f4…
阅读更多...
python中将一个列表样式的字符串转换成真正列表的办法以及json.dumps()和 json.loads()

python中将一个列表样式的字符串转换成真正列表的办法以及json.dumps()和 json.loads()

今天学习python的web.py&#xff0c;返回的内容为列表样式的字符串&#xff0c;如下 string_data "[(13.212.95.888, 8000, 10), (13.212.95.999, 8000, 10)]" 此时&#xff0c;如果想提取第一个元素&#xff0c;也就是(13.212.95.888, 8000, 10)&#xff0c;不能…
阅读更多...
C++：指针（Pointers）

C++：指针（Pointers）

目录 什么是指针&#xff1f; 为什么需要指针&#xff1f; 1. 访问堆&#xff08;Access Heap&#xff09; 2. 资源管理&#xff08;Resource Management&#xff09; 3. 参数传递&#xff08;Parameter Passing&#xff09; 如何声明和使用指针&#xff1f; 如何利用指…
阅读更多...
Acrobat DC v25.001 最新专业版已破，像word一样编辑PDF！

Acrobat DC v25.001 最新专业版已破，像word一样编辑PDF！

在数字化时代&#xff0c;PDF文件以其稳定性和通用性成为了文档交流和存储的热门选择。无论是阅读、编辑、转换还是转曲&#xff0c;大家对PDF文件的操作需求日益增加。因此&#xff0c;一款出色的PDF处理软件不仅要满足多样化的需求&#xff0c;还要通过简洁的界面和强大的功能…
阅读更多...
RabbitMQ 高级特性

RabbitMQ 高级特性

准备工作 1. 创建 Spring 项目 2. 引入依赖 3.修改配置文件 RabbitMQ官网 AMQP 0-9-1 Protocol Extensions | RabbitMQ 消息确认 消息确认机制 生产者发送消息,到达消费者后,可能会有以下情况: 1.消息处理成功 2.消息处理异常 RabbitMQ 向消费者发送消息之后,会把消息删除…
阅读更多...
机器学习：欠拟合、过拟合、正则化

机器学习：欠拟合、过拟合、正则化

本文目录&#xff1a; 一、欠拟合二、过拟合三、拟合问题原因及解决办法四、正则化&#xff1a;尽量减少高次幂特征的影响&#xff08;一&#xff09;L1正则化&#xff08;二&#xff09;L2正则化&#xff08;三&#xff09;L1正则化与L2正则化的对比 五、正好拟合代码&#xf…
阅读更多...
电路学习（二）之电容

电路学习（二）之电容

电容的基本功能是通交流隔直流、存储电量&#xff0c;在电路中可以进行滤波、充放电。 1.什么是电容&#xff1f; &#xff08;1&#xff09;电容定义&#xff1a;电容器代表了器件存储电荷的能力&#xff0c;通俗来理解是两块不连通的导体与绝缘的中间体组成。当给电容充电时…
阅读更多...
推荐文章

Copyright @ 2022~2023