非常不错的日期选择风格

心若水寒

UID: 4
帖子: 936
积分: 1710
在线时间: 2168小时
注册时间: 2006-05-17
最后登录: 2015-07-08

1^# 心若水寒发表于2006-11-27

非常不错的日期选择风格

提示：您可以先修改部分代码再运行

<html> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>php爱好者[url]www.phpfans.net|---[/url]非常不错的日期选择风格</title> 
</head> 
 
<body> 
 
<style type="text/css"> 
.body,td{ 
font-family:"Arial"; 
font-size:8pt; 
color:#000000; 
} 
.TrOut{ 
background:#dddddd; 
height:24; 
border:1 solid #999999; 
border-top-color:#f4f4f4; 
border-left-color:#f4f4f4; 
} 
.TdOver{ 
background:#eeeeee; 
height:20; 
border:1 solid #ffffff; 
border-top-color:#9c9c9c; 
border-left-color:#9c9c9c; 
} 
.TdOut{ 
background:#eeeeee; 
height:20; 
border:1 solid #9c9c9c; 
border-top-color:#ffffff; 
border-left-color:#ffffff; 
} 
</style> 
<script language="JScript"> 
function TableFunction(){ 
        this.GetDataStr=function(y,m){ 
                this.DayArray=[]; 
                for(var i=0;i<42;i++)this.DayArray[i]=" "; 
                for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1; 
                return this.DayArray; 
                } 
        this.GetTableStr=function(y,m){ 
                this.DateArray=["日","一","二","三","四","五","六"]; 
                this.DStr="<table oncontextmenu='return false' onselectstart='return false' style='width:160;cursor:default;border:1 solid #9c9c9c;border-right:0;border-bottom:0;filter:progid:dximagetransform.microsoft.dropshadow(color=#e3e3e3,offx=3,offy=3,positive=true)' border='0' cellpadding='0' cellspacing='0'>\n"+ 
                "<tr><td colspan='7' class='TrOut'>"+ 
                "<table width='100%' height='100%'border='0' cellpadding='0' cellspacing='0'><tr align='center'>\n"+ 
                "<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"b\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>3</td>\n"+ 
                "<td id='YearTD' width='70' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"y\",false)'>"+y+" 年</td>\n"+ 
                "<td id='MonthTD' width='47' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"m\",false)'>"+m+" 月</td>\n"+ 
                "<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"n\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>4</td></tr></table>\n"+ 
                "</td></tr>\n"+ 
                "<tr align='center'>\n"; 
                for(var i=0;i<7;i++) 
                this.DStr+="<td class='TrOut'>"+DateArray[i]+"</td>\n"; 
                this.DStr+="</tr>\n"; 
                for(var i=0;i<6;i++){ 
                this.DStr+="<tr align='center'>\n"; 
                for(var j=0;j<7;j++){ 
                        var CS=new Date().getDate()==this.GetDataStr(y,m)[i*7+j]?"TdOver":"TdOut"; 
                        this.DStr+="<td id='TD' class='"+CS+"' cs='"+CS+"' onmouseover='this.className=\"TdOver\"' onmouseout='if(this.cs!=\"TdOver\")this.className=\"TdOut\"'>"+this.GetDataStr(y,m)[i*7+j]+"</td>\n"; 
                        } 
                this.DStr+="</tr>\n"; 
                } 
                this.DStr+="</tabe>"; 
                return this.DStr; 
                } 
        this.WriteSelect=function(obj,values,action,getobj){ 
                if(values=="")return; 
                if(getobj){ 
                        obj.innerHTML=values+(action=="y"?" 年":" 月"); 
                        this.RewriteTableStr(YearTD.innerText.split(" ")[0],MonthTD.innerText.split(" ")[0]); 
                        return false; 
                        } 
                var StrArray=[]; 
                if(action=="y"){ 
                        for(var i=0;i<15;i++){ 
                                var year=values-7+i; 
                                StrArray[i]="<option value='"+year+"' "+(values==year?"selected":"")+"> "+year+"年</option>\n"; 
                                } 
                        obj.innerHTML="<select id='select1' onchange='TableFunction().WriteSelect(parentElement,this.value,\"y\",true)' onblur='YearTD.innerText=this.value+\" 年\"'>\n"+StrArray.join("")+"</select>"; 
                        select1.focus(); 
                        } 
                if(action=="m"){ 
                        for(var i=1;i<13;i++) 
                                StrArray[i]="<option value='"+i+"' "+(i==values?"selected":"")+"> "+i+"月</option>\n"; 
                        obj.innerHTML="<select id='select2' style='width:47' onchange='TableFunction().WriteSelect(parentElement,this.value,\"m\",true)' onblur='MonthTD.innerText=this.value+\" 月\"'>\n"+StrArray.join("")+"</select>"; 
                        select2.focus(); 
                        } 
                } 
        this.RewriteTableStr=function(y,m){ 
                var TArray=this.GetDataStr(y,m); 
                for(var i=0;i<TArray.length;i++){ 
                        TD[i].innerHTML=TArray[i]; 
                        TD[i].className="TdOut"; 
                        TD[i].cs="TdOut"; 
                        if(new Date().getYear()==y&&new Date().getMonth()+1==m&&TArray[i]==new Date().getDate()){ 
                                TD[i].className="TdOver"; 
                                TD[i].cs="TdOver"; 
                                } 
                        } 
                } 
        this.JumpToRun=function(action){ 
                var YearNO=YearTD.innerText.split(' ')[0]; 
                var MonthNO=MonthTD.innerText.split(' ')[0]; 
                if(action=="b"){ 
                        if(MonthNO=="1"){ 
                                MonthNO=13; 
                                YearNO=YearNO-1; 
                                } 
                        MonthTD.innerText=MonthNO-1+" 月"; 
                        YearTD.innerText=YearNO+" 年"; 
                        this.RewriteTableStr(YearNO,MonthNO-1); 
                        } 
                if(action=="n"){ 
                        if(MonthNO=="12"){ 
                                MonthNO=0; 
                                YearNO=YearNO-(-1); 
                                } 
                        YearTD.innerText=YearNO+" 年"; 
                        MonthTD.innerText=MonthNO-(-1)+" 月"; 
                        this.RewriteTableStr(YearNO,MonthNO-(-1)); 
                        } 
                } 
        return this; 
        } 
document.write(TableFunction().GetTableStr(new Date().getYear(),new Date().getMonth()+1)); 
</script> 
 
</body> 
 
</html>

提示：您可以先修改部分代码再运行

毕业了。。。

goldwang

UID: 3270
帖子: 7
积分: 7
在线时间: 1小时
注册时间: 2006-11-28
最后登录: 2006-11-30

2^# goldwang 发表于2006-11-29

真的很不错，研究研究。

程序人生，不断学习的人生！

liyun

UID: 7876
帖子: 4
积分: 5
在线时间: 1小时
注册时间: 2007-01-06
最后登录: 2007-01-09

3^# liyun 发表于2007-01-06

真的不错

刚看了下,效果还可以.要是能动态加入工作备记录就好了,也就是哪一天要做什么,只要将鼠标指向当日，就显示出来或都指向某一链接．

liufx

UID: 22402
帖子: 51
积分: 111
在线时间: 19小时
注册时间: 2008-04-13
最后登录: 2008-08-04

4^# liufx 发表于2008-04-24

效果不错，但是，似乎不能动态添加到输入框里。

aeolus

UID: 22612
帖子: 30
积分: 37
在线时间: 3小时
注册时间: 2008-04-23
最后登录: 2008-06-02

5^# aeolus 发表于2008-05-02

看起來好像不錯,不過不能動態紀錄日期啊