当前位置： 首页 > news >正文

写一个小日历

news 2026/3/27 21:54:26

以下是一个示例，展示了如何创建一个基本的日历

日历

1. HTML 结构

首先，创建一个基本的 HTML 结构，用于展示日历。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日历</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="calendar"><div class="header"><button id="prev">上一月</button><h2 id="monthYear"></h2><button id="next">下一月</button></div><div class="days"><div class="day">日</div><div class="day">一</div><div class="day">二</div><div class="day">三</div><div class="day">四</div><div class="day">五</div><div class="day">六</div></div><div id="dateGrid" class="date-grid"></div></div><script src="script.js"></script>
</body>
</html>

2. CSS 样式

接下来，使用 CSS 来美化日历。

/* styles.css */
body {font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}.calendar {background: white;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);overflow: hidden;
}.header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;background: #007bff;color: white;
}.days {display: grid;grid-template-columns: repeat(7, 1fr);background: #f0f0f0;
}.day {padding: 10px;text-align: center;font-weight: bold;
}.date-grid {display: grid;grid-template-columns: repeat(7, 1fr);
}.date {padding: 20px;text-align: center;cursor: pointer;
}.date:hover {background: #007bff;color: white;border-radius: 5px;
}

3. JavaScript 功能

最后，使用 JavaScript 来实现日历的动态功能。

// script.js
const monthYearElement = document.getElementById('monthYear');
const dateGridElement = document.getElementById('dateGrid');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');let currentDate = new Date();function renderCalendar(date) {dateGridElement.innerHTML = '';const year = date.getFullYear();const month = date.getMonth();monthYearElement.innerText = date.toLocaleString('default', { month: 'long', year: 'numeric' });const firstDay = new Date(year, month, 1);const lastDay = new Date(year, month + 1, 0);const daysInMonth = lastDay.getDate();const startDay = firstDay.getDay();for (let i = 0; i < startDay; i++) {const emptyDiv = document.createElement('div');dateGridElement.appendChild(emptyDiv);}for (let day = 1; day <= daysInMonth; day++) {const dateDiv = document.createElement('div');dateDiv.classList.add('date');dateDiv.innerText = day;dateGridElement.appendChild(dateDiv);}
}prevButton.addEventListener('click', () => {currentDate.setMonth(currentDate.getMonth() - 1);renderCalendar(currentDate);
});nextButton.addEventListener('click', () => {currentDate.setMonth(currentDate.getMonth() + 1);renderCalendar(currentDate);
});// 初始渲染
renderCalendar(currentDate);

相关文章：

写一个小日历

以下是一个示例&#xff0c;展示了如何创建一个基本的日历 日历 1. HTML 结构 首先&#xff0c;创建一个基本的 HTML 结构&#xff0c;用于展示日历。 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta na…...

编程日记 2024/11/6 16:58:27

【数据库】elasticsearch

1、架构 es会为每个索引创建一定数量的主分片和副本分片。 分片&#xff08;Shard&#xff09;&#xff1a; 将索引数据分割成多个部分&#xff0c;每个部分都是一个独立的索引。 主要目的是实现数据的分布式存储和并行处理&#xff0c;从而提高系统的扩展性和性能。 在创建索…...

编程日记 2024/11/6 16:56:25

Rust 构建 TCP/UDP 网络服务

第四章 异步编程与网络通信 第二节 构建 TCP/UDP 网络服务 在现代应用程序中&#xff0c;网络通信是核心功能之一。本节将重点介绍如何在 Rust 中构建基本的 TCP 和 UDP 网络服务&#xff0c;涵盖实际的代码示例、最佳实践以及最新的技术方案&#xff0c;以帮助开发者掌握网络…...

编程日记 2024/11/6 16:55:24

docker镜像文件导出导入

1. 导出容器&#xff08;包含内部服务&#xff09;为镜像文件&#xff08;docker commit方法&#xff09; 原理&#xff1a;docker commit命令允许你将一个容器的当前状态保存为一个新的镜像。这个新镜像将包含容器内所有的文件系统更改&#xff0c;包括安装的软件、配置文件等…...

编程日记 2024/11/6 16:54:23

ViT面试知识点

文章目录 VITCLIPBlipSAMLSegFast TransformerYOLO系列问题 BatchNorm是对一个batch-size样本内的每个特征做归一化&#xff0c;LayerNorm是对每个样本的所有特征做归一化。 Layer Normalization&#xff08;层归一化&#xff0c;简称LayerNorm&#xff09;是一种在深度学习中…...

编程日记 2024/11/6 16:53:22

ChatGPT 和 RAG（检索增强生成）的区别；ChatGPT 和 RAG 的联系

目录 ChatGPT 和 RAG（检索增强生成）的区别 知识来源与利用方式 回答准确性和可靠性 模型架构和复杂性 适用场景 ChatGPT 和 RAG 的联系 ChatGPT 和 RAG（检索增强生成）的区别 知识来源与利用方式 ChatGPT：是基于大规模预训练的语言模型，知识是在预训练过程中从大量的…...

编程日记 2024/11/6 16:52:21

qt获取本机IP和定位

前言&#xff1a; 在写一个天气预报模块时&#xff0c;需要一个定位功能&#xff0c;在网上翻来翻去才找着&#xff0c;放在这里留着回顾下&#xff0c;也帮下有需要的人 正文&#xff1a; 一开始我想着直接调用百度地图的API来定位&#xff0c; 然后我就想先获取本机IP的方…...

编程日记 2024/11/6 16:51:19

CodeQL学习笔记(5)-CodeQL for Java（AST、元数据、调用图）

最近在学习CodeQL&#xff0c;对于CodeQL就不介绍了&#xff0c;目前网上一搜一大把。本系列是学习CodeQL的个人学习笔记&#xff0c;根据个人知识库笔记修改整理而来的&#xff0c;分享出来共同学习。个人觉得QL的语法比较反人类&#xff0c;至少与目前主流的这些OOP语言相比&…...

编程日记 2024/11/6 16:49:17

服装品牌零售业态融合中的创新发展：以开源 AI 智能名片 S2B2C 商城小程序为视角

摘要&#xff1a;本文以服装品牌零售业态融合为背景&#xff0c;探讨信息流优化和资金流创新的重要作用&#xff0c;并结合开源 AI 智能名片 S2B2C 商城小程序&#xff0c;分析其如何进一步推动服装品牌在零售领域的发展&#xff0c;提高运营效率和用户体验&#xff0c;实现商业…...

编程日记 2024/11/6 16:45:13

前端将网页转换为pdf并支持下载与上传

1.pdf下载 handleExport() {const fixedH document.getElementById("fixed-h");const pageOne document.getElementById("mix-print-box-one");const pageTwo document.getElementById("mix-print-box-two");fixedH.style.height 30vh;pageO…...

编程日记 2024/11/6 16:43:11

Android 依赖统一配置管理（Version Catalogs）

最近升级了Android Studio版本到Koala Feature Drop | 2024.1.2&#xff0c;新建项目后发现项目配置又有变化&#xff0c;默认开始使用了一个名叫 Gradle 版本目录的东西&#xff0c;当然也可以称之为依赖统一配置管理&#xff0c;一开始还有点陌生&#xff0c;但是经过一番了解…...

编程日记 2024/11/6 16:38:06

如何为数据看板产品接入实时行情接口并展示行情

在金融科技领域&#xff0c;实时数据是分析和决策的关键因素。通过AllTick的实时行情API&#xff0c;您可以轻松将实时市场数据集成到数据看板产品中&#xff0c;为用户提供丰富的市场洞察。本文将详细介绍如何使用AllTick API&#xff0c;通过WebSocket协议接收并展示实时市场…...

编程日记 2024/11/6 16:36:04

数据结构 C/C++(实验一:线性表)

&#xff08;大家好&#xff0c;今天分享的是数据结构的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 提要&#xff1a;实验题目 一、实验目的 二、实验内容及要求 三、算法思想 实验1 实验2 四、源程序及注释 …...

编程日记 2024/11/6 16:35:02

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置 现在WebStorm可以个人免费使用啦&#xff01;&#x1f929; 基本配置 打包工具&#xff1a;Vite 前端框架&#xff1a;ElementPlus 开发语言&#xff1a;Vue3、TypeScript、Sass 代码检查&#xff1a;ESLint、Prettier IDE&#xf…...

编程日记 2024/11/6 16:34:01

Linux高阶——1103——Signal信号机制

1、信号机制 在linux和unix系统下&#xff0c;如果想要处置(挂起&#xff0c;结束)进程&#xff0c;可以使用信号&#xff0c;经典消息机制&#xff0c;所以进程包括系统进程都是利用信号处置进程的 kill -l——查看所有系统支持的信号 1-31号信号——Unix经典信号&#xff…...

编程日记 2024/11/6 16:28:53

如何编写STM32的定时器程序

编写STM32的定时器程序通常涉及以下步骤&#xff1a; 1. 选择定时器和时钟配置 首先&#xff0c;你需要选择一个可用的定时器&#xff08;TIM&#xff09;&#xff0c;并配置其时钟源。时钟源可以是内部时钟或外部时钟&#xff0c;通常通过RCC&#xff08;Reset and Clock Con…...

编程日记 2024/11/6 16:26:50

【C++】C++的单例模式、跟踪内存分配的简单方法

二十四、C的单例模式、跟踪内存分配的简单方法 1、C的单例模式 本小标题不是讨论C的语言特性&#xff0c;而是一种设计模式&#xff0c;用于确保一个类在任何情况下都只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。即C的单例模式。这种模式常用于资源管理&…...

编程日记 2024/11/6 16:24:48

构建一个导航栏web

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}#menu{background-color:purple;width: 100px;height: 50px;}.item{float: left;/* 浮动标签可以让块标签&#xff0c…...

编程日记 2024/11/6 16:18:41

【Linux】Linux安全与密钥登录指南

在使用Linux服务器时&#xff0c;确保服务器的安全至关重要。本文将为你介绍一些关键的Linux安全措施&#xff0c;包括开启密钥登录、查看登录日志、限制登录IP以及查看系统中能够登录的账号。以下内容适合小白用户&#xff0c;通过简单的操作就能有效提升服务器的安全性。 目录…...

编程日记 2024/11/6 16:17:39

数据采集之scrapy框架

本博文使用基本框架完成搜房网或者其他网站的数据爬取&#xff08;重点理解 scrapy 框架的构建过程&#xff0c;使用回调函数&#xff0c;完成数据采集和数据处理&#xff09; 包结构目录如下图所示&#xff1a; 主要代码&#xff1a; &#xff08;sfw.py&#xff09; # -*- …...

编程日记 2024/11/6 16:14:36

告别龟速滚屏！Ubuntu 20.04下用imwheel调鼠标滚轮速度（附开机自启保姆级教程）

Ubuntu 20.04终极鼠标滚轮优化指南&#xff1a;从基础配置到系统级调优 每次在Ubuntu上浏览长网页或翻阅代码时&#xff0c;那个慢如蜗牛的滚动速度是否让你抓狂&#xff1f;作为从Windows或macOS迁移过来的用户&#xff0c;这种体验落差尤为明显。鼠标滚轮响应迟缓不仅影响工作…...

编程新知 2026/3/27 21:17:47

【JavaWeb开发】从零构建前后端交互实战指南

1. JavaWeb前后端交互基础入门 第一次接触JavaWeb开发时&#xff0c;最让我困惑的就是前后端如何传递数据。记得刚开始做项目时&#xff0c;我傻乎乎地用字符串拼接HTML代码返回给前端&#xff0c;结果遇到中文乱码问题折腾了一整天。后来才发现&#xff0c;现代JavaWeb开发早已…...

编程新知 2026/3/27 21:13:47

SLAM Toolbox应用宝典：从技术原理到实战落地的全面指南

SLAM Toolbox应用宝典&#xff1a;从技术原理到实战落地的全面指南 【免费下载链接】slam_toolbox Slam Toolbox for lifelong mapping and localization in potentially massive maps with ROS 项目地址: https://gitcode.com/gh_mirrors/sl/slam_toolbox SLAM Toolbox…...

编程新知 2026/3/27 20:01:05

AI驱动关键词优化的SEO未来趋势与实际应用解析

本文旨在探讨AI在搜索引擎优化&#xff08;SEO&#xff09;&#xff0c;特别是关键词优化领域的重要角色。文章分析了AI技术如何通过数据分析和用户行为洞察&#xff0c;帮助企业制定更加有效的关键词策略。AI能够实时监测市场趋势&#xff0c;识别用户意图&#xff0c;并根据这…...

编程新知 2026/3/27 19:57:04

零基础养龙虾：OpenClaw部署从入门到上手，一篇讲透！

2026年&#xff0c;OpenClaw&#xff08;昵称 “龙虾”&#xff09;凭借 “能真正动手干活” 的核心能力&#xff0c;成为开源AI Agent领域的顶流。它不仅能像ChatGPT一样聊天&#xff0c;更能自主操作电脑——整理文件、控制浏览器、发送邮件、甚至调用硬件设备。因其图标酷似…...

编程新知 2026/3/27 17:43:59

打造手游PC级操控：QtScrcpy键鼠映射完全指南

打造手游PC级操控&#xff1a;QtScrcpy键鼠映射完全指南 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy 手机…...

编程新知 2026/3/27 17:15:55

JeecgBoot低代码开发平台终极实战指南：从零开始构建企业级应用

JeecgBoot低代码开发平台终极实战指南&#xff1a;从零开始构建企业级应用 【免费下载链接】jeecg-boot jeecgboot/jeecg-boot 是一个基于 Spring Boot 的 Java 框架&#xff0c;用于快速开发企业级应用。适合在 Java 应用开发中使用&#xff0c;提高开发效率和代码质量。特点是…...

编程新知 2026/3/27 16:35:29

别再纠结模型了！用Python+Simulink快速搭建四旋翼无人机仿真（附完整代码）

用PythonSimulink快速搭建四旋翼无人机仿真实战指南 四旋翼无人机开发中最令人头疼的环节&#xff0c;往往不是控制算法设计&#xff0c;而是如何快速搭建一个可靠的仿真环境。我曾见过不少团队在模型选择上耗费数周时间&#xff0c;最终却陷入理论完美主义陷阱——他们反复纠结…...

编程新知 2026/3/27 15:20:56

从浮点到定点：手把手教你用MATLAB自定义函数实现加减乘除（避坑溢出与精度损失）

从浮点到定点&#xff1a;手把手教你用MATLAB自定义函数实现加减乘除&#xff08;避坑溢出与精度损失&#xff09; 当算法需要从实验室环境迁移到嵌入式设备时&#xff0c;浮点运算的硬件开销常常成为瓶颈。这时定点数运算就像一把手术刀——精准控制每个比特的用途&#xff0c…...

编程新知 2026/3/27 15:18:56

Qwen3-Reranker-0.6B效果展示：中英术语对照表构建中的跨语言排序

Qwen3-Reranker-0.6B效果展示&#xff1a;中英术语对照表构建中的跨语言排序 1. 跨语言术语排序的技术挑战 在全球化信息时代&#xff0c;构建准确的中英术语对照表已成为跨语言交流、技术文档翻译和国际合作的重要基础。传统方法往往面临几个核心痛点&#xff1a; 语义鸿沟…...

编程新知 2026/3/27 15:14:53