使用原生JavaScript做一个简单日历

最新推荐文章于 2025-05-01 11:43:37 发布

LouisTsang

最新推荐文章于 2025-05-01 11:43:37 发布

阅读量1.3k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript 简单低龄向

本文链接：https://blog.youkuaiyun.com/weixin_38179158/article/details/89963352

版权

这篇博客讲述了如何使用原生JavaScript创建一个简单日历，包括计算前一个月、当前月和下一个月的格子数量，以及填充日期和CSS样式的设计。通过实例展示了日历组件的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因

突然工作方面要做一个关于选择日历区间的组件，虽然之前也做过，但是有点忘了，现在相当于用原生复习一下咯，顺便回顾一下当时的思路。

开始

先放一下最后的结果吧
（简简单单59行解决）
简易日历

一开始肯定是构建html结构啦，这个就不多少，反正自动生成
(一般编辑器输入!然后按tab就阔以了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    ...
</body>
</html>

接下来就往body塞东西了，先塞我们日历的容器，ul标签

<ul id="app" class="root"></ul>

咱们后面就是一直往这个ul标签里面塞li标签而已

然后就可以开始写script了
首先我们要知道查看当前月份日历，其实是分了几个部分的。
我们以MacOS自带日历来看看：
绿色是上一个月的一部分
红色则是当前月的一部分
蓝色则是下一个月的部分
这时候我们要想了，我们这个容器里究竟需要多少格子？
最坏的情况就是当月的1号就是第一行最后一个格子，这时候行数最多
如：2019年的六月

最低0.47元/天解锁文章