用jQuery写一个简单日历

最新推荐文章于 2024-06-22 09:50:36 发布
最新推荐文章于 2024-06-22 09:50:36 发布
阅读量675 收藏
点赞数 1
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43404042/article/details/107529174
版权

案例：制作一个简单日历

如下日历的制作思路：先写了三个月的框架，以中间的月份作为当前月份，先获取当前月份的天数，第一天是周几来确定第一天的位置，然后再前后进行补白，计算上月和下个月的天数和位置。年份同理。（每年的农历暂无计算方式，该日历中无农历的写法）
完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=320,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
<div class="calendar">
    <div class="calendar_title">
        <span class="year">
               <div class="year_list">
                   <span>2019</span>
                   <span>2020</span>
                   <span>2021</span>
               </div>
        </span>
        <span class="txt_title">年</span>
        <span class="month">
            <div class="month_list">
                <span>06</span>
                <span>07</span>
                <span>08</span>
            </div>
        </span>
        <span class="txt_title">月</span>
        <span class="week">周六</span>
    </div>
    <div class="calendar_week">
        <span>日</span>
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</span>
    </div>
    <div class="calendar_list">
        <div class="calendar_day">
            <div class="day_1">
                <div class="day_list">

                </div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_2">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_3">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_4">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_5">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_6">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
        </div>
        <div class="calendar_day">
            <div class="day_1">
                <div class="day_list">
                </div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_2">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_3">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_4">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_5">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_6">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
        </div>
        <div class="calendar_day">
            <div class="day_1">
                <div class="day_list">
                </div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_2">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_3">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_4">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_5">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
            <div class="day_6">
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
                <div class="day_list"></div>
            </div>
        </div>
    </div>

</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/calendar.js"></script>
</body>
</html>
moon_ruan
关注
jQuery实现简单日历
DniNgL的博客
07-03 1596
日历效果如下图： css部分： <style> * { margin: 0; padding: 0; list-style: none; } .main { width: 380px; height: 370px; margin: 30px auto; position: re
jquery 手写 日历
weixin_42575720的博客
06-01 149
用Jquery 手写日历
jQuery实现的日历
03-17
NULL 博文链接：https://gaojiewyh.iteye.com/blog/564732
探索jQuery的精彩日历插件：Verbose Calendar
最新发布
gitblog_00032的博客
06-22 933
探索jQuery的精彩日历插件：Verbose Calendar 项目地址:https://gitcode.com/iamjpg/jQuery-Verbose-Calendar 在数字化时代，日期管理工具已经成为我们日常工作中不可或缺的一部分。今天，我们带来了一个独特的开源项目——jQuery Verbose Calendar，它不仅仅是一个简单的时间管理器，更是一个充满定制可能的小巧日历应用。如...
网友写的js日历
zhaofeiwei的博客
05-26 106
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;meta http-equiv=...
jQuery 手写日历
Sarahapy的博客
07-03 357
默认显示当月日历，点击左右切换可以选择月份： HTML 部分： <div class="box"> <div class="bar"> <div><span class="year"></span>年<span class="month"></span>月</div> <div> <span class="prev">&l
Jquery日历控件代码
weixin_33863087的博客
11-26 93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&...
Jquery日历插件制作简单日历
10-23
总的来说，jQuery 日历插件 `datepicker` 是一个强大且易用的工具，它简化了网页中日期输入的处理，并提供了丰富的定制选项。通过熟练掌握它的使用，可以提高网页的用户体验，同时也为开发者提供了更多创造性的可能...
用jQuery写个简单的日历组件
思诚^_^
11-24 1104
说到日历组件，网上一搜一大堆，各种插件啊、集成框架啊实在不少。但是插件有的不合需求，框架嘛依赖关系一大堆，比如jQueryUI、bootstrap等。其实现在我就是想要一个轻量级的日历组件，功能也不需要很强大，只要能兼容所有浏览器，能选择任意年份日期和星期就可以了。 好了，废话不多说，直接上代码： 好了，先引入jQuery库。（发表一下感概：angularJS的数据
jQuery实现简单日历效果
10-15
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的日历效果。这个日历功能能够显示日期，并且允许用户在不同的月份之间切换。我们将分别分析CSS、HTML和JavaScript部分，理解其背后的逻辑和实现方式。 首先...
jQuery实现的简单日历组件定义与用法示例
12-10
其实现在我就是想要一个轻量级的日历组件，功能也不需要很强大，只要能兼容所有浏览器，能选择任意年份日期和星期就可以了。 好了，废话不多说，直接上代码： 好了，先引入jQuery库。（发表一下感概：angularJS的...
jquery实现的日历源代码
01-31
jquery实现的日历源代码，供大家一起共同分享学习。
jquery手写日历
10-29
jquery手写日历 很经典的东西 都是我精心收藏的！ 奉献给大家 1分 仅1分哦
jQuery制作简洁漂亮日期日历控件包含多选日期等
02-26
一款非常清楚功能强大的日历空间，可以选择开始时间与结束时间。效果类似CNZZ数据统计时间选择段。演示地址：http://www.xwcms.net/js/rqsj/44739.html
jquery农历日历
02-03
很漂亮的一个带农历的日历，是在共享资源的继承上修改的，按shift键可以选择日期期间。
简单日历自己做~jquery
陌笙以笙箫
09-05 1167
//显示年份 $year为 传过来的html标签，Year为指定的年份function showYear($year, Year){ var dateNow = new Date(); var yearNow = dateNow.getFullYear(); //显示现在年份 var yearStart = yearNow - 120; //只制作120年内
JQuery实现日历
ws1995_java的博客
07-05 2931
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;日历&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.3.1.js"&a
Jquery日历插件制作
洋洋
11-29 662
在页面开发中，经常遇到需要用户输入日期的操作。通常的做法是，提供一个文本框（text）,让用户输入，然后，编写代码验证输入的数据，检测其是否是日期类型。这样比较麻烦，同时，用户输入日期的操作也不是很方便，影响用户体验。如果使用jQuery UI中的datepicker(日历)插件，这些问题都可以迎刃而解。该插件调用的语法格式如下：   $(“.selector”).datepicker(
使用jQuery轻松创建日历功能
总结来说，jQuery简单实现日历的关键在于理解和使用JavaScript的Date对象来处理日期和时间，结合jQuery的DOM操作和事件处理能力，创建出用户友好的交互界面。通过这个教程，开发者可以了解到如何将基础的编程概念与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值