一个简单的日历

最新推荐文章于 2021-05-16 20:24:33 发布
最新推荐文章于 2021-05-16 20:24:33 发布
阅读量289 收藏
点赞数 1
文章标签： 日历 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34674487/article/details/84983016
版权

简单的日历！

这是我第一次写博客，我写了一个非常非常简单的日历，实现了根据年月切换显示当前月份的日历，都是用前端写的，有些地方没有想象的完善。
666
点击"<“和”>"能切换月份，月份超过最大值时改变年份，下面是代码

这是html：

<body>
    <form id="form1"  runat="server">
    <div class="div1">
        
        <input type="button" onclick="change()" value="提交"/>
        <table class="table ">
            <tr>
                <th>
                    <input type="button" class="prevbtn" onclick="dian('1')" value="<"/>
                    
                <th>
                    <select id="nian" onchange="gai()">    
                        <script type="text/javascript" >
                            for (i = 1980; i <= 2050; i++) document.write('<option value="' + i + '">' + i)                         
              		    </script>
                    </select><span class="nian">年</span>
                </th>
                <th>
                     <select id="yue" onchange="gai()">
                        <script type="text/javascript" >
                            for (i = 1; i <= 12; i++) document.write('<option value="' + i + '">' + i)
              		    </script>
                         
                    </select><span class="yue">月</span>
                </th>
                <th>
                    <input type="button" class="today" onclick="dian('3')"  value="返回今日"/>
                </th>
                <th>
                    <input type="button" class="nextbtn" onclick="dian('2')" value=">"/>
                </th> 
            </tr>
            <tr>
                <td colspan="5">
                    <table class="table">
                        <thead>
                            <tr align="center" style="background-color:#CFDFF0;height:24px">
                                <td width="14%"><font color="red"><b>日</b></font></td>
                                <td width="14%"><b>一</b></td>
                                <td width="14%"><b>二</b></td>
                                <td width="14%"><b>三</b></td>
                                <td width="14%"><b>四</b></td>
                                <td width="14%"><b>五</b></td>
                                <td width="14%"><font color="red"><b>六</b></font></td>
                            </tr>
                        </thead>
                        <tbody id="nei">
                            <script>
                                var year = $("#nian").val();
                                var month = $("#yue").val();
                                var day_tep = 0;
                                var days = new Array();
                                var time = new Date(year, month, 0);//当前月最后一天
                                var dayInMonth = time.getDate();//一个月有多少天
                                var firstDay = new Date(year, month - 1, 1);
                                var weekDay = firstDay.getDay(); //获取当月第一天是周几
                                //一个月有几个星期,向上取整
                                var weeks = Math.ceil((dayInMonth + weekDay) / 7);
                                for (var i = 0; i < weeks; i++) {//i为一个月的第几周
                                    days[i] = new Array();
                                    document.write('<tr>');
                                    for (var j = 0; j < 7; j++) {//j代表星期几
                                        if ((i == 0 & j >= weekDay) || (i > 0 & day_tep < dayInMonth)) {
                                            day_tep++;
                                            days[i][j] = day_tep;
                                            document.write('<td>' + days[i][j] + '</td>');
                                        } else {
                                            days[i][j] = "";
                                            document.write('<td>' + days[i][j] + '</td>');
                                        }
                                    }
                                    document.write('</tr>');
                                }
                            </script>
                        </tbody>
                    </table>

                </td>
            </tr>
                
        </table>
    </div>
    </form>
</body>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        function NianChange() {
            var nian = $("#nian").val();
            //年份能整除4 且 不能被100整除的  与 年份能被400整除的  为闰年
            if ((nian % 4) == "0" && (nian % 100) != "0" || nian % 400 == "0") {
                alert(nian + "闰  366天 2月29 天 ");
               
            } else {
                $("#nianrun").html("平年");
                alert(nian + "平  365天 2月28 天 ");
            }

        }
        function solarDays(y, m) {
            if (m == 1)
                return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
            else
                return (solarMonth[m]);
        }

        function change(){
            var theNian = $("#nian").val();
            var theYue = $("#yue").val();
            //alert(theNian + "年   " + theYue+"月");
            NianChange();
        }
        
        function gai() {
            var year = $("#nian").val();
            var month = $("#yue").val();
            var day_tep = 0;
            var str = "";
            var days = new Array();
            var time = new Date(year, month, 0);//当前月最后一天
            var dayInMonth = time.getDate();//一个月有多少天
            var firstDay = new Date(year, month - 1, 1);
            var weekDay = firstDay.getDay(); //获取当月第一天是周几
            //一个月有几个星期,向上取整
            var weeks = Math.ceil((dayInMonth + weekDay) / 7);
            for (var i = 0; i < weeks; i++) {//i为一个月有几周
                days[i] = new Array();
                str += "<tr>";
                for (var j = 0; j < 7; j++) {//j代表星期几
                    if ((i == 0 & j >= weekDay) || (i > 0 & day_tep < dayInMonth)) {
                        day_tep++;
                        days[i][j] = day_tep;
                        str += "<td>" + days[i][j] + "</td>"


                    } else {
                        days[i][j] = "";
                        str += "<td>" + days[i][j] + "</td>"
                    }
                }
                str += "</tr>";
            }
            $("#nei").html(str);
        }
        function pushBtm(K) {
            switch (K) {
                case 'YU':
                    if (CLD.SY.selectedIndex > 0) CLD.SY.selectedIndex--;
                    break;
                case 'YD':
                    if (CLD.SY.selectedIndex < 200) CLD.SY.selectedIndex++;
                    break;
                case 'MU':
                    if (CLD.SM.selectedIndex > 0) {
                        CLD.SM.selectedIndex--;
                    }
                    else {
                        CLD.SM.selectedIndex = 11;
                        if (CLD.SY.selectedIndex > 0) CLD.SY.selectedIndex--;
                    }
                    break;
                case 'MD':
                    if (CLD.SM.selectedIndex < 11) {
                        CLD.SM.selectedIndex++;
                    }
                    else {
                        CLD.SM.selectedIndex = 0;
                        if (CLD.SY.selectedIndex < 200) CLD.SY.selectedIndex++;
                    }
                    break;
                default:
                    CLD.SY.selectedIndex = tY - 1900;
                    CLD.SM.selectedIndex = tM;
            }
            changeCld();
        }

        function dian(e) {
            switch (e) {
                case '1':
                    if (yue.selectedIndex > 0) {
                        yue.selectedIndex--;
                    } else {
                        nian.selectedIndex--;
                        yue.selectedIndex = 11;
                    }
                    gai();
                    break;
                case '2':
                    if (yue.selectedIndex < 11) {
                        yue.selectedIndex++; 
                    } else {
                        nian.selectedIndex++;
                        yue.selectedIndex = 0;
                    }
                    gai();                  
                    break;
                case '3':
                    today();
                    break;
            }
        }
        function today() {
            var date = new Date();
            var a = date.getFullYear() - 1980;
            var b = date.getMonth();
            nian.selectedIndex = a;
            yue.selectedIndex = b;
            gai();
        }
    </script>

这是样式：

<style>
        body ,html{overflow: hidden;font-family:"微软雅黑";margin:0px;padding:0px;text-align:center;}
         .div1 {
            width:500px;
            margin:0 auto;
            margin-top:200px;
         }
        .table{
            width:100%; 
            border:1px solid red;
            border-radius:20px;
            border-collapse:collapse;
        }
        .table td{
            border :1px solid black;
            background-color:#ffffff;
        }
        .table th{
            border :1px solid black;
            background-color:#ededed;
            font-weight: bold;
        }
        .div{            
              padding:3px 3px;
              margin:0 auto; 
              background-color :#E8E8EC;      
        }
    </style>

直接粘贴就可以哦 (￣▽￣)~*。

游奕
关注
简单实现一个日历
baidu_37964044的博客
04-27 1903
思路：1.首先你必须给一个基准年 ，在给出这一年的某一天，是星期几     例如 2000 1 1 星期6          2.那如何求2000  2 1是星期几呢？（1月1号的星期6+一月的天数）%7      要考虑平年闰年 2月天数不一样            3.那如何求2001 1 1是星期几？（2000年的一月一号+2000年的天数）%7 要考虑平年闰年天数不一样         根...
js实现简单的日历
rongyuehen的博客
04-01 250
javascript Date对象 var d1 = new Date(); // 获取当前系统时间 我现在的时间是 2020年3月31日 星期二 d1.getFullYear(); // 获取年信息， 2020 d1.getMonth(); // 获取月信息（从0开始 范围：0-11） 3 d1.getDate(); // 获取天信息 此处结果：31 d1.getDa...
简单的日历
11-12
看着网上的各种插件，改别人的代码很烦，自己写了一个简单的日历，各种注释有明确的提示
Objective-c 日期 NSDate 基本够做一个简单的日历
点十八的一方天地
10-01 990
转载自： //获得当前日期 NSDate *date = [NSDate date]; NSCalendar *calendar = [NSCalendar currentCalendar]; NSDateComponents *comps; //本年 comps = [calendar components:(NSYearCalendarUnit) fromDate:date];
简单日历。
夏浅的专栏
06-18 503
最近刚刚学了一点点java，学着做了这个简单的小日历。
c语言实现一个简单日历
09-03
在本篇【标题】"C语言实现一个简单日历"的文章中，作者通过【描述】分享了一段使用C语言编写的代码，旨在实现一个简单的日历功能。文章着重介绍了如何根据用户输入的不同信息，完成三个核心功能： 1. 输入一个年份...
CalendarCanvas:一个简单日历的画布实现
07-02
`CalendarCanvas`是一个利用JavaScript技术实现的简单日历画布，它提供了多点触控和双指缩放功能，使得用户在移动设备或触摸屏上可以更方便地操作和查看日历。 ### 1. 画布（Canvas）基础 `Canvas`是HTML5引入的一...
一个简单日历功能
04-03
这是一个简单日历功能，源码Caldroid，Caldroid实现日历功能，很实用的一个日历案例，大家可以了解一下吧。Caldroid is a fragment that display calendar with dates in a month. Caldroid can be used as embedded...
最简单最好用的日历控件
01-04
绝对好用……打开rar中的js日历控件使用.txt，按照里面说写的去做，三步搞定。。。如果想要高级使用方法，里面还有一个帮助文档可供参考
c语言编写日历作业,c语言实现一个简单日历
weixin_35551323的博客
05-16 2104
满足三个需求:1．输入一个年份，输出是在屏幕上显示该年的日历。假定输入的年份在1940-2040年之间。2．输入年月，输出该月的日历。3．输入年月日，输出距今天还有多少天，星期几，是否是公历节日。最终完善版代码：#include#include #include #include #include int year , month , day ;int day_of_month[12] = {31...
简易日历
yzsn_wjc的博客
09-08 811
日历 实现的功能 能实时显示当前时间 能显示当天日期，并且可查看该月天数，星期几 可点击按钮查看任意年份月份的日期 代码展示 html <div class="wrap"> <h1></h1> <h2></h2> <button class="l"> < </bu...
实现一个简单的日历
u010452564的博客
10-28 298
通过原生js 实现一个简单的日历，在chrome。FF ,和IE9以上版本的浏览器都能正常运行，其界面如下显示： js代码如下： //判断是否是闰年 calender.runNian = function(y) {   if (y%400===0 || (y%4 === 0 && y%100!== 0)) {     return true;       }
简单的日历实现
Wrj6811的博客
11-20 253
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单日历实现</title> <link rel="stylesheet" type="text/css" href="index.css"/> &lt...
JavaScript实现简单日历
滴滴滴的博客
08-08 9476
实现效果： 根据所选择的年月，列出当月对应是周几，效果图如下： 实现思路： 1、使用select标签保存年月的所选菜单。使用table标签保存当月天数，表头为固定的周日周一等。 2、使用option对象，给年月循环赋值。 3、将每月的天数保存到数组中，根据所选的年月获取当月的天数，以及当月一号对应周几，对应周几就在第一行先打印几个空格，然后从一号开始依次打印当月天数。 4、刷新年月...
简易年历
peppa_pig的博客
08-06 608
 真的是非常简易了 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0;padding: 0;
简易年历卡
aaa小二
05-15 535
js鼠标事件
css案例学习之table tr th td ul li实现日历
weixin_30810239的博客
11-30 182
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { border-collapse: collapse; table-layout:fixed; width:780; } .month captio...
JavaScript自制简单日历模板
通过扩展，可以将这个简单日历转化为功能齐全的日期选择组件。 这个日历模板是一个很好的起点，适合初学者理解JavaScript和DOM操作。开发者可以根据自己的需求，添加更多功能，如日期验证、多语言支持、自定义样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值