查看效果:日历效果
<script>
var myc_x,myc_y;
var myc_timeset=null,myc_timeset1=null;
var divobj=null;
var inputname;
function mycalendar() //构建对象
{
var mydate = new date();
this.year = mydate.getfullyear();
this.month = mydate.getmonth()+1;
this.date = mydate.getdate();
this.format=yyyy-mm-dd;
this.style = mystyle(1);
this.show = createcalendar;
this.input = createinput;
}
function mystyle(num) //设置样式
{
if(!num||isnan(num)){alert('参数不对,采用默认样式!');num=1;}
var style = new array();
style[1]=.week{background-color:#dfdfff;font-size:12px;width:140px;}
+.ds{width:140px;font-size:12px;cursor:hand}
+.mover{border:1px solid black;background-color:#f4f4f4;}
+.move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}
+.tit{background-color:#909eff;width:140px;font-size:12px;color:white;cursor:default}
+.cs{position:absolute;border:1px solid #909eff;width:142px;left:0px;top:0px;z-index:9999;}
+.shadow{position:absolute;left:0px;top:0px;font-family: arial black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;};
document.write(<style type='text/css'>);
document.write(style[num]);
document.write(</style>);
}
function createcalendar()
{
var week = new array('日','一','二','三','四','五','六');
document.write(<div class='cs' onselectstart='return false' oncontextmenu='return false' onmousedown='if(event.button==2)this.style.display=\none\' id='myc_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>);
//创建头部
document.write(<table class='tit' id='myc_top' onmousedown='myc_x=event.x-parentnode.parentnode.style.pixelleft;myc_y=event.y-parentnode.parentnode.style.pixeltop;setcapture()' onmouseup='releasecapture();' onmousemove='mycmove(this.parentelement.parentelement);'><tr><td width=10 onmouseover='this.style.color=\black\' onmouseout='this.style.color=\\' onclick='cutyear()' style='font-family: webdings;cursor:hand;' title='减少年份'>7</td><td title='减少月份' onmouseover='this.style.color=\black\' onclick='cutmonth()' onmouseout='this.style.color=\\' width=10 style='font-family: webdings;cursor:hand;'>3</td><td align=center onmouseover=this.classname='move1'; onmouseout=this.classname='';divhidden(myc.parentelement.nextsibling); onclick='createyear(+this.year+,this);divshow(myc.parentelement.nextsibling);'></td><td align=center onclick='createmonth(+this.month+,this);divshow(myc.parentelement.nextsibling)' onmouseover=this.classname='move1'; onmouseout=this.classname='';divhidden(myc.parentelement.nextsibling);></td><td width=10 onmouseover='this.style.color=\black\' onmouseout='this.style.color=\\' onclick='addmonth()' style='font-family: webdings;cursor:hand;' title='增加月份'>4</td><td width=10 style='font-family: webdings;cursor:hand;' onmouseover='this.style.color=\black\' onmouseout='this.style.color=\\' onclick='addyear()' title='增加年份'>8</td></tr></table>);
//创建星期条目
document.write(<table class='week'><tr>);
for(i=0;i<7;i++)
document.write(<td align=center>+week[i]+</td>);
document.write(</tr></table>);
//创建日期条目
document.write(<table class='ds' id='myc' cellspacing=2 cellpadding=0>);
for(i=0;i<6;i++)
{
document.write(<tr>);
for(j=0;j<7;j++)
document.write(<td width=10% height=16 align=center onmouseover='mover(this)' onmouseout='mout(this)' onclick='if(this.innertext!=\\)getvalue(inputname,this.innertext);myc_div.style.display=\none\'></td>);
document.write(</tr>);
}
document.write(</table>);
//建建水印
document.write(</div>);
//创建选择图层
document.write(<div style='position:absolute;left:0px;top:0px;z-index:3' onmouseover=divshow(this) onmouseout=divhidden(this)></div>);
document.write(</div>);
//显示日期
showdate(this.year,this.month);
myc_div.style.display='none';
}
function getvalue(obj,value)
{
eval(obj).value=parseint(myc_top.cells[2].innertext)+-+parseint(myc_top.cells[3].innertext)+-+value;
}
function showdate(year,month)
{
var mydate = new date(year,month-1,1);
var today = new date();
var day = mydate.getday();
var length = new array(31,30,31,30,31,30,31,31,30,31,30,31);
length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28;
for(i=0;i<myc.cells.length;i++)myc.cells[i].innerhtml = ;
for(i=0;i<length[month-1];i++)
{
myc.cells[i+day].innerhtml = (i+1);
if(new date(year,month-1,i+1).getday()==6||new date(year,month-1,i+1).getday()==0){myc.cells[i+day].style.color='red';}
}
myc_top.cells[2].innertext=year+年;
myc_top.cells[3].innertext=month+月;
with(myc.parentnode.previoussibling.style)
{
pixelleft=myc.offsetleft;
pixeltop=myc.offsettop;
height = myc.clientheight;
width = myc.clientwidth;
}
myc.parentelement.parentelement.style.height=myc.parentelement.offsetheight;
myc.parentelement.previoussibling.innerhtml=year;
}
//一些附加函数--------------------
//---------begin-------------------
function mover(obj){obj.classname = 'mover';}
function mout(obj){if(obj.classname=='mover')obj.classname = '';}
function addyear(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext); year++;showdate(year,month);}
function addmonth(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext);month++;if(month>12){month=1;year++;}showdate(year,month);}
function cutyear(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext);year--;showdate(year,month);}
function cutmonth(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext);month--;if(month<1){month=12;year--;}showdate(year,month);}
function divs(obj)
{
if(obj!=divobj)
{
obj.style.backgroundcolor=#909eff;
obj.style.color='black';
}
if(divobj!=null)
{
divobj.style.backgroundcolor='';
divobj.style.color='';
}
divobj = obj;
}
function divshow(obj)
{ if (myc_timeset!=null) cleartimeout(myc_timeset);
obj.style.display='block';
}
function divhidden(obj){myc_timeset=window.settimeout(function(){obj.style.display='none'},500);}
function createyear(year,obj)//创建年份选择
{
var ystr;
var odiv;
ystr=<table class='move1' cellspacing=0 cellpadding=2 width=+obj.offsetwidth+>;
ystr+=<tr><td style='cursor:hand' onclick='createyear(+(year-20)+,myc_top.cells[2])' align=center>上翻</td></tr>;
for(i=year-10;i<year+10;i++)
if(year==i)
ystr+=<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myc_top.cells[2].innertext=this.innertext;showdate(+i+,parseint(myc_top.cells[3].innertext));myc.parentelement.nextsibling.innerhtml=\\'>+i+年</td></tr>;
else
ystr+=<tr><td align=center style='cursor:hand' onmouseover=divs(this) onclick='myc_top.cells[2].innertext=this.innertext;showdate(+i+,parseint(myc_top.cells[3].innertext));myc.parentelement.nextsibling.innerhtml=\\'>+i+年</td></tr>;
ystr+=<tr><td style='cursor:hand' onclick='createyear(+(year+20)+,myc_top.cells[2])' align=center>下翻</td></tr>;
ystr+=</table>;
odiv = myc.parentelement.nextsibling;
odiv.innerhtml='';
odiv.innerhtml = ystr;
showdiv(odiv,obj.offsettop+obj.offsetheight,obj.offsetleft);
}
function createmonth(month,obj)//创建月份选择
{
var mstr;
var odiv;
mstr=<table class='move1' cellspacing=0 cellpadding=2 width=+obj.offsetwidth+>;
for(i=1;i<13;i++)
if (month==i)
mstr+=<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myc_top.cells[3].innertext=this.innertext;showdate(parseint(myc_top.cells[2].innertext),+i+);myc.parentelement.nextsibling.innerhtml=\\'>+i+月</td></tr>;
else
mstr+=<tr><td align=center style='cursor:hand' onmouseover='divs(this)' onclick='myc_top.cells[3].innertext=this.innertext;showdate(parseint(myc_top.cells[2].innertext),+i+);myc.parentelement.nextsibling.innerhtml=\\'>+i+月</td></tr>;
mstr+=</table>;
odiv = myc.parentelement.nextsibling;
odiv.innerhtml='';
odiv.innerhtml = mstr;
showdiv(odiv,obj.offsettop+obj.offsetheight,obj.offsetleft);
}
function showdiv(obj,top,left)
{
obj.style.pixeltop=top;
obj.style.pixelleft=left;
}
function mycmove(obj)
{
if(event.button==1)
{
var x = obj.clientleft;
var y = obj.clienttop;
obj.style.pixelleft= x+(event.x-myc_x);
obj.style.pixeltop= y+(event.y-myc_y);
window.status=myc_y;
}
}
function showdiv2(obj)
{
inputname=obj.name;
var e=obj;
var ot = obj.offsettop;
var ol=obj.offsetleft;
while(obj=obj.parentelement){ot+=obj.offsettop;ol+=obj.offsetleft;}
myc_div.style.pixeltop=ot+e.offsetheight;
myc_div.style.pixelleft=ol;
myc_div.style.display=block;
}
function createinput(name)
{myc_div.style.display='none';
document.write(<input type='text' name='+name+' size=20 onfocus='showdiv2(this)'>);
}
// --------------end ---------------------
</script>
<script>
var mycalendar=new mycalendar;
mycalendar.year=2005;
mycalendar.show();
mycalendar.input(txt1);
</script>
<input type=text name=test onfocus=showdiv2(this) readonly=true>
2025国考·省考课程试听报名