HTML+CSS+JavaScript实现简单的日历功能（待改进）

最新推荐文章于 2022-02-15 09:58:49 发布

xiaoxiao_654

最新推荐文章于 2022-02-15 09:58:49 发布

阅读量362

点赞数 1

本文链接：https://blog.csdn.net/xiaoxiao_654/article/details/115711114

版权

关键词由CSDN通过智能技术生成

HTML代码实现如下

<!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>电子日历</title>
    <link rel="stylesheet" href="calendar.css">
    <script src="calendar.js"></script>
</head>

<body onload="showDate()">
    <div class="box">
        <div>
            <button class="pre" onclick="pre()"><span class="left"></span></button>
            <div class="month_year">
                <h1 id="month">month</h1>
                <h4 id="year">year</h4>
            </div>
            <button class="next" onclick="next()"><span class="right"></span></button>
        </div>
        <div>
            <div class="weekday">Sun</div>
            <div class="weekday">Mon</div>
            <div class="weekday">Tue</div>
            <div class="weekday">Wed</div>
            <div class="weekday">Thu</div>
            <div class="weekday">Fri</div>
            <div class="weekday">Sat</div>
        </div>
        <div id="day"></div>
    </div>

</body>

</html>

CSS代码实现如下

* {
    margin: 0;
    padding: 0;
}

div {
    text-align: center;
    margin: 0 auto;
}

h1,
h4 {
    color: greenyellow;
}

.box {
    height: 40px;
    width: 400px;
    margin: 40px auto 0 auto;
}

button {
    position: relative;
    width: 10%;
    float: left;
    height: 40px;
    margin-top: 25px;
    background-color: #fff;
    border: none;
}

.left{
    position: absolute;
    left: -10px;
    top: -1px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 20px solid transparent;
    border-right-color: green;
}

.right {
    position: absolute;
    left: 10px;
    top: -1px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 20px solid transparent;
    border-left-color: green;
}

.month_year {
    width: 80%;
    float: left;
    height: 40px;
    line-height: 40px;
}

.weekday {
    width: 57px;
    height: 40px;
    line-height: 40px;
    float: left;
    margin-top: 10px;
}

Javascript代码实现如下

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
var monthday = 0;
var allMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

function monthdays() {
    if (month != 2) {
        if (month == 4 || month == 6 || month == 9 || month == 11) {
            monthday = 30;
        }
        else {
            monthday = 31;
        }
    }
    else {
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            monthday = 29;
        }
        else {
            monthday = 28;
        }
    }
}

function showMonth() {
    document.getElementById("month").innerHTML = allMonth[month - 1];
}
function showYear() {
    document.getElementById("year").innerHTML = year;
}
function showDate() {
    showMonth();
    showYear();
    monthdays();
    var myStyle;
    var firstdate = new Date(year, month - 1, 1);
    var firstday = firstdate.getDay();
    var daterow = document.getElementById("day");
    daterow.innerHTML = '';
    if (firstday != 0) {
        for (var i = 0; i < firstday; i++) {
            var dayElement = document.createElement("div");
            dayElement.className = "weekday";
            daterow.appendChild(dayElement);
        }
    }
    for (var j = 1; j <= monthday; j++) {
        var dayElement = document.createElement("div");
        dayElement.className = "weekday";
        dayElement.innerHTML = j + "";
        if (j < date && year == today.getFullYear() && month == today.getMonth() + 1 || year < today.getFullYear() || year == today.getFullYear() && month < today.getMonth() + 1) {
            dayElement.style.color = 'lightgrey';
        }
        else if (j == date && month == today.getMonth() + 1 && year == today.getFullYear()) {
            dayElement.style.color = 'green';
            dayElement.style.backgroundColor = '#b3dd98'
        }
        else {
            dayElement.style.color = '#565656';
        }
        daterow.appendChild(dayElement);
    }
}

function pre() {
    if (month > 1) {
        month -= 1;
    }
    else {
        month = 12;
        year -= 1;
    }
    showDate();
}

function next() {
    if (month < 12) {
        month += 1;
    }
    else {
        month = 1;
        year += 1;
    }
    showDate();
}

最终的实现效果：

在这里插入图片描述

xiaoxiao_654

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript实现简单的日历功能（待改进）

HTML代码实现如下<!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"> <
复制链接

扫一扫