电子日历的设计与实现

最新推荐文章于 2024-04-29 13:12:37 发布

非空空如也哉

最新推荐文章于 2024-04-29 13:12:37 发布

阅读量611

点赞数

分类专栏：入门自学文章标签： html js

本文链接：https://blog.csdn.net/adsensca/article/details/115529851

版权

入门同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

自学

16 篇文章 0 订阅

订阅专栏

<!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">
    <title>Show</title>
    <style>
        div{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        #calendar{
            width: 400px;
            margin: auto;
        }
        #calendar::after{
            display: block;
            content: "";
            clear: both;
        }
        #calendar>div:first-child{
            height: 40px;
        }
        button{
            width: 25%;
            float: left;
            height: 40px;
        }
        #month{
            width: 50%;
            float: left;
        }
        .everyday{
            width: 14%;
            float: left;
        }
    </style>
</head>
<body οnlοad="showDate()">
        <h3>简单电子日历的设计与实现</h3>
        <hr>
        <div id="calendar">
            <div>
                <button οnclick="lastMonth()">上个月</button>
                <div id="month"></div>
                <button οnclick="nextMonth()">下个月</button>
            </div>
            <!-- 之所以使用div而不是ul、li来建立星期目录是为了方便js中日历的建立 -->
            <div>
                <div class="everyday">日</div>
                <div class="everyday">一</div>
                <div class="everyday">二</div>
                <div class="everyday">三</div>
                <div class="everyday">四</div>
                <div class="everyday">五</div>
                <div class="everyday">六</div>
            </div>
            <div id="day"></div>
        </div>




    <script>
        // 获取现在的日期时间
        var today = new Date();
        // 获取年份
        var year = today.getFullYear();
        // 获取月份，因为月份是从0开始计算的，所以为了正常显示（即从一开始计数）要+1
        var month = today.getMonth() + 1;
        // 获取日数
        var day = today.getDate();
        // 为当月的天数创造变量以承载
        var allday = 0;
        // 计数当前月份有几天，将结果存放在allday中
        function count(){
            // 因为2月份的天数特殊，所以单独考虑
            if(month != 2){
                if((month == 4) || (month == 6) || (month == 9) || (month == 11)){
                    allday = 30;
                }else{
                    allday = 31;
                }
            }else{
                // 区分闰年与非闰年
                if (((year % 4) ==0) && ((year % 100) != 0)) {
                    allday = 29;
                }else{
                    allday = 28;
                }
            }
        }
        // 在“上个月”和“下个月”的按钮之间的位置显示当前月份
        function showMonth(){
            // 获取html文件中id为month的div
            var year_month = document.getElementById("month");
            // 因为year，month为全局变量，所以可以直接使用
            year_month.innerHTML = year + "年" + month + "月";
        }

        function showDate(){
            // 将前面两个函数嵌套进来便于调用
            showMonth();
            count();

            // 获取当前年份当前月的第一天
            var firstdate = new Date(year, month - 1,1 );
            // 获取当前年份当前月的第一天是星期几
            var xinqi = firstdate.getDay();
            // 初始化用于显示日历的div
            var daterow = document.getElementById("day");
            daterow.innerHTML = "";
            // 如果第一天不是星期日，需要在第一天之前用空白填充
            if (xinqi != 0) {
                for (var i = 0; i < xinqi; i++) {
                    // 给每一个空白日期添加div
                    var dayElement = document.createElement("div");
                    dayElement.className = "everyday";
                    // 将div添加到初始化后的div中
                    daterow.appendChild(dayElement);  
                }
            }
            // 填充日历
            for (var j = 1; j <= allday; j++) {
                // 给每一个日期添加div并显示日期
                var dayElement = document.createElement("div");
                dayElement.className = "everyday";
                dayElement.innerHTML = j + "";
                daterow.appendChild(dayElement);
            }
        }
        // 上个月按钮调用的函数
        function lastMonth(){
            if(month > 1) {
                month -= 1;
            }else{
                month = 12;
                year -=1;
            }
            showDate();
        }
        // 下个月按钮调用的函数
        function nextMonth(){
            if(month < 12) {
                month += 1;
            }else{
                month = 1;
                year +=1;
            }
            showDate();
        }
    </script>
</body>
</html>

非空空如也哉

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
电子日历的设计与实现

<!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"> <title>Sho
复制链接

扫一扫

专栏目录