自己写的一个很简单的日历功能

最新推荐文章于 2024-04-26 16:58:27 发布

lizhihui1987

最新推荐文章于 2024-04-26 16:58:27 发布

阅读量58

点赞数

文章标签： java javascript ViewUI

本文链接：https://blog.csdn.net/lizhihui1987/article/details/84171476

版权

<%@ 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' />&nbsp;&nbsp;日期加载中，请稍后!</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>&nbsp;年&nbsp;<span id="month"></span>&nbsp;月&nbsp;</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">关&nbsp;&nbsp;&nbsp;&nbsp;闭</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);
}

lizhihui1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写的一个很简单的日历功能

&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":&quot
复制链接

扫一扫