JavaScript实现日历功能

最新推荐文章于 2024-04-06 09:56:33 发布
最新推荐文章于 2024-04-06 09:56:33 发布
阅读量916 收藏 6
点赞数 2
分类专栏： 前端 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/The_RedMaple/article/details/120765100
版权

 运行效果

实现代码 

<html>
    <head>
        <script>
            window.onload = function(){
                //寻找某个月有多少天
                var findDays = function(month){
                    if(month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11){
                    var days = 31;
                    }
                    else if(month == 1){
                        days = (year%4==0?29:28);
                    }
                    else{
                        days = 30;
                    }
                    return days;
                }
                //更新日历
                var flushDays = function(days,seven){
                    for(i=7;i<seven+7;i++){
                        tds[i].innerHTML= '';
                    }
                    for(i=1;i<days+1;i++){
                        tds[seven+i+6].innerHTML= i;
                    }
                    for(i=days+seven+7;i<49;i++){
                        tds[i].innerHTML= '';
                    }
                }
                //刷新月份
                var flushTime = function(month){
                    if(month+1 < 10){
                        yearMonth.innerHTML = year + " 年 0" + (month+1) + " 月";
                    }
                    else{
                        yearMonth.innerHTML = year + " 年 " + (month+1) + " 月";
                    }
                }
                //找到本月一号
                var Today = new Date();
                var nowTime = Today.getTime() - (Today.getDate()-1)*1000*60*60*24;
                Today = new Date(nowTime);
                //某个月一号那天的属性
                var year = Today.getFullYear();
                var month = Today.getMonth();
                var seven = Today.getDay();
                var days = findDays(month);
                //获取表格并更新
                var tds = document.getElementsByTagName("td");
                flushDays(days,seven);
                var yearMonth = document.getElementById("yearMonth");
                //按键动态绑定
                var buttons = document.getElementsByClassName("timeclick");
                buttons[0].onclick = function(){
                    if(month==0){
                        year -= 1;
                    }
                    month = (month==0?11:month-1);
                    flushTime(month);
                    days = findDays(month);
                    nowTime = Today.getTime() - (Today.getDate()-1)*1000*60*60*24 - (days*1000*60*60*24);
                    Today = new Date(nowTime);
                    seven = Today.getDay();
                    flushDays(days,seven);
                }
                buttons[1].onclick = function(){
                    if(month==11){
                        year += 1;
                    }
                    month = (month+1)%12;
                    flushTime(month);
                    var nextMonth = findDays(month);
                    nowTime = Today.getTime() - (Today.getDate()-1)*1000*60*60*24 + (days*1000*60*60*24);
                    Today = new Date(nowTime);
                    seven = Today.getDay();
                    flushDays(nextMonth,seven);
                    days = nextMonth;
                }
            }
        </script>
        <style>
            #frame{
                width:400px;
            }
            .buttons{
                float:right;
                margin-left:3px;
            }
            .outline{
                padding:2px;
                height:482px;
                margin-top:6px;
                outline:1px black solid;
            }
            .row{
                padding:5px;
                border:1px rgba(0, 0, 0, 0.329) dashed;
                height:20px;
                line-height:20px;
            }
            .jianli{
                height:66px;
            }
            .name{
                margin:0 0 0 3px;
                float:left;
                width:120px;
            }
            .input,textarea{
                padding-left:10px;
                float:left;
            }
            textarea{
                width:250px;
                height:70px;
            }
            .dizhi{
                width:250px;
            }
            .date{
                height:200px;
            }
            #time{
                margin-left: 10px;
                background-color: rgba(192, 192, 192, 0.952);
                display:inline;
            }
            .timeclick{
                background-color: rgb(192,192,192);
                width:30px;
                border: none;
            }
            table{
                margin-left:134px;
                width:170px;
                outline: 1px rgb(192,192,192) solid;
            }
            .tiaozheng{
                margin-top:4px;
                margin-left:10px;
            }
            tr{
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id='frame'>
            学生基本信息
            <input type='button' value='取消' class='buttons'>
            <input type='button' value='添加' class='buttons'>
            <div class='outline'>
                <div class='row'>
                    <div class='name'>学号：</div>
                    <div class='input'><input type='text'></div>
                </div>
                <div class='row'>
                    <div class='name'>姓名：</div>
                    <div class='input'><input type='text'></div>
                </div>
                <div class='row'>
                    <div class='name'>专业：</div>
                    <div class='input'>
                        <select>
                            <option>信息管理与信息系统</option>
                            <option>电子商务</option>
                            <option>人力资源</option>
                            <option>物流管理</option>
                        </select>
                    </div>
                </div>
                <div class='row'>
                    <div class='name'>性别：</div>
                    <input type='radio' name='sex' value='男' class='tiaozheng'>男
                    <input type='radio' name='sex' value='女' class='tiaozheng'>女
                </div>
                <div class='row date'>
                    <div class='name'>出生日期：</div>
                    <div>
                        <div>
                            <div id='time'>
                                <input type='button' value='〈' class='timeclick'>
                                <span id='yearMonth'>2021 年 10 月</span>
                                <input type='button' value='〉' class='timeclick'>
                            </div>
                            <table>
                                <tr>
                                    <td>日</td>
                                    <td>一</td>
                                    <td>二</td>
                                    <td>三</td>
                                    <td>四</td>
                                    <td>五</td>
                                    <td>六</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='name'>爱好：</div>
                    <input type='checkbox' name='hobby' value='音乐' class='tiaozheng'>音乐
                    <input type='checkbox' name='hobby' value='体育' class='tiaozheng'>体育
                    <input type='checkbox' name='hobby' value='美术' class='tiaozheng'>美术
                    <input type='checkbox' name='hobby' value='旅游' class='tiaozheng'>旅游
                </div>
                <div class='row'>
                    <div class='name'>家庭地址：</div>
                    <div class='input'><input type='text' class='dizhi'></div>
                </div>
                <div class='row jianli'>
                    <div class='name'>简历：</div>
                    <div class='input'>
                        <textarea>
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

The_RedMaple
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
教你用JavaScript制作小日历
小院里的霍大侠
12-07 1743
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
简单月历活动js代码
12-25
一个简单动态js，月历活动功能，鼠标移动，显示或隐藏div.
js写简单日历
Myd
11-22 3977
写日历主要的是要搞清楚2点：1，每个月的第一天是周几？ 2，每个月有多少天？清楚这2个之后就可以完成一个最简单的日历了。而这2个问题可以轻易的调用js的api获取到。
js实现日历效果
蓝朽的小世界
06-18 2617
js实现日历效果
推荐开源项目：Calendar.js - 简洁而强大的JavaScript日历库
最新发布
gitblog_00085的博客
04-06 523
推荐开源项目：Calendar.js - 简洁而强大的JavaScript日历库 项目地址:https://gitcode.com/hippo-yuan/Calendar.js Calendar.js 是一个由 Hippo Yuan 开发的轻量级、高度可定制的 JavaScript 日历组件。这款库旨在简化网页中的日期选择功能，提供灵活的API和丰富的自定义选项，使得开发者可以快速集成并按照自己的...
纯JS日历,月历控件
08-30
纯JS日历控件，月历控件，共两个，日历面板选择日期，返回值为年月日，月历面板选择月份，返回值为年月。内涵日历/月历两个demo
微信小程序日历组件（可滑动，可展开收缩，可标点）
qq_37904407的博客
05-24 9744
原生微信小程序编写，简单轻便，拿来即用，功能持续更新中。
JavaScript 日历
司马懿的西山居
01-03 1632
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf8"&gt; &lt;style&gt; table { display: inline-block; border: 1px solid red; /** HTML5 中 table的cellspacing和cellpadding时被提示该属性已过时...
基于javascript实现日历功能原理及代码实例
10-15
主要介绍了基于javascript实现日历效果原理及代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
原生JavaScript实现日历功能代码实例(无引用Jq)
10-16
主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
javascript实现考勤日历功能
10-17
主要为大家详细介绍了javascript实现考勤日历功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯JS实现的一款月日历效果
赛赛
09-02 852
纯JS实现的一款月日历控件 业务需要开发个月日历，一些独特的功能各种组件都不支持，随自己开发了，使用了纯js，没有用到第三方库，下面是剥离了业务代码的一个demo，虽然写的很垃圾，但还是记录下，如果有用的话，希望能帮到别人，直接上代码。 Gitee地址：https://gitee.com/lksai/monthlyCalendar 体验地址：https://lksai.gitee.io/monthlycalendar/index.html ...
详解js中常规日期格式处理、月历渲染和倒计时函数
10-20
大家在日常开发的时候经常要用到日期格式的处理，下面这篇文章主要给大家介绍了js中常规日期格式处理、月历渲染及倒计时函数,有需要的朋友可以参考借鉴，下面来一起看看吧。
js 特效 html 特效 简单月历显示
08-17
js 特效 html 特效 简单月历显示 js 特效 html 特效 简单月历显示
js简单实现日历
qwyio的博客
05-18 3247
示例代码 <template> <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) --> <li class="arrow hands el-icon-arrow-...
用 JavaScript 编写日历
allway2的博客
05-27 4587
概述 在本教程中，我将介绍使用几行 JavaScript 将日历渲染到网页上。日历将包括仅使用普通旧 JavaScript的月份和年份的下拉列表。流程如下： 将月份渲染到下拉列表中 将年份渲染到下拉列表中 呈现当前选择的月/年组合的天数 更改月份/年份时重新绘制日历 更改月份和/或年份将重新绘制日历以匹配给定月份和年份的正确日期。 如果你是 JavaScript 的初学者，或者只是需要更多的洞察力，我强烈推荐你可以在亚马逊上购买的 JavaScript Ninja 的秘密。这是一本扎实的读物，本
用JavaScript实现日历效果(仅展示获取到日历数据,样式自己写)
cha12138的博客
03-30 1119
用JavaScript实现日历效果
js实现日历 完整版
bobringtheboys的博客
10-13 715
【代码】js实现日历 完整版。
js制作日历
weixin_63794155的博客
09-21 1219
new Date()第3个参数默认为1，就是每个月的1号，将它设置为0后，new Date()会返回。可以获取y年第一天（1月1日）方法一：设置本月份天数参数为0 ，能返回当前月份总共天数。getDate()获取最后一天，即整月天数。，然后通过getDate()方法得到天数。
javascript日历
05-30
JavaScript 可以通过 DOM 操作实现动态生成日历的功能。以下是一个简单的 JavaScript 日历实现示例： ```html <!DOCTYPE html> <title>JavaScript 日历示例 table { border-collapse: collapse; width: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值