JavaScript日历

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

         最近在看CSS的书的时候，其中有一个示例是一个日历。于是想到要使用JavaScript写一个简单的日历，能够实现上一月，下一月的功能。我就写了一个，代码量不大，容易理解，只要弄懂了基本原理，大家可以在此基础上自由发挥，在这里分享给大家：

 1.首先是判断当前年是闰年还是平年，因为闰年和平年的二月份的天数不一样，闰年是29天，平年是28天：

//判断是否是闰年能够被4整除,不能被400整除，或者能够被4整除，但是不能被100整除，能被400整除的，都是闰年
function get_true(year) {
    return year % 4 == 0 ? (year % 100 != 0 ? true : (year % 400 == 0 ? true : false)) : false
}
2.获取当前的年、月、日，要说明一点，当前月是从0开始的，0代表1月份，11代表12月份 

var data = new Date();
var year = data.getFullYear(); //获取当前年份
var month = data.getMonth(); //获取当前月份
var day = data.getDate(); //获取当前日

$("#year").text(year + "年");
$("#month").text((month + 1) + "月");
3.获取当某个月份的天数 

//获取每月的天数
function getDayCount(year, month) {
    var is_true = get_true(year);
    if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) {
        return 31;
    } else if (month == 3 || month == 5 || month == 8 || month == 10) {
        return 30;
    } else if (month == 1) {
        if (is_true) {
            return 29;
        } else {
            return 28;
        }
    }
}
4.把当前月的日历要显示的天数放在一个数组里，包括上一个月剩下的天数，当前月天数，以及下一个月的部分天数，如果当前月的1号不等于周日。那么就需要上一个月的天数来补全第一行的日期。如果当前月的最后一天不是周六，就需要下一个月的天数来补全最后一行的日期，所以当前月日历的组成可能会包括上一个月的天数和下一个月的天数，但是上一个月的天数和下一个月的天数最多不超过6天。这样的话让日历显示更人性化 

//获取页面上显示的所有日期
function getWeek(year,month) {
    var d = new Date(year, month, 1);
    var lastCount = [0, 1, 2, 3, 4, 5, 6];
    var mynum=d.getDay();
    var num=lastCount[mynum];//前面剩余几个上月日期
    var today = new Date(); //获取当前日期
    var nowDay = today.getDate();//获取当前日期中的日，需要在日历中高亮显示
    var newCount=getDayCount(year, month);//获取当前月的天数
    var lastCount=getDayCount(year, (month-1));//获取上一个月的天数
    var array=new Array();
    for (var i = num; i >0; i--) {
        array.push(lastCount-i+1);//在数组添加上月剩余的天数
    }
    for (var i = 1; i <= newCount; i++) {
        array.push(i);//在数组添加本月天数
    }
    //如果数据正好填充满最后一行，那么就不添加下月的天数，如果没有填充满，差几个就填充几个下月的天数
    var newCount=7-array.length%7;
    if(newCount <7){
        for (var i = 1; i <=newCount; i++) {
            array.push(i);//在数组添加下月的天数
        }
    }
}
5.绘制日历。通过想页面插入html片段的方式插入 

function addView(arr,nowDay,num,dayCount){
    var html="";
    for (var i = 0; i < arr.length; i++) {
        //每一个周日都需要换行
        if(i == 0 || i == 7 || i == 14 || i == 21 || i == 28 || i == 35){
            if(i == 0){
                html = html + "<tr>";
            }else{
                html = html + "</tr><tr>";
            }
        }
        if(arr[i] == nowDay){//如果是当前日，则高亮
            html = html +"<td class='selected'><a href='#'>"+arr[i]+"</a></td>"
        }else if(i<num || i-num> dayCount-1){//如果是上一个月的剩余天数或者是下一个月的天数，样式设置为null
            html = html +"<td class='null'>"+arr[i]+"</td>"
        }else{//其它的样式正常
            html = html +"<td><a href='#'>"+arr[i]+"</a></td>"
        }
        if(i == arr.length-1){
            html = html +"</tr>"
        }
    }
    //当切换月份的时候，需清空，重新插入html片段
    $("#content tbody").empty().append(html);
}
6.上一月，下一月 

//上月
$("#left").click(function(){
    if (month>0) {
        month--;
        getWeek(year,month);
        $("#month").text((month + 1) + "月");
    }else{
        year = year - 1;
        month = 11;
        getWeek(year,month);
        $("#month").text((11 + 1) + "月");
        $("#year").text(year + "年");
    }
})
//下月
$("#right").click(function(){
    if (month<11) {
        month++;
        getWeek(year,month);
        $("#month").text((month + 1) + "月");

    }else{
        year = year + 1;
        month = 0;
        getWeek(year,month);
        $("#month").text((month + 1) + "月");
        $("#year").text(year + "年");
    }
})
     

    这就完成了一个简单日历的编写，我在下面附上日历的完整代码，其中用到了jquery操作dom，所以在线引入了jquery。代码包含css样式，样式可以自己调整为自己喜欢的样式

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="Author" content="npc-guangming">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <title>日历</title>
    <style>
        .cal{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-collapse: separate;
            border-spacing: 0;
            text-align: center;
            color:#333;
        }
        .cal th,.cal td{
            margin: 0;
            padding: 0;
        }
        .cal caption{
            font-size: 1.25em;
            padding-top: 0.692em;
            padding-bottom: 0.692em;
            background-color: #d4dde6;
        }
        .cal caption [rel='prev']{
            float: left;
            margin-left: 0.2em;
        }
        .cal caption [rel='next']{
            float: right;
            margin-right: 0.2em;
        }
        .cal caption a:link,
        .cal caption a:visited{
            text-decoration: none;
            color: #333;
            padding:0 0.2em;
        }
        .cal caption a:hover,
        .cal caption a:focus,
        .cal caption a:active{
            background-color: #6d8ab7;
        }
        .cal thead th{
            background-color: #d4dde6;
            border-bottom: 1px solid #a9bacb;
            font-size: 0.875em;
        }
        .cal tbody{
            color: #a4a4a4;
            text-shadow: 1px 1px 1px white;
            background-color: #d0d9e2;
        }
        .cal tbody td,
        .cal tbody td.null:hover{
            border-top:1px solid #e0e0e1;
            border-right: 1px solid #9f9fa1;
            border-bottom: 1px solid #acacad;
            border-left: 1px solid #dfdfe0;
        }
        .cal tbody a{
            display: block;
            text-decoration: none;
            color: #333333;
            background-color: #c0c8d2;
            font-weight: bold;
            padding:0.385em 0.692em 0.308em 0.692em;
        }
        .cal tbody a:hover,
        .cal tbody a:focus,
        .cal tbody a:active,
        .cal tbody .selected a:active,
        .cal tbody .selected a:link,
        .cal tbody .selected a:focus,
        .cal tbody .selected a:hover,
        .cal tbody .selected a:visited{
            background-color: #6d8ab7;
            color: white;
            text-shadow: 1px 1px 1px #22456b;
            -webkit-box-shadow: inset 2px 2px 3px #22456b;
            -moz-box-shadow: inset 2px 2px 3px #22456b;
        }
        .cal tbody td:hover,
        .cal tbody td.selected{
            border-top:1px solid #2a3647;
            border-right: 1px solid #465977;
            border-bottom: 1px solid #576e92;
            border-left: 1px solid #466080;

        }
    </style>
</head>

<body>
<table class="cal" id="content">
    <caption>
        <label id="left" rel="prev">&lt;</label><span id="year"></span><span id="month"></span> <label id="right" rel="next">&gt;</label>
    </caption>
    <calgroup>
        <col id="Sun" align="left"/>
        <col id="Mon" align="left"/>
        <col id="Tue" align="left"/>
        <col id="Wed" align="right"/>
        <col id="Thur"align="right" />
        <col id="Fri" align="right"/>
        <col id="Sat" align="right"/>
    </calgroup>
    <thead>
    <tr>
        <th scope="col">Sun</th>
        <th scope="col">Mon</th>
        <th scope="col">Tue</th>
        <th scope="col">Wed</th>
        <th scope="col">Tur</th>
        <th scope="col">Fir</th>
        <th scope="col">Sat</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script type="text/javascript">
    var data = new Date();
    var year = data.getFullYear(); //获取当前年份
    var month = data.getMonth(); //获取当前月份
    var day = data.getDate(); //获取当前日

    $("#year").text(year + "年");
    $("#month").text((month + 1) + "月");

    //判断是否是闰年 能够被4整除,不能被400整除，或者能够被4整除，但是不能被100整除，能被400整除的，都是闰年
    function get_true(year) {
        return year % 4 == 0 ? (year % 100 != 0 ? true : (year % 400 == 0 ? true : false)) : false
    }
    //获取每月的天数
    function getDayCount(year, month) {
        var is_true = get_true(year);
        if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) {
            return 31;
        } else if (month == 3 || month == 5 || month == 8 || month == 10) {
            return 30;
        } else if (month == 1) {
            if (is_true) {
                return 29;
            } else {
                return 28;
            }
        }
    }
    //获取页面上显示的所有日期
    getWeek(year,month);
    function getWeek(year,month) {
        var d = new Date(year, month, 1);
        var lastCount = [0, 1, 2, 3, 4, 5, 6];
        var mynum=d.getDay();
        var num=lastCount[mynum];//前面剩余几个上月日期
        var today = new Date(); //获取当前日期
        var nowDay = today.getDate();//获取当前日期中的日，需要在日历中高亮显示
        var newCount=getDayCount(year, month);//获取当前月的天数
        var lastCount=getDayCount(year, (month-1));//获取上一个月的天数
        var array=new Array();
        for (var i = num; i >0; i--) {
            array.push(lastCount-i+1);//在数组添加上月剩余的天数
        }
        for (var i = 1; i <= newCount; i++) {
            array.push(i);//在数组添加本月天数
        }
        //如果数据正好填充满最后一行，那么就不添加下月的天数，如果没有填充满，差几个就填充几个下月的天数
        var newCount=7-array.length%7;
        if(newCount <7){
            for (var i = 1; i <=newCount; i++) {
                array.push(i);//在数组添加下月的天数
            }
        }
        //重新获取当前月的天数,用做参数
        var dayCount = getDayCount(year, month)
        addView(array,nowDay,num,dayCount);
    }
    function addView(arr,nowDay,num,dayCount){
        var html="";
        for (var i = 0; i < arr.length; i++) {
            //每一个周日都需要换行
            if(i == 0 || i == 7 || i == 14 || i == 21 || i == 28 || i == 35){
                if(i == 0){
                    html = html + "<tr>";
                }else{
                    html = html + "</tr><tr>";
                }
            }
            if(arr[i] == nowDay){//如果是当前日，则高亮
                html = html +"<td class='selected'><a href='#'>"+arr[i]+"</a></td>"
            }else if(i<num || i-num> dayCount-1){//如果是上一个月的剩余天数或者是下一个月的天数，样式设置为null
                html = html +"<td class='null'>"+arr[i]+"</td>"
            }else{//其它的样式正常
                html = html +"<td><a href='#'>"+arr[i]+"</a></td>"
            }
            if(i == arr.length-1){
                html = html +"</tr>"
            }
        }
        //当切换月份的时候，需清空，重新插入html片段
        $("#content tbody").empty().append(html);
    }
    //上月
    $("#left").click(function(){
        if (month>0) {
            month--;
            getWeek(year,month);
            $("#month").text((month + 1) + "月");
        }else{
            year = year - 1;
            month = 11;
            getWeek(year,month);
            $("#month").text((11 + 1) + "月");
            $("#year").text(year + "年");
        }
    })
    //下月
    $("#right").click(function(){
        if (month<11) {
            month++;
            getWeek(year,month);
            $("#month").text((month + 1) + "月");

        }else{
            year = year + 1;
            month = 0;
            getWeek(year,month);
            $("#month").text((month + 1) + "月");
            $("#year").text(year + "年");
        }
    })
</script>
</body>
</html>

Alex__Gong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js组件化展示全年日历实现
04-02
原生js实现全年日历展示,组件化封装所有函数,代码注释,风格简约
用 JavaScript 编写日历
allway2的博客
05-27 4584
概述 在本教程中，我将介绍使用几行 JavaScript 将日历渲染到网页上。日历将包括仅使用普通旧 JavaScript的月份和年份的下拉列表。流程如下： 将月份渲染到下拉列表中 将年份渲染到下拉列表中 呈现当前选择的月/年组合的天数 更改月份/年份时重新绘制日历 更改月份和/或年份将重新绘制日历以匹配给定月份和年份的正确日期。 如果你是 JavaScript 的初学者，或者只是需要更多的洞察力，我强烈推荐你可以在亚马逊上购买的 JavaScript Ninja 的秘密。这是一本扎实的读物，本
用JavaScript实现日历效果(仅展示获取到日历数据,样式自己写)
cha12138的博客
03-30 1116
用JavaScript实现日历效果
JavaScript-制作日历
MyLove的博客
11-28 452
【代码】JavaScript-制作日历。
js写简单日历
Myd
11-22 3972
写日历主要的是要搞清楚2点：1，每个月的第一天是周几？ 2，每个月有多少天？清楚这2个之后就可以完成一个最简单的日历了。而这2个问题可以轻易的调用js的api获取到。
javascript日历
05-26
NULL 博文链接：https://overbin.iteye.com/blog/513723
JavaScript日历实现代码
10-28
写过很多日历，大多都是显示用的，最近项目中要用到可精确到秒的时间选择器，于是就动手写了个。
推荐开源项目：Calendar.js - 简洁而强大的JavaScript日历库
最新发布
gitblog_00085的博客
04-06 510
推荐开源项目：Calendar.js - 简洁而强大的JavaScript日历库 项目地址:https://gitcode.com/hippo-yuan/Calendar.js Calendar.js 是一个由 Hippo Yuan 开发的轻量级、高度可定制的 JavaScript 日历组件。这款库旨在简化网页中的日期选择功能，提供灵活的API和丰富的自定义选项，使得开发者可以快速集成并按照自己的...
javascript简易万年历
Sugite
07-26 1453
简单万年历 <!-- //构造Date对象，并返回当前的年月日 var dDate = new Date(); var dCurMonth = dDate.getMonth(); var dCurDayOfMonth = dDate.getDate(); var dCurYear = dDate.getFullYear(); //创建Object对象 var objPrevEle
精心挑选12款优秀的 JavaScript 日历和时间选择插件
Tizian的专栏
10-16 1718
今天这篇文章向大家分享12款精心挑选的优秀 JavaScript 日历和时间选择插件，都带有详细的使用教程和效果演示。这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果。同时推荐阅读的博文中还有更多实现各种网站功能的 jQuery 优秀插件，欢迎大家可以去淘金。 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件，有详细的使用文档，最
【JavaScript】制作日历
m0_49442965的博客
10-13 1765
【代码】【JavaScript】制作日历。
教你用JavaScript制作小日历
小院里的霍大侠
12-07 1742
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
JavaScript制作日历
weixin_50821119的博客
03-06 3136
效果图 代码 <!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"> <titl
原生JavaScript实现自定义日历
qq_41812656的博客
09-22 808
以下内容只返回js数据结构，css样式可以用grid布局自行开发，后续会把农历相关的数据也给补充上，如有错误，欢迎补充~~
js制作日历
weixin_63794155的博客
09-21 1214
new Date()第3个参数默认为1，就是每个月的1号，将它设置为0后，new Date()会返回。可以获取y年第一天（1月1日）方法一：设置本月份天数参数为0 ，能返回当前月份总共天数。getDate()获取最后一天，即整月天数。，然后通过getDate()方法得到天数。
js使用表格生成一个日历，点击按钮上查看上个月，点击按钮下，查看下个月，月份，年份
m0_64590669的博客
10-09 498
js使用表格生成一个日历，点击按钮上查看上个月，点击按钮下，查看下个月，月份，年份
new Date遇到的坑
weixin_39388536的博客
11-04 438
常用相关API方法 Date.getFullYear() // 获取年份(4位) Date.getYear() // 获取年份(2位) Date.getMonth() // 获取月份(0-11) Date.getDate() // 获取月份的具体日期(1-31) Date.getDay() // 返回星期几(0-6) Date.parse() // 返回某个日期的时间戳 日期格式 2020-10-01格式在IE和Safari等浏览器上不兼容 2020/10/01是最佳的日期格式 ...
使用JavaScript代码制作网页年历
yechuan_wink的博客
06-17 5675
年历 使用js代码制作网页年历生成 <!doctype html> <html> <head> <meta charset="utf-8"> <title>年历</title> <script> var year = parseInt(prompt('输入年份：','2019')); document.write(calendar(year));

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值