日期-日历的实现

最新推荐文章于 2023-07-07 10:28:57 发布

一知

最新推荐文章于 2023-07-07 10:28:57 发布

阅读量890

点赞数

分类专栏： Javascript 文章标签： js 日历

本文链接：https://blog.csdn.net/laozhangu/article/details/13005953

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、效果图

二、制作思想

1、求每个月的行数

1）获取每月第一天是星期几，比如效果图中是星期二

2）那么这个月的天数为2+31

3）得出(33-1)/7+1=5行

2、填充行

1）第一行前面的星期天，星期一是上个月的，所以填充空格

2）中间的四行递归填充

3）最后一行剩下的也填充空格

            for (var i = 0; i < row; i++) {
                ht += "<tr>";
                for (var j = 0; j < 7; j++) {
                    if (i == 0 && j < firday) {//第一行空格填充
                        // document.write("<td> </td>");
                        ht += "<td> </td>";
                    }
                    else if (i == row - 1 && lasday % 7 != 0 && j >= lasday % 7) {//最后一行空格填充
                        // document.write("<td> </td>");
                        ht += "<td> </td>";
                    }
                    else {//其它填充
                        //document.write("<td>" + (7 * i - firday + 1 + j) + "</td>");
                        if ((7 * i - firday + 1 + j) == date && year == nowyear && monindex == nowmon) {//如果是今天
                            ht += "<td><span style='color:white; background:#000;'>" + (7 * i - firday + 1 + j) + "</span></td>";
                        } else
                            ht += "<td>" + (7 * i - firday + 1 + j) + "</td>";
                    }
                }
                //document.write("</tr>");
                ht += "</tr>"
            }

三、完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>自己制作的简单日历</title>
    <style type="text/css">
        #date th, #date td
        {
            width: 30px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="date" style="background: #ddd; width: 210px; height: 270px; margin: 0 auto;">
    </div>
    <script type="text/javascript">
        var myRiLi = function (year, monindex, date) {
            var day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//创建每个月天数的数组
            var timenow = new Date();
            var nowyear = timenow.getFullYear();//获取当前时间
            var nowmon = timenow.getMonth();//获取当前月的索引，如9代表10月
            var nowdate = timenow.getDate();//获取日期
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {//判断是否闰年，是的话，二月29天。
                day[1] = 29;
            }
            var firday = (new Date(year, monindex, 1)).getDay();//获取每个月的第一天是星期几，比如星期三，则firday=3
            var lasday = day[monindex] + firday;//那么这个月总天数为 firsday+实际天数
            var row = Math.floor((lasday - 1) / 7) + 1;//一行7列，获取行数，以上三句是关键代码，主体思想
            var ht = "<table cellpadding='0' cellspacing='0'><tr><th colspan='2' id='yearup'>《</th><th colspan='3'><span id='year'>" + year + "</span>年</th><th colspan='2' id='yeardown'>》</th></tr><tr><th colspan='2' id='monthup'>《</th><th colspan='3'><span id='month'>" + (monindex + 1) + "</span>月</th><th colspan='2' id='monthdown'>》</th></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
            for (var i = 0; i < row; i++) {
                //document.write("<tr>");
                ht += "<tr>";
                for (var j = 0; j < 7; j++) {
                    if (i == 0 && j < firday) {//如果第一天星期三，则前面几个填空格
                        // document.write("<td> </td>");
                        ht += "<td> </td>";
                    }
                    else if (i == row - 1 && lasday % 7 != 0 && j >= lasday % 7) {
                        // document.write("<td> </td>");
                        ht += "<td> </td>";
                    }
                    else {
                        //document.write("<td>" + (7 * i - firday + 1 + j) + "</td>");
                        if ((7 * i - firday + 1 + j) == date && year == nowyear && monindex == nowmon) {
                            ht += "<td><span style='color:white; background:#000;'>" + (7 * i - firday + 1 + j) + "</span></td>";
                        } else
                            ht += "<td>" + (7 * i - firday + 1 + j) + "</td>";
                    }
                }
                //document.write("</tr>");
                ht += "</tr>"
            }
            return ht + "</table>";
        }//函数myRiLi结束,

        var mydate = new Date();
        var year1 = mydate.getFullYear();
        var monindex = mydate.getMonth();
        var daynum = mydate.getDate();
        var tit = document.getElementById("date");
        tit.innerHTML = myRiLi(year1, monindex, daynum);
        function yearup2(str) {
            return document.getElementById(str);
        }

        function aaa() {//上一年
            var k = parseInt(yearspan.innerHTML) - 1;
            var l = parseInt(monthspan.innerHTML) - 1;
            tit.innerHTML = myRiLi(k, l, daynum);
            ChonXin();
        }
        function bbb() {//下一年
            var k = parseInt(yearspan.innerHTML) + 1;
            var l = parseInt(monthspan.innerHTML) - 1;
            tit.innerHTML = myRiLi(k, l, daynum);
            ChonXin();
        }
        function ccc() {//上一月
            var k = parseInt(yearspan.innerHTML);
            var l = parseInt(monthspan.innerHTML) - 2;
            if (l == -1) {
                l = 11;
                k -= 1;
            }
            tit.innerHTML = myRiLi(k, l, daynum);
            ChonXin();
        }
        function ddd() {//下一月
            var k = parseInt(yearspan.innerHTML);
            var l = parseInt(monthspan.innerHTML);
            if (l == 12) {
                l = 0;
                k += 1;
            }
            tit.innerHTML = myRiLi(k, l, daynum);
            ChonXin();
        }
        function ChonXin() {
            yearspan = document.getElementById('year');
            monthspan = document.getElementById('month');

            yearup1 = yearup2("yearup");
            yeardown1 = yearup2("yeardown");
            monthup1 = yearup2("monthup");
            monthdown1 = yearup2("monthdown");

            yearup1.onclick = aaa;
            yeardown1.onclick = bbb;
            monthup1.onclick = ccc;
            monthdown1.onclick = ddd;
        }
        ChonXin();
        // alert(row);

    </script>
</body>
</html>