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

写一个小日历

news 2025/12/27 19:12:25

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

日历

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

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/12/8 14:57:15

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/12/21 17:24:04

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2025/12/24 20:25:52

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/12/15 4:30:09