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();
}
最终的实现效果: