电子日历的设计与实现

最新推荐文章于 2022-09-13 09:23:20 发布

YQEMMMM

最新推荐文章于 2022-09-13 09:23:20 发布

阅读量3.8k

点赞数 1

分类专栏： HTML专栏文章标签： html5 js

本文链接：https://blog.csdn.net/YQEMMMM/article/details/109171112

版权

HTML专栏专栏收录该内容

15 篇文章 8 订阅

订阅专栏

电子日历的设计与实现

功能要求： 设计一款简单的电子日历，要求实现显示当天所在月份的全部日期，并且可以通过点击按钮控件切换月份。
实现效果图：
在这里插入图片描述

一、界面设计
1.使用<div>标签划分区域
1)状态栏，左右两边是上/下个月按钮，中间是当前的年份和月份；
2)日历最上面一行的星期名称，从周日到周六依次填入；
3)用于显示当前月份的所有日期的区域。

2.制作状态栏
1)使用<button>标签制作按钮;
2)继续使用<div>标签制作年份和月份的显示牌。

3.制作显示星期的横栏
1)该区域分为7个小区域，分别显示周一至周日的名称。
二、显示状态栏中年份和月份
1.计算当前月份的总天数
1)自定义函数count()

2.计算当前月份的第一天是星期几

    //获取本月第一天的日期对象
    var firstdate = new Date(year, month - 1, 1);
 
    //推算本月第一天是星期几
    var xiqi = firstdate.getDay();

3.月份的全部日期
1)自定义函数showDate()
三、按钮控件功能实现
1.往前翻月份的效果实现（上个月）
1）自定义函数lastMonth()

2.往后翻月份的效果实现（下个月）
1）自定义函数nextMonth()
四、完整代码

<html>
    <head>
        <title>简单电子日历的设计与实现</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/calendar.css">
  <script src="js/calendar.js"></script>
    </head>
    <body onload="showDate()">
        <h3>简单电子日历的设计与实现</h3>
        <hr />
        <div id="calendar">
        <!--状态栏-->
            <div>
       <!--显示上个月按钮-->
                <button onclick="lastMonth()">上个月</button>
                <!--显示当前年份和月份-->
    <div id="month"></div>
    <!--显示下个月按钮-->
                <button onclick="nextMonth()">下个月</button>
            </div>
            <!--显示星期几-->
           <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>
</body>
</html>

部分js代码

function count() {
    if (month != 2) {
        if ((month == 4) || (month == 6) || (month == 9) || (month == 11)) {
            allday = 30;
            //4、6、9、11月份为30天
        } else {
            allday = 31;
            //其他月份为31天（不包括2月份）
        }
    } else {
        //如果是2月份需要判断当前是否为闰年
        if (((year % 4) == 0 && (year % 100) != 0) || (year % 400) == 0) {
            allday = 29;
            //闰年的2月份是29天
        } else {
            allday = 28;
            //非闰年的2月份是28天
        }
    }
}

function showMonth() {
    var year_month = year + "年" + month + "月";
    document.getElementById("month").innerHTML = year_month;
}

备注：完整版请下载附件
https://download.csdn.net/download/YQEMMMM/12973209

YQEMMMM

关注

1
点赞
踩
24

收藏

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

电子日历的设计与实现功能要求：设计一款简单的电子日历，要求实现显示当天所在月份的全部日期，并且可以通过点击按钮控件切换月份。实现效果图：一、界面设计1.使用<div>标签划分区域1)状态栏，左右两边是上/下个月按钮，中间是当前的年份和月份；2)日历最上面一行的星期名称，从周日到周六依次填入；3)用于显示当前月份的所有日期的区域。2.制作状态栏1)使用<button>标签制作按钮;2)继续使用<div>标签制作年份和月份的显示牌。3.制作显示星期的
复制链接

扫一扫