使用JS实现简单的日历插件

最新推荐文章于 2024-07-24 08:00:00 发布

这名没人用吧

最新推荐文章于 2024-07-24 08:00:00 发布

阅读量3.9k

点赞数 6

分类专栏： demo合集文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_43866830/article/details/119182305

版权

本文介绍了如何使用JavaScript实现一个简单的日历插件，包括HTML和JS代码示例。主要内容包括：1. 创建HTML容器；2. 使用Date对象获取并渲染时间到表格；3. 通过事件委托为按钮添加功能；4. 提供定制选项，如选择周日开始的一周。文章最后提到，虽然插件实现不复杂，但涉及到日期对象操作等知识点。

摘要由CSDN通过智能技术生成

一、简要介绍

实现一个如下图所示的日历，这边主要提供html部分和js部分的代码，css部分大家自行编写哦。

请添加图片描述

二、基础代码

html部分

其实就是一个div容器，为其设置相应的id值。

	<div id="calendar" class="calendar">

	</div>

js部分

我们先来简单梳理一下需要完成的步骤：
将表格渲染出来，不然这个容器就是空的：

	var calBox = document.getElementById("calendar");
    var str = "<div class='title'>\
                <a id='calendar-pre'>&lt;上月（\
                " + preMonth + "月）</a><label>\
                "+year+"年</label><label>" +month+"\
                月</label> <a id='calendar-next'>下月\
                （"+nextMonth+"月）&gt;</a> </div>"
    str += "<table class='calendar-table'>"
    str += "</table>"
    calBox.innerHTML = str;

在进行完这一部分的代码编写后，就可以将表格渲染出来，但是这时表格是空的，我们需要获取时间，并将时间渲染进表格，首先是获取时间，使用到了Date对象：

	var now = new Date();//当前日期
	var year = now.getFullYear();// 年份
	var month = now.getMonth() + 1;// 月份
	var preMonth = now.getMonth();// 上个月
	var nextMonth = month + 1;// 下个月
	var days,whatday,predays;