输入年月,通过js获取日历

已于 2023-08-04 00:39:10 修改
阅读量576 收藏 2
点赞数 2
分类专栏： 前端 文章标签： servlet vscode
于 2022-07-28 10:59:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56921846/article/details/126030382
版权

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>日历</title>

    <style>

        span {

            display: inline-block;

            width: 41px;

            height: 28px;

            line-height: 28px;

            text-align: center;

        }

        h3{

            margin-top: 50px;

        }

       

    </style>

</head>

 

<body>

 

    <h2>请输入你要查看的年月</h2>

    <input type="text" name="" id="">年

    <input type="text" name="" id="">月

    <button>显示日历</button>

    <br>

    <h3>日历表</h3>

    <div class="box"></div>

    <script>

 

        var btn = document.getElementsByTagName("button")[0]

        var div1 = document.getElementsByTagName("div")[0]

 

        // 定义内部元素

        var sp

        var div

 

        // 点击函数

        btn.onclick = function () {


 

            // 当父元素的子节点值大于0 的时候 清除所有子节点

            // 防止div中元素一直叠加

           if(div1.childNodes.length>0){

                div1.removeChild(sp)

                div1.removeChild(div)

           }

 

            var inp1 = Number(document.getElementsByTagName("input")[0].value)

            var inp2 = Number(document.getElementsByTagName("input")[1].value)


 

        // 判断月份

            if (inp2 == 1 | inp2 == 3 | inp2 == 5 | inp2 == 7 | inp2 == 8 | inp2 == 10 | inp2 == 12) {

                // 获取第一天是周几

                var d = new Date(inp1, inp2 - 1, 1).getDay()

                // 用来存储插入的span

                var arr = []

                sp = document.createElement("div")

                // 插入日期头

                sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"

                div1.appendChild(sp)

                div = document.createElement("div")

                div1.appendChild(div)

                // 判断1号是周几

                for (var i = 0; i < d ; i++) {

                    var span = document.createElement("span")

                    span.innerHTML = "**"

                    div.appendChild(span)

                    arr.push(span)

                }

                // 天数循环

                for (var i = 1; i < 32; i++) {

                    var span = document.createElement("span")

                    span.innerHTML = i

                    div.appendChild(span)

                    arr.push(span)

                    if (arr.length % 7 == 0) {

                        // 每次arr长度是7的倍数 换行

                        var br = document.createElement("br")

                        div.appendChild(br)

 

                    }

                }

 

            } else if (inp2 == 2) {

                // 闰年 有29天 判断闰年

                if (inp1 % 4 == 0 && inp1 % 100 != 0 || inp1 % 400 == 0) {

 

                    var d = new Date(inp1, inp2 - 1, 1).getDay()

                    var arr = []

                    sp = document.createElement("div")

                    sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"

                    div1.appendChild(sp)

                    div = document.createElement("div")

                    div1.appendChild(div)

                    for (var i = 0; i < d ; i++) {

                        var span = document.createElement("span")

                        span.innerHTML = "**"

                        div.appendChild(span)

                        arr.push(span)

                    }

                    for (var i = 1; i < 30; i++) {

                        var span = document.createElement("span")

                        span.innerHTML = i

                        div.appendChild(span)

                        arr.push(span)

                        if (arr.length % 7 == 0) {

                            var br = document.createElement("br")

                            div.appendChild(br)

 

                        }

                    }

                } else {

                    var arr = []

                    var d = new Date(inp1, inp2 - 1, 1).getDay()

                    sp = document.createElement("div")

                    sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"

                    div1.appendChild(sp)

                    div = document.createElement("div")

                    div1.appendChild(div)

                    for (var i = 0; i < d ; i++) {

                        var span = document.createElement("span")

                        span.innerHTML = "**"

                        div.appendChild(span)

                        arr.push(span)

                    }

                    for (var i = 1; i < 29; i++) {

                        var span = document.createElement("span")

                        span.innerHTML = i

                        div.appendChild(span)

                        arr.push(span)

                        if (arr.length % 7 == 0) {

                            var br = document.createElement("br")

                            div.appendChild(br)

 

                        }

                    }

                }

            } else {

                var arr = []

                var d = new Date(inp1, inp2 - 1, 1).getDay()

                sp = document.createElement("div")

                sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"

                div1.appendChild(sp)

                div = document.createElement("div")

                div1.appendChild(div)

                for (var i = 0; i < d ; i++) {

                    var span = document.createElement("span")

                    span.innerHTML = "**"

                    div.appendChild(span)

                    arr.push(span)

                }

                for (var i = 1; i < 31; i++) {

                    var span = document.createElement("span")

                    span.innerHTML = i

                    div.appendChild(span)

                    arr.push(span)

                    if (arr.length % 7 == 0) {

                        var br = document.createElement("br")

                        div.appendChild(br)

                    }

                }

            }

        }

    </script>

</body>

</html>

以上就是通过js实现一个日历

一只java小菜鸡
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript实现日历控件(年月日关闭按钮)
10-27
在JavaScript编程中，创建自定义的日历控件是一项常见的任务，尤其对于网页应用来说，它能够为用户提供方便的日期选择功能。在这个实例中，我们将探讨如何实现一个具有年、月、日选择以及关闭按钮的基本日历控件。 ...
原生js制作日历控件实例分享
10-22
总结，通过这个实例，我们学习了如何使用原生JavaScript创建一个具有基本功能的日历控件，包括显示日期、处理用户交互以及样式设计。这不仅可以帮助你理解JavaScript的DOM操作、事件处理以及日期处理，还可以作为...
【JS】输入年月日，并输出该日期。（闰年判断）
Evelyn_178的博客
08-01 791
进行位或运算时，计算机会将浮点数的尾数位和0进行运算，由于尾数位是以二进制形式表示的，与0进行位或运算后，尾数位的所有位都会被置为0，从而实现了取整的效果。在此基础上加入一些条件语句，来判断用户输入是否合规，比如判断输入的是否为整数，输入的数字范围以及遇到闰年时2月为29天。当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。- 3、对于数值很大的年份，既能被 3200 整除，又能被 172800 整除的才是闰年。
1分钟搞定Excel动态日历图，让你更好地记录生活
Amy_aaa的博客
06-25 1617
日历是我们生活中不可或缺的一部分，它能帮助我们规划时间、安排计划，以及记录生活中的点滴。而动态日历图则更是一种流行的视觉呈现方式，它可以直观地展示出每个日期的数据变化和趋势，让我们更好地理解时间和事件的关系。无需任何编程和高阶技能，只需要按照简单的步骤，就可以快速轻松地创建一个逼真的动态日历图，让你更好地记录生活和工作。同时，我们还将分享一些实用技巧和应用场景，让你了解动态日历图的妙用之处，让你的时间和计划更加明了。在弹出的对话框中，选择"自定义"并输入"dd"作为公式内容，这样所有日期将以天显示。
Java小案例——制作万年历
Baikxo的博客
02-27 1975
Java小案例——制作一个简单的万年历
js获取时间（一） 年月日时间，各种格式的时间
最新发布
一步一个脚印，踏实努力，向着目标前进
08-07 5867
在 JavaScript 中，可以使用内置的Date对象来获取当前时间，并根据需要格式化成不同的时间格式。
js 年月日时分 日历控件
04-09
在"newInputCalendar.js"文件中，我们可以预期找到实现这个日历控件的全部JavaScript代码。代码可能会包括定义控件类、初始化方法、事件处理函数等。通过阅读和学习这段代码，你可以了解到如何构建一个自定义的日历...
javascript中Date对象应用之简易日历实现
10-21
这个日历可以根据用户的输入动态生成对应年月的日历视图，为网页增加实用的日期选择功能。然而，为了实现更复杂的功能，如多语言支持、日期范围选择等，可能需要引入更专业的日期库，如moment.js或date-fns等。
C#简单输出日历的方法
09-03
3. 在`Main`方法中，通过`Console.ReadLine()`获取用户输入的年份和月份。 4. 使用`DateTime`构造函数创建一个表示该年月第一天的日期对象`day1`。 5. 获取该月第一天是星期几，通过`(int)day1.DayOfWeek`得到一个...
js版简易日历
06-09
用js动态生成日历位置，闭包控制点击后出现的时间。
前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。
苦逼打工人的博客
04-20 1908
【代码】前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。
【JS篇】获取当天所在的一周、前一周、下一周的日期和星期信息
章魚尐芄子的博客
08-03 7771
获取当天所在的一周、前一周、下一周的日期和星期信息
用JavaScript实现日历效果(仅展示获取到日历数据,样式自己写)
cha12138的博客
03-30 1170
用JavaScript实现日历效果
用python获取某年日历表
hu20100913的博客
08-27 2287
用python获取某年的日历表或某年某月的日历表
输入年月渲染当月的日历
weixin_42597658的博客
12-10 352
输入年月渲染当月日历 JavaScript首先效果图是这样：html代码：css代码如下:JavaScript代码如下： 首先效果图是这样： html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
javascript根据当前日期获取给定天数的日历表
linziping的博客
04-03 990
根据当前日期获取给定天数的日历表 思路： 1、获取当前日期 2、获取当月的第一天日期 3、从当月第一天开始，根据给定天数循环遍历，小于当前日期时，设置不可用状态；大于等于当前日期时，设置可用状态，同时更改遍历条件 4、根据最后一天所在月份，遍历出该月剩余日期，设置不可用状态 5、返回日历数组 示例代码 /* * 根据当前日期获取给定天数的日历表 * days: 给定天数 */ function c...
输入年份月份获得当月日历
aicszh的博客
02-25 469
今天的任务是输入年月获得当月日历。这里，我用了昨天学习的switch语句来完成每一个月份的天数定义。此外，由于闰年的缘故，在case1 也就是二月中加了一个if else语句来区分闰年和平年。然后在通过for语句的嵌套来完成一个规整的日历构造。当然，这个日历存在一个很大的不足，就是没有最上方星期数。这也是因为我不清楚每年第一天是星期几有怎样的规律。为了之后能完善这个日历，我把日期定为七列，方便之后在上方加入星期数。 ...
javascript获取日期制作简单日历
chcfner的博客
03-09 421
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
动态获取当前时间、星期、农历的日历js
开发技术资料收藏专栏
10-06 3782
借鉴网上案例，定制了一个获取当前时间、 Document $(function(){ setInterval(myclock,1000); setInterval(CalConv,1000); function myclock(){ var now = new Date(); var y
java 根据年月获取日历
05-26
你可以使用 Java 中的 `Calendar` 类来获取指定年月的日历。以下是一个示例代码： ```java import java.util.Calendar; public class CalendarExample { public static void main(String[] args) { int year = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只java小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值