一个简单的日历实现
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 οnlοad="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" οnclick="prevYear()"></span>
<span class="calendar-title" id="calendarTitleYear">2018</span>
<span class="next" id="nextYear" οnclick="nextYear()"></span>
<span class="prev" id="prevMonth" οnclick="prevMonth()"></span>
<span class="calendar-title" id="calendarTitleMonth">4</span>
<span class="next" id="nextMonth" οnclick="nextMonth()"></span>
<input type="text" id="selectYear">年
<input type="text" id="selectMonth">月
<span id="go" οnclick="go()">Go</span>
</label>
<button id="backButton" οnclick="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;
}