简单电子日历的设计与实现

HTML代码

<!DOCTYPE html>
<html>
<head><title>简单电子日历的设计与实现</title><meta charset="utf-8"><link rel="stylesheet" href="css/calendar.css"><script src="calendar.js"></script>
</head>
<body onload="showDate()"><h3>简单电子日历的设计与实现</h3><hr /><div id="calendar"><!--状态栏--><div><!--显示上个月按钮--><button onclick="lastMonth()">上个月</button><!--显示当前年份和月份--><div id="month"></div><!--显示下个月按钮--><button onclick="nextMonth()">下个月</button></div><!--显示星期几--><div><div class="everyday">日</div><div class="everyday">一</div><div class="everyday">二</div><div class="everyday">三</div><div class="everyday">四</div><div class="everyday">五</div><div class="everyday">六</div></div><!--显示当前月份每天的日期--><div id="day"></div></div>
</body>
</html>

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;
}.everyday{width: 14%;float: left;
}

js代码

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;//4，6，9，11月份为30天} else {allday = 31;//其他月份为31天 （不包括2月份）}} else {//如果时2月份需要判断当前是否为闰年if(((year % 4) == 0 && (year % 100) != 0) || (year % 400) == 0) {allday = 29;//闰年的月份时29天} else {allday = 28;//非闰年的2月份是28天}}
}//显示日历标题中的当前年份和月份
function showMonth() {var year_month = year +"年" + month + "月";document.getElementById("month").innerHTML = year_month;
}//显示当前月份的日历
function showDate() {showMonth();//在年份月份显示牌上显示当前的年月count();//计算当前月份的总天数//获取本月第一天的日期对象var firstdate = new Date(year, month - 1, 1);//推算本月第一天是星期几var xiqi = firstdate.getDay();//动态添加HTML元素var daterow = document.getElementById("day");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 -= 1;} else {month = 12;year -= 1;}showDate();
}//显示下个月的日历
function nextMonth () {if (month < 12) {month += 1;} else {month = 1;year += 1;}showDate();
}

简单电子日历的设计与实现相关推荐

HTML简单电子日历的设计与实现
** 效果图: ** 源码: 文字版: 简单电子日历
电子日历的设计与实现
电子日历的设计与实现功能要求: 设计一款简单的电子日历,要求实现显示当天所在月份的全部日期,并且可以通过点击按钮控件切换月份. 实现效果图: 一.界面设计 1.使用<div>标签划分区域 ...
简单的电子日历的设计与实现 web前端开发 css JavaScript HTML5
代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
JS项目—电子日历的设计与实现
第一章 JavaScript基础项目 1.2 电子日历的设计与实现功能实现:设计一款简单的电子日历,可以实现显示当天所在月份的全部日期,并且可以通过单击按钮控件切换月份的功能. 设计思路:主要分为三 ...
MSP430G2553 launchpad 口袋板口袋实验平台数字电子日历时钟设计秒表闹钟整点报时万年历电子时钟
题10 数字电子日历/时钟设计设计一个基于MSP430的电子日历和时钟. 基本要求 (1)可通过按键在日历和时间之间切换显示: (2)可由按键调整日期和时间 (3)可整点报时('铆.嘟"声 ...
C51数字电子日历/时钟设计
题目要求: 数字电子日历/时钟设计设计一个基于MCS51的电子日历和时钟. 基本要求 (1) 可通过按键在日历和时间之间切换显示: (2) 可由按键调整日期和时间 (3) 可整点报时("嘟 ...
可调式电子日历的设计
1.概述 1.1 课题背景单片机运用在各种智能设备当中,比如平衡车.扫地机器人等.设备智能化是一个必然的趋势,而要实现设备智能化离不开单片机的支持,所以学习单片机是每一位自动化学子的必修之路.之前虽 ...
html+css+js设计电子日历
HTML: <!DOCTYPE html> <html><head><title>简单电子日历的设计与实现</title><meta ...
简单的电子日历 HTML5 JavaScript css
代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

简单电子日历的设计与实现

简单电子日历的设计与实现

简单电子日历的设计与实现相关推荐

最新文章

热门文章