简易日历制作教程：HTML与JavaScript实现-优快云博客

本文链接：https://blog.youkuaiyun.com/Franzzi1/article/details/99702823

本文介绍了一位博主利用JavaScript和HTML制作简易日历的过程，包括获取日期、判断星期、计算上月天数等关键点，并分享了在制作过程中遇到的问题和解决思路。虽然目前的日历功能尚不完善，如无法切换月份和显示农历，但博主期待通过不断学习和读者的交流以改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一周也就只有周末得空，可以来更新一下我的博客了…
这两天学习了一下获取日期的方法，模仿win10系统上的日历的样子做了一个简单的小日历，不过有些功能由于技术有限，未能实现，再接再厉吧…

这是截图的系统样式，我要做的也就跟这个效果差不多
在这里插入图片描述

HTML样式部分
这个里面的样式大家可以根据自己喜欢的样式，改变颜色、形状、大小就可以了…
本人艺术细胞有限，就只能照葫芦画瓢了…

<body>
    <div class="calendar">
        <div class="top1" id="top1"></div>//时间计时
        <div class="top2" id="top2"></div>
        <header>
            <ul>
                <li class="middle" id="middle"></li>
                <li class="last" id="last">︿</li>//点击跳转上月日期
                <li class="next" id="next">﹀</li>//点击跳转下月日期
            </ul>
        </header>
        <ul class="th">//星期
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>七</li>
        </ul>
        <ul id="tbody">
            <!-- 此处为当月的天数 -->
        </ul>
    </div>
</body>

在制作日历的时候需要了解几个重要的点：
1、日期的表现方式
2、获取该时间的第一天是星期几
3、获取该时间的上一个月有多少天
4、获取该时间的月份有多少天
5、时间的秒如何变动（定时器设置）

先解决第一个点，日期的表现方式

如何获取时间，只需要执行下面一条代码就可以了…

var date = new Date();//即可获取目前的时间

然后再声明一些变量去分别获取时间的年份，月份，日期and so on…
获取日期是date.getDate()；获取星期几是date.getDay();这两个很容易弄混的…
再就是date很容易打成data…页面就加载不出来了…我反正是在这上面栽过很过次跟头…页面加载不出来时是一脸懵逼…

var year = date.getFullYear();
var month = date.getMonth() + 1;//月份是从0开始计算的,所以得 + 1
var day = date.getDate();//获取日期
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var week = date.getDay();//获取星期几
month = month < 10 ? "0" + month : month;//当月份为一位数的时候，在前面加0，以下同理..
day = day < 10 ? "0" + day : day;
hour = sec < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
var weeklist = ["日","一","二","三","四","五","六"];//按照大家的习惯，将星期几的阿拉伯数字转成中文大写数字..
week = weeklist[week];
document.write("今天是" + year + "年" + month + "月" + day + "日" + hour + "时" + min + "分" + sec + "秒 星期" + week );//最后将日期打印出来就好了..

接下来解决第二个问题：获取该时间的第一天是星期几？
假设用户设定了一个时间为：2019-2-28；
获取该时间的第一天是星期几就只用将28号改为1号就可以了…

var date = new Date("2019-2-28");//用户设定时间

function firstDayWeek(date) {
    var tempDate = new Date("2019-01-01"); //将获取的时间赋值给tempDate
    tempDate.setFullYear(date.getFullYear()); //获取年份2019
    tempDate.setMonth(date.getMonth()); //获取月份2月
    // tempDate.setDate(date.getDate());
    tempDate.setDate(1); //计算2月的第一天是星期几,将获取的日期28改为1;
    return tempDate.getDay(); //返回值tempDate.getDay(),2.1号是星期几
}

第三个问题：获取该时间的上一个月有多少天？
至于为什么要设定2-28号，是因为2月是个特殊的月份，（在这里与闰年是没有多大关系的）
设置时间为2019-2-28号，若要获取1月份的天数，将时间改为2月0号，即返回了上个月的最后一天
若设定时间为2月28号,要去测1月有多少天,若恰好获取今天的日期为31号,那么获取的31号会去替代设定时间的28号,即时间为2月31号，由于2月只有28天，于是就会变成3月3号,根据上一段话，我们又将日期设置为0，那么3月3号变为3月0号，最后求出的上个月的天数将会赋值给2月，一月的天数还是没有求出来，所以可以将当天获取的时间重新写一个每个月都包含的天数，eg：2019-01-01；

function lastMonthDays(date) {
    var tempDate = new Date("2019-01-01"); //为了避免获取的当天时间日期为31号，可替换时间，不影响结果
    tempDate.setFullYear(date.getFullYear()); //获取年份2019
    tempDate.setMonth(date.getMonth());//获取月份2
    tempDate.setDate(0);//02.01-->02.00-->01.31
    return tempDate.getDate();//31
}

第四个问题：获取该时间的月份有多少天？
这个问题的解决原理跟上面一个问题有着同样的道理

//获取该时间的月份有多少天
function presentMonthDays(date) {
    var tempDate = new Date("2019-01-01");
    tempDate.setFullYear(date.getFullYear());
    tempDate.setMonth(date.getMonth() + 1); //将月份 + 1
    tempDate.setDate(0); //将日期设置为0,获得3月0号-->2月28号
    return tempDate.getDate();//28
}

第五个问题：定时器的设置

var date = new Date();
var result1 = formatDate(date, "hour:min:sec");
top1Div.innerHTML = result1;////页面加载出来就要开始计时，否则会出现1s的延时
//此处代码需要写两遍..
setInterval(function() { //设置定时器，一秒钟显示一面
       var date = new Date();
       var result1 = formatDate(date, "hour:min:sec");//这里是将第一个问题封装成了一个函数formatDate（）；
       top1Div.innerHTML = result1;
}, 1000) //1000代表1秒

问题都解决完了，接下来只需要将代码合起来就可以了…
css部分就不写了…大家可以按照自己喜欢的样式去修饰

<body>
    <div class="calendar">
        <div class="top1" id="top1"></div>
        <div class="top2" id="top2"></div>
        <header>
            <ul>
                <li class="middle" id="middle"></li>
                <li class="last" id="last">︿</li>
                <li class="next" id="next">﹀</li>
            </ul>
        </header>
        <ul class="th">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>七</li>
        </ul>
        <ul id="tbody">
            <!-- 此处为当月的天数 -->
        </ul>
    </div>
</body>
<script src="../js/calendar.js"></script>//此处的js代码是问题2、3、4
<script>
    var top1Div = document.getElementById("top1");
    var top2Div = document.getElementById("top2");
    var lastBtn = document.getElementById("last");
    var middleDiv = document.getElementById("middle");
    var nextBtn = document.getElementById("next");
    var tobody = document.getElementById("tobody");
    var date = new Date();
    setCalender(); //页面一打开就执行函数setCalender()
    lastBtn.onclick = function() {//按下显示上个月日期
        date.setMonth(date.getMonth() - 1);
        setCalender();//月份发生改变,就需要重新调用一次函数
    }
    nextBtn.onclick = function() {//按下显示下个月日期
        date.setMonth(date.getMonth() + 1);
        setCalender();
    }
    var result1 = formatDate(date, "hour:min:sec");
    top1Div.innerHTML = result1;//定时器部分
    function setCalender() {
    setInterval(function() { //设置定时器，一秒钟显示一面
                var date = new Date();
                var result1 = formatDate(date, "hour:min:sec");
                top1Div.innerHTML = result1;
            }, 1000) //1000代表1秒
    var result2 = formatDate(date, "year年month月day日");
    top2Div.innerHTML = result2;       
    var firstDay = firstDayWeek(date);
    // alert(firstDay);年轻人写代码要写一步看一步..
    firstDay = firstDay == 0 ? 7 : firstDay; //在系统中周日为0,所以判断当改月的第一天为星期天的时候，将firstDay设置为7
    var html = "";
    var lastRemainDays = lastMonthDays(date); //求出上个月有多少天，用来填满这个月前几处空格；
    for (var i = firstDay - 1; i >= 1; i--) { //循环 留出上个月天数 次
        var num = lastRemainDays - i + 1; //用上个月的天数减去循环次数
        html += "<li style='color:#999'>" + num + "</li>"; //输出上月天数
    }
    for (var i = 1; i <= (42 - firstDay - currentDays + 1); i++) {
            html += "<li style='color:#999'>" + i + "</li>";
        }
    middleDiv.innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) + "月";
    //date.getMonth + 1 月份是从0开始算的..
    tbody.innerHTML = html;
    }
</script>