<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'MyJsp.jsp' starting page</title>
<link href="common/css/date.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="common/js/jquery.js"></script>
<script type="text/javascript" src="common/js/date.js"></script>
<script>
$(document).ready(function (){
/** 获取当前的年份和月份 **/
var msg = getYearAndMonth();
if(msg.indexOf("/")!=-1){
var yearAndMonth = msg.split("/");
var year = yearAndMonth[0];
var monthTemp = yearAndMonth[1];
var month = monthTemp<10?("0"+monthTemp):monthTemp;
$("#year").html(year);
$("#month").html(month);
getDateListView(year,month);
}
})
/** 获取日期数据 **/
function getDateListView(year,month){
//加载日期数据中~
var loadContent = "<tr><td colspan='7' align='center'>"+
"<img src='common/images/loading.gif' /> 日期加载中,请稍后!</td></tr>";
$("#dateListView").html(loadContent);
var week = intfixDay(year, month, 01);
var days = accountDays(year, month);
var num = 0;//计数器
var loadContent = "<tr align='center'>";
//第一个星期不足的用空格代替
for(var i = 0;i < week; i ++){
loadContent += "<td></td>";
}
//第一个星期剩下的直接输出
for(var i = week;i < 7; i ++){
num ++;
var hoverName = "";
if(i==0 || i==6){
//周六周日突出显示
//hoverName = "tdView";
}
loadContent += "<td onMouseOver='over(this)' onMouseOut='out(this)' onClick='getDateDetails("+num+")' class='"+hoverName+"'>"+num+"</td>";
}
loadContent += "</tr>";
var lineSize = (days-num) % 7 == 0 ? (days-num)/7:(days-num)/7+1;
//判断有多少行显示出所有的日期
for(var x = 0;x < lineSize;x ++){
loadContent += "<tr align='center'>";
for(var j = 0;j < 7;j ++){
if(num >= days){
//剩余的有空格代替
loadContent += "<td></td>";
}else{
//显示出日期值
num ++;
var hoverName = "";
if(j==0 || j==6){
//周六周日突出显示
//hoverName = "tdView";
}
loadContent += "<td onMouseOver='over(this)' onMouseOut='out(this)' onClick='getDateDetails("+num+")' class='"+hoverName+"'>"+num+"</td>";
}
}
loadContent += "</tr>";
}
//加载日期数据到表格中显示出来
$("#dateListView").html(loadContent);
}
/** 获取前一个月的日期数据 **/
function getPreMonthDate(){
var year = $("#year").html();
var month = $("#month").html();
if(month*1-1<1){
month = 13;
year = year - 1;
$("#year").html(year);
}
month = month*1-1<10?"0"+(month*1-1):(month*1-1);
$("#month").html(month);
getDateListView(year,month);
}
/** 获取下一个月的日期数据 **/
function getNextMonthDate(){
var year = $("#year").html();
var month = $("#month").html();
if(month*1+1>12){
month = 0;
year = year*1 + 1;
$("#year").html(year);
}
month = (month*1+1)<10?"0"+(month*1+1):(month*1+1);
$("#month").html(month);
getDateListView(year,month);
}
/** 获取前一年的日期数据 **/
function getPreYearDate(){
var year = $("#year").html();
var month = $("#month").html();
year = year*1 - 1;
$("#year").html(year);
getDateListView(year,month);
}
/** 获取后一年的日期数据 **/
function getNextYearDate(){
var year = $("#year").html();
var month = $("#month").html();
year = year*1 + 1;
$("#year").html(year);
getDateListView(year,month);
}
/** 鼠标移放在日期上面 **/
function over(object){
$(object).addClass("tdHover");
}
/** 鼠标移开位置的时候 **/
function out(object){
$(object).removeClass("tdHover");
}
/** 获取具体的时间日期 **/
function getDateDetails(n){
var year = $("#year").html();
var month = $("#month").html();
alert(year+"-"+month+"-"+n);
}
</script>
</head>
<body>
<center><br><br>
<table class="table" cellspacing="0" cellpadding="5">
<tr class="tr" align="center">
<td><a href="javascript:getPreYearDate();" class="href"><<</a></td>
<td><a href="javascript:getPreMonthDate();" class="href"><</a></td>
<td align="center" colspan="3"><span id="year"></span> 年 <span id="month"></span> 月 </td>
<td><a href="javascript:getNextMonthDate();" class="href">></a></td>
<td><a href="javascript:getNextYearDate();" class="href">>></a></td>
</tr>
<tr align="center">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tbody id="dateListView"></tbody>
<tr class="tr" align="center">
<td colspan="7"><a href="javascript:this.close()" class="href">关 闭</a></td>
</tr>
</table>
</center>
</body>
</html>
/** 判断是否是闰(run)年 **/
function isLeap(year){
var b = false;
if((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)){
b = true;
}
return b;
}
/** 计算出某年某月某日是星期几 **/
function intfixDay(year,month,day){
if(month*1<10){
month = month.substring(1);
}
var z = 0;
var njs = isLeap(year)==true?2:1;//年基数
var yjs = getYJS(njs,month*1);
z =( year*1 + year / 4 + year / 100 - njs + yjs + day ) % 7;
return parseInt(z,0);
}
/** 获得月基数 **/
function getYJS(njs,month){
var n = 0 ;
//平年的时候,每个月对应的值
if(njs == 1){
switch (month) {
case 1:
n = 0;
break;
case 2:
n = 3;
break;
case 3:
n = 3;
break;
case 4:
n = 6;
break;
case 5:
n = 1;
break;
case 6:
n = 4;
break;
case 7:
n = 0;
break;
case 8:
n = 3;
break;
case 9:
n = 5;
break;
case 10:
n = 0;
break;
case 11:
n = 3;
break;
case 12:
n = 5;
break;
default:
break;
}
}else if(njs == 2){
//闰年的时候,每个月对应的值
switch (month) {
case 1:
n = 0;
break;
case 2:
n = 3;
break;
case 3:
n = 4;
break;
case 4:
n = 0;
break;
case 5:
n = 2;
break;
case 6:
n = 5;
break;
case 7:
n = 0;
break;
case 8:
n = 3;
break;
case 9:
n = 6;
break;
case 10:
n = 1;
break;
case 11:
n = 4;
break;
case 12:
n = 6;
break;
default:
break;
}
}
return n;
}
/** 获取一个月有多少天 **/
function accountDays(year,month) {
if(month*1<10){
month = month.substring(1)*1;
}
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
return 31;
case 2:
if(isLeap(year))
return 29;
else return 28;
default:
return 30;
}
}
/** 获取当前的年份和月份 **/
function getYearAndMonth(){
var date = new Date();
return date.getYear()+"/"+(date.getMonth()+1);
}
- 大小: 5.8 KB
分享到:
相关推荐
vue+elementUI简单的实现日历功能,供大家参考,具体内容如下 <div><el type=primary click=handlePrev><i class=el-icon-arrow-left></i>上一月</el></div> <div>{{ year }}年{{ month }}月{{ day }}日 ...
用Java写的一个简单的日历记事本,有良好的桌面效果,可以直接使用
一个Qt界面的农历日历库,支持 QSS (换肤功能)。 阳历 农历 阳历和农历节日(例如:中国节假日(一群闲得蛋疼的人搞出来的玩意),节气) 阳历和农历周年纪念日(例如:生日,结婚纪念日等) 在日历上显示用户自定义...
前几天看人家做一个单片机上的日历,功能很多,我是个菜鸟,就只能写一点,但多多练习吧,把它拿出来与大家共同学习。这个功能就一个,算法也简单,没有我想象得那么难,有空再把它加细,做功能全点
不同于前一部的日历记事本程序!java写的。
自己用VB写的小程序,未压缩296K,UPX压缩的话,可以小到46K,功能最少,只有日,月,时钟三个窗口,还一个定时关机功能,月窗口可以显示查万年农历 完全绿色,单文件,需要
最漂亮,兼容性最强的一款日历控件,以前的日历控件都...实用非常的简单,就是一个js 文件,css 和js 都写在一起,里面有非常详细的注释。js 里面写了,日历中常用的多个方法,实用起来非常的方便。可以成为js 的精华。
然后计算好后拼凑一下,这个是个好方法,会让界面很容易对齐,美观,并且可以实现小格子的很多效果,项目里碰到一个地方要添加日历,通过点击最近12个月的某一天返回当天的日期功能,本来想直接用网上的demo,但是看...
该设计要求设计一个带有日程提醒功能的日历。 通过该题目的设计,培养学生面向对象程序设计的思想,要求学生达到熟练掌握Java语言的基本知识和技能,基本掌握面向对象程序设计的基本思路和方法,能够利用所学的基本...
之前在网上想找一个简单易用的周日历选择插件,发现这种前端周日历插件很少,而且很多文章写的周的算法都不是统一的,所以自己实现了一个基于jquery的周日历插件(还支持跳转到指定年份和周哦)。 插件中周的算法:...
该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值 二、技术实现 java Swing 、面向对象 三、系统功能 年月日时间的切换,点击上月或下月直接改变月份 可以直接输入年份数字,...
之前看到本站给大家分享了一则C语言实现的简单日历,就手痒了,也想自己写一个,既然有简单了,那咱写个稍微复杂点的,多功能的吧。呵呵,玩笑玩笑
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试。最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理。自己也尝试...
其实现在我就是想要一个轻量级的日历组件,功能也不需要很强大,只要能兼容所有浏览器,能选择任意年份日期和星期就可以了。 好了,废话不多说,直接上代码: 好了,先引入jQuery库。(发表一下感概:angularJS的...
小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。 1. 微信web开发者工具:微信小程序官网这是个...
一款简单的小日历
这个日历应该是网页中常见的小功能了,这个也是window下的时间显示器,这篇文章,就来实现下这个效果的小程序版本,哈哈,求个赞~~~这个可以当做小程序学习的一个很好的实例啦,底部有下载链接,有需要的可以下载...
c++实验课上编写的代码,看看对你们有没有用!!!!
小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。 1. 微信web开发者工具:微信小程序官网 这是个...