<%@ 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-datepicker-master"项目提供了一个基于Vue.js的简单日历组件示例，展示了如何利用Vue的组件化思想和数据驱动特性来构建交互式的用户界面。通过学习这个项目，开发者可以加深对Vue.js的理解，并进一步提升...
【标题】：“自己写的一个简单的jquery 日期插件” 这篇博客是作者分享的关于自己创建的一个基于jQuery的简单日期插件。在JavaScript编程中，日期处理是一个常见的需求，尤其是在网页应用中，用户可能需要选择日期...
vue+elementUI简单的实现日历功能，供大家参考，具体内容如下 <div><el type=primary click=handlePrev><i class=el-icon-arrow-left></i>上一月</el></div> <div>{{ year }}年{{ month }}月{{ day }}日 ...
本文档展示了一个基于ASP的简单日历程序实现方法。通过对ASP的基础语法、变量处理、条件判断、用户输入处理等方面进行了介绍，同时也展示了如何利用HTML和CSS来美化页面布局。通过阅读这个例子，读者可以了解到如何...
对于学习Java的初学者来说，这是一个很好的实践项目，可以帮助他们巩固基础知识，同时提升实际开发技能。而对于已经有一定经验的开发者，这样的应用也提供了了解和实践JavaFX或Swing GUI设计的机会。
在C++编程中，创建一个简单的日历程序涉及到多个核心概念和函数的使用。下面将详细解释这个项目中涉及的主要知识点： 1. **输入/输出流（I/O Stream）**： C++中的输入/输出流是通过`iostream`库实现的，包括`cin`...
3. **日期和时间处理**：实现日历功能需要对日期和时间进行操作。Java提供`java.util.Calendar`类和`java.time`包（Java 8及以上版本）来处理日期和时间。开发人员可能使用这些API来显示当前日期、月份和年份，并...
标题中的“在.NET 2005 下用C# 写成一个小日历应用程序”指的是一个使用C#编程语言在Microsoft的.NET Framework 2005开发环境中创建的日历应用程序。这个项目的主要目的是提供一个简单易用的日历界面，同时也是一个...
用户可以通过解压并编译源代码来查看和理解程序的工作原理，这对于学习C++和日期处理的开发者来说是一个很好的实践案例。 总的来说，这个电子日历程序展示了如何使用C++和Visual C++工具集来创建一个用户界面，并...
总的来说，这个自定义日历系统结合了多种Android开发技术，涵盖了用户界面设计、数据管理、事件处理等多个方面，对于学习Android开发的开发者来说，是一个很好的实践项目。通过这个项目，你可以深入了解Android开发...
本项目是利用C语言实现的一个简单的日历程序，对于初学者来说，这是一个很好的学习实践案例。通过这个程序，我们可以了解C语言如何处理日期和时间，以及如何在控制台上打印出美观的日历。 【描述】：“这个简易日历...
在iOS平台上，与日历事件相关的开发涉及到苹果的EventKit框架，这个框架允许开发者读取、创建、修改和删除...通过研究和使用这个SDK，开发者能够快速集成日历功能到自己的iOS应用中，为用户提供更丰富的日程管理体验。
在Java编程语言中，创建一个简单的日历程序可以涉及到日期和时间处理，这是Java核心库中的重要部分。本文将深入探讨如何使用Java实现一个基本的日历应用，主要关注`java.util.Calendar`类以及相关的API。 首先，让...
【描述】：“一个用jsp写的日历” 这个描述简单地提到了一个基于JSP技术实现的日历应用。JSP（JavaServer Pages）是Java平台上的一种动态网页技术，允许开发人员将HTML、CSS、JavaScript与Java代码混合在一起，以...
总结来说，这个项目是一个使用Java编程语言构建的控制台应用程序，它实现了日历功能，可能包括显示当前月份的日期，并可能允许用户导航到其他月份。开发过程中，开发者会运用Java的时间和日期API，以及控制台输出和...
使用TypeScript的Jest或Mocha等测试框架，编写单元测试和集成测试，确保日历功能的正确性。测试应覆盖所有核心功能，包括年份范围设定、待办事项的显示和操作等。 在实际项目中，你可能会使用诸如React或Vue这样的...
对于初学者来说，这是一个很好的起点，能够学习到如何通过编程实现用户界面，并理解事件监听器、模型-视图-控制器（MVC）设计模式等关键概念。 标签"日历空间"可能指的是这个控件提供了展示一整个月或者更长时间...
在本教程中，我们将一起学习如何创建一个极简版的微信小程序日历组件。...无论你是初学者还是有一定经验的开发者，这个项目都将是一个很好的学习和锻炼机会。在实践中遇到任何问题，记得欢迎提出，让我们共同进步。
这个项目对于初学者来说，是一个很好的汇编语言实践机会。通过编写这样的程序，可以深入了解计算机如何处理日期和时间，同时提升汇编语言的编写技能。对于更高级的开发者，这样的项目可以作为一个起点，进一步优化和...