<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JCalendar 日历控件</title>
<style type="text/css">
#calendar_contain {
width:165px;
height:125px;
}
#calendar {
border-collapse:collapse;
border:1px solid #06C;
background-color:#FFF;
width:160px;
height:120px;
font-size:12px;
font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
cursor:default;
}
#calendar td {
text-align:center;
vertical-align:middle;
font-family:"宋体";
}
#calendar thead {
background-color:#06C;
color:#FFF;
}
#calendar div {
width:100%;
height:100%;
}
#calendar caption span {
cursor:pointer;
}
#calendar #calendar_title {
cursor:default;
}
</style>
<script type="text/javascript">
var conf='confname1';
function monthshow(month){
return (month-1)
}
function changeit(selObj){
conf=selObj.options[selObj.selectedIndex].value;
}
var lasterday=new Date(2010,monthshow(12),1);//配置最早的按日分析日期是2010.12.2
</script>
<script src="./today.js" type="text/javascript"></script>
<script type="text/javascript">
function showDay(year,month,date){ tmpday=new Date(year,monthshow(month),date);
if (( tmpday > lasterday ) && (servertoday > tmpday )){
url="/cgi-bin/awstats.pl?databasebreak=day&config="+conf+"&year="+year+"&month="+month+"&day="+date; //这里定义链接导航的具体地址，请按需要修改
top.showall.location.href=url;
}else {
alert("日志没有分析");
}
}
/***************************
*JCalendar日历控件
*@author brull
*@email [email]brull@163.com[/email]
*@date 2007-4-16
***************************/
/*
*@param year 年份
*@param month 月份
*@param date 日期
*/
/*如果参数不足三个那么就初始化为当天日期*/
function JCalendar (year,month,date) {
var _date = arguments.length == 0 ? new Date() : new Date(year,month-1,date);
//实例变量
this.year = _date.getFullYear();
this.month = _date.getMonth() + 1;
this.fday = new Date(this.year,this.month-1,1).getDay();//每月第一天的前一天星期数
this.dayNum = new Date(this.year,this.month,0).getDate();//每月的天数
//成员变量，当前年月日
JCalendar.cur_year = this.year;
JCalendar.cur_month = this.month;
JCalendar.cur_date = _date.getDate();
}
JCalendar.prototype.show = function(){
var date = new Array(this.fday);//预先定义一段空数组，对应日历里第一周空的位置
var html_str = new Array();
var date_index = 0;
var weekDay = ["日","一","二","三","四","五","六"];
for(var j = 1; j <= this.dayNum; j++){//初始化date数组
date.push(j);
}
html_str.push("");
html_str.push("this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-12);return false\" style='color:#09F;font-size:16px;margin-right:5px;'>«this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-1);return false\" style='margin-right:15px;color:#09F;'>▲" + this.year + "年" + this.month + "月JCalendar.update(1);return false\" onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='margin-left:15px;color:#09F;'>▼JCalendar.update(12);return false\" onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='font-size:16px;margin-left:5px;color:#09F;'>»");
html_str.push("");
for(var i = 0; i < 7; i++){//填充日历头
html_str.push("" + weekDay[i] + " | ");
}
html_str.push(" ");
html_str.push("");
for(var i = 0; i < 6; i++){//填充日期
html_str.push("");
for(var j = 0; j < 7; j++){
tmp = date[date_index++];
tmp = tmp ? tmp : "";
if(JCalendar.cur_date == tmp)
html_str.push("" + JCalendar.cur_date + " | ");
else if(tmp == "")
html_str.push(" | ");
else
html_str.push("this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + tmp + " | ");
}
html_str.push(" ");
}
html_str.push(" ");
return html_str.join("");
}
//静态方法
JCalendar.update = function(_month){
var date = new Date(JCalendar.cur_year,JCalendar.cur_month - 1 + _month,1);
var fday = date.getDay();//每月第一天的星期数
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dayNum = new Date(JCalendar.cur_year,JCalendar.cur_month + _month,0).getDate();//每月的天数
var tds = document.getElementById("calendar").getElementsByTagName("td");
for(var i = 7; i < tds.length; i++)//清空日历内容
tds[i].innerHTML = "";
document.getElementById("calendar_title").innerHTML = year + "年" + month + "月";//更新显示年月
//更新当前年月
JCalendar.cur_year = year;
JCalendar.cur_month = month;
for(var j = 1; j <= dayNum; j++){
if(j == JCalendar.cur_date)
tds[6 + fday + j].innerHTML = "" + JCalendar.cur_date + "";
else
tds[6 + fday + j].innerHTML = "this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + j + " ";
}
JCalendar.onupdate(year,month,JCalendar.cur_date);
}
JCalendar.onupdate = function(year,month,date){//日历更改时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
return showDay(year,month,date);
}
JCalendar.click = function(obj){
var tmp = document.getElementById("c_today");
tmp.parentNode.innerHTML = "this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + tmp.innerHTML + " ";
JCalendar.cur_date = parseInt(obj.innerHTML);
obj.parentNode.innerHTML = "" + obj.innerHTML + "";
JCalendar.onclick(JCalendar.cur_year,JCalendar.cur_month,JCalendar.cur_date);
}
JCalendar.onclick = function(year,month,date){//点击日期时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
return showDay(year,month,date);
}</script>
</head>
<body>
<h4>按日分析</h4>
<p>请选择服务器:
<select id="selc" name="selc" onchange="changeit(this)">
<option value="confname1">XXXX1-ip1</option>
<option value="confname2">XXXX2-ip2</option>
<option value="confname3">XXXX3-ip3</option>
<option value="confname4">XXXX4-ip4</option>
</select>
</p>
<p>请选择日期:
</p>
<div id="calendar_contain"></div>
<p><br/><a target="_top" href="./index.html">观看其他日志分析</a></p>
<script type="text/javascript">
/***************说明***************
JCalendar.onclick (year,month,date)//点击日期时执行的静态函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期
JCalendar.onupdate (year,month,date){//日历更改时执行的函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期
***********************************/
//一个例子
/*
JCalendar.onclick = function (year,month,date){
tmpday=Date(year,month,date);
if ( (tmpday-lasterday > 0) && (servertoday-tmpday < 0)){
alert("today is:" + year + "-" + month + "-" + date);
}
}
//*/
document.getElementById("calendar_contain").innerHTML = new JCalendar().show();
</script>
</body>
</html>
|
