<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子日历</title>
<style type="text/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;
height: 40px;
margin-top: 0;
margin-bottom: 0;
}
.everyday{
width: 14%;
float: left;
}
</style>
</head>
<body οnlοad="showDate()">
<h1>简单电子日历</h1>
<hr/>
<div id="calendar">
<div>
<button οnclick="lastMonth()">上个月</button>
<div id="month"></div>
<button οnclick="nextMonth()">下个月</button>
</div>
<div>
<div class="eyeryday">日</div>
<div class="eyeryday">一</div>
<div class="eyeryday">二</div>
<div class="eyeryday">三</div>
<div class="eyeryday">四</div>
<div class="eyeryday">五</div>
<div class="eyeryday">六</div>
</div>
<div id="day"></div>
</div>
<script type="text/javascript">
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;
}
else{
allday = 31;
}
}
else{
if ((year%4)==0 && (year%400)==0){
allday = 29;
}
else{
allday = 28;
}
}
}
function showMonth(){
var year_month=year+"年"+month+"月";
document.getElementById("month").innerHTML=year_month;
}
function showDate(){
showMonth();
count();
var firstdate = new Data(year,month-1,1);
var xiqi = firstdate.getDay();
var daterow = document.getElementById("div");
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 = month-1;
}
else{
month=12;
year = year-1;
}
showDate();
}
function nextMonth(){
if (month<12){
month = month+1;
}
else{
month=1;
year = year+1;
}
showDate();
}
</script>
</body>
</html>