html+css+js设计电子日历

最新推荐文章于 2024-02-19 08:57:52 发布

刘家奕_

最新推荐文章于 2024-02-19 08:57:52 发布

阅读量680

点赞数 1

分类专栏： Web 文章标签： javascript html5 css

本文链接：https://blog.csdn.net/m0_62387059/article/details/124306653

版权

Web 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE html>
<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>

css:

div{
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}

#calendar{
	width: 400px;
	margin:auto;
}

button{
	width: 25%;
	float:left;
	height:40px;
}

#month{
    width: 50%;
	float:left;
}

.everyday{
	width: 14%;
	float:left;
}

js:

var today = new Date();
var year = today.getFullYear();
//获取当前年份
var month = today.getMonth() + 1;
//获取当前月份
var day = today.getDate();
//获取当前日期
var allday = 0;
//当前月份的总天数

//用于推算当前的月份一共多少天
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;
}

//显示当前月份的日历
function showDate() { 
    showMonth();//在年份月份显示牌上显示当前的年月
    count();//计算当前月份的总天数

    //获取本月第一天的日期对象
    var firstdate = new Date(year, month - 1, 1);

    //推算本月第一天是星期几
    var xiqi = firstdate.getDay();

    //动态添加HTML元素
    var daterow = document.getElementById("day");
    daterow.innerHTML = "";

    //如果本月第一天不是周日，则前面需要用空白元素补全日期
    if (xiqi != 0) {
        for (var i = 0; i < xiqi; i++) {
            var dayElement = document.createElement("div");
            dayElement.className = "everyday";
            daterow.appendChild(dayElement);
        }
    }

    //使用循环语句将当前月份的所有日期显示出来
    for (var j = 1; j <= allday; j++) {
        var dayElement = document.createElement("div");
        dayElement.className = "everyday";
        dayElement.innerHTML = j + "";

        //如果日期为今天，将内容显示为红色
        if (j == day) {
            dayElement.style.color = "red";
        }

        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();
}

刘家奕_

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css+js设计电子日历

HTML：<!DOCTYPE html><html> <head> <title>简单电子日历的设计与实现</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/calendar.css"> <script src="js/calendar.js"></script> &lt.
复制链接

扫一扫