简单日历的实现

一个简单的日历实现

html

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SimpleCalendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/calendar.css">
</head>
<body onload="load()">
    <div class="container">
        <h1>SimpleCalendar<h1>
        <table class="table table-bordered table-hover text-center">
            <label id="date1"></label>
            <label id="select">
                <span class="prev" id="prevYear" onclick="prevYear()"></span>
                <span class="calendar-title" id="calendarTitleYear">2018</span>
                <span class="next" id="nextYear" onclick="nextYear()"></span>
                <span class="prev" id="prevMonth" onclick="prevMonth()"></span>
                <span class="calendar-title" id="calendarTitleMonth">4</span>
                <span class="next" id="nextMonth" onclick="nextMonth()"></span>
                <input type="text" id="selectYear">年
                <input type="text" id="selectMonth">月
                <span id="go" onclick="go()">Go</span>
            </label>
            <button id="backButton" onclick="back()">Back</button>
            <thead id="week">
                <tr>
                    <th>Sunday</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                    <th>Saturday</th>
                </tr>
            </thead>
            <tbody id="calendarData">
        </table>
    </div>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/calendar.js"></script>
</body>
</html>

js代码

var dateObj = new Date();
var year = dateObj.getFullYear();
var month = dateObj.getMonth() + 1;
var date = dateObj.getDate();

function load() {
    getTime();
    calendarTable(year, month, date);
}

function calendarTable(year, month, date) {
    var row = "";
    var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var dateObj = new Date(year, month - 1 , 1);
    var weekday = dateObj.getDay();

    if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
        months[1] = 29;
    }

    row = row + "<tr>";

    if (month - 2 >= 0) {
        var preMonthDay = months[month - 2] - weekday + 1;
    } else {
        var preMonthDay = months[0] - weekday + 1;
    }

    for (var i = 0 ; i < weekday ; i++) {
        row = row + "<th class='preMonthDay'>";
        row = row + preMonthDay++;
        row = row + "</th>";
    }

    var dateObj1 = new Date();
    var day = 1;
    var rows = 1;

    for (var i = weekday + 1 ; i <= months[month - 1] + weekday ; i++) {

        if (i % 7 != 0) {
            if (year == dateObj1.getFullYear() && (month == dateObj1.getMonth() + 1) && (day == dateObj1.getDate())) {
                row = row + "<th class='today'>";
            } else {
                row = row + "<th class='notToday'>";
            }

            row = row + day++;
            row = row + "</th>";
        } else {
            if (year == dateObj1.getFullYear() && (month == dateObj1.getMonth() + 1) && (day == dateObj1.getDate())) {
                row = row + "<th class='today'>";
            } else {
                row = row + "<th class='notToday'>";
            }

            row = row + day++;
            row = row + "</th>";
            row = row + "</tr>";
            rows++;
        }
    }

    if ((months[month - 1] + weekday) % 7 == 0) {
        rows = rows - 1;
    }

    var nextMonthDay = 1;
    for (var i = 0 ; i < rows * 7 - months[month - 1] - weekday ; i++) {
        row = row + "<th class='preMonthDay'>";
        row = row + nextMonthDay++;
        row = row + "</th>";
    }

    row = row + "</tr>";
    $("#calendarData").html(row);
}

function prevYear() {
    year = year - 1;

    if (year < 1970) {
        year = 1970;
    }

    $("#calendarTitleYear").html(year);
    calendarTable(year, month, date);
}

function nextYear() {
    year = year + 1;

    if (year > 2200) {
        year = 2200;
    }

    $("#calendarTitleYear").html(year);
    calendarTable(year, month, date);
}

function prevMonth() {
    month = month - 1;

    if (month < 1) {
        month = 1;
    }

    $("#calendarTitleMonth").html(month);
    calendarTable(year, month, date);
}

function nextMonth() {
    month = month + 1;

    if (month > 12) {
        month = 12;
    }

    $("#calendarTitleMonth").html(month);
    calendarTable(year, month, date);
}

function back() {
    year = dateObj.getFullYear();
    month = dateObj.getMonth() + 1;
    date = dateObj.getDate();
    $("#calendarTitleYear").html(year);
    $("#calendarTitleMonth").html(month);
    calendarTable(year, month, date);
}

function go() {
    year = $('#selectYear').val();
    month = $('#selectMonth').val();

    if (year == "" || isNaN(year)) {
        year = dateObj.getFullYear();
    }

    if (month == "" || isNaN(month)) {
        month = dateObj.getMonth() + 1;
    }

    if (year < 1970) {
        year = 1970;
    }

    if (year > 2200) {
        year = 2200;
    }

    if (month > 12) {
        month = 12;
    }

    if (month < 1) {
        month = 1;
    }

    $("#calendarTitleYear").html(year);
    $("#calendarTitleMonth").html(month);
    calendarTable(year, month, date);
}

function getTime() {
    var dateObj = new Date();
    var year = dateObj.getFullYear();
    var month = dateObj.getMonth() + 1;
    var date = dateObj.getDate();
    var day = dateObj.getDay();
    var weeks = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var week = weeks[day];
    var hours = dateObj.getHours();
    var minutes = dateObj.getMinutes();
    var seconds = dateObj.getSeconds();

    if(month < 10){
        month = "0" + month;
    }

    if(date < 10){
        date = "0" + date;
    }

    if(hours < 10){
        hours = "0" + hours;
    }

    if(minutes < 10){
        minutes = "0" + minutes;
    }

    if(seconds < 10){
        seconds = "0" + seconds;
    }

    var newDate = year + "-" + month + "-" + date + "   " + hours + ":" + minutes + ":" + seconds + "   " + week;
    document.getElementById("date1").innerHTML = "Current Time：" + newDate;
    setTimeout('getTime()', 500);
}

css

#date1 {
    font-size: 20px;
    width: 500px;
}

#backButton {
    width: 100px;
    height: 30px;
    position: relative;
    left: 71px;
    font-size: 25;
    border: 1px solid;
    background-color: #999;
    bottom: 2px;
    border-radius: 5px;
}

#select {
    position: relative;
}

.prev {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left: 0px;
    border-top: 10px solid transparent;
    border-right: 25px solid #999;
    border-bottom: 10px solid transparent;
    cursor: pointer;
}

.next {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-right: 0px;
    border-top: 10px solid transparent;
    border-left: 25px solid #999;
    border-bottom: 10px solid transparent;
    cursor: pointer;
}

.preMonthDay {
    text-align: center;
}

.today {
    background-color: rgb(35, 36, 36);
    text-align: center;
    color: white;
}

.notToday {
    background-color: #999;
    text-align: center;
}

#week tr th{
    text-align: center;
}

#selectYear {
    width: 50px;
    height: 30px;
    font-size: 14px;
    position: relative;
    bottom: 6px;
}

#selectMonth {
    width: 30px;
    height: 30px;
    font-size: 14px;
    position: relative;
    bottom: 6px;
}

#go {
    position: relative;
    font-size: 25;
    border: 1px solid;
    background-color: #999;
    bottom: 2px;
    border-radius: 5px;
}

猜你喜欢