站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → javascript写的小日历

javascript写的小日历

摘要: javascript写的小日历
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">

var text;
var flag = 0;
var cx=0;
var cy=0;
var val=0;
var running=false;
var stx,sty;
function locate()
{ cx=window.event.x;
cy=window.event.y;

}
document.onmousemove=locate;
function mousemove(){
var x,y;
x=cx-stx;
y=cy-sty;
if(x<0) {x=0;}
if(y<0) {y=0;}
with(calendar.style)
{
left=x.toString()+"px";
top=y.toString()+"px";
}
}
function mousedown(){
with(calendar.style)
{
stx=cx-parseInt(left.substring(0,left.charAt('p')+1));
sty=cy-parseInt(top.substring(0,top.charAt('p')+1));
}
if(!running){
val=setInterval("mousemove()",10);
running=true;
}
else{
clearInterval(val);
running=false;
}
}
function mouseup(){
if(running){
clearInterval(val);
running=false;
}
}
function MakeCal(date,intCount) {
var z1, z2,blntoday
var today = new Date();
if (date == null) {
var szMonth = today.getMonth();
var szYear = today.getFullYear();
var szDate = today.getDate();
}
else {
z1 = date.indexOf("/");
z2 = date.indexOf("/", 3);
var szMonth = Number(date.slice(0,z1)) - 1;
var szYear = Number(date.slice(z2 + 1, z2+ 5));
if(szMonth < 0){
szMonth = 11;
szYear = szYear - 1;
}
else if(szMonth > 11){
szMonth = 0;
szYear = szYear + 1;
}
var szDate = Number(date.slice(z1 + 1,z2));
}
var x, intTemp, szId, max, todayx, startx;
var szStart = new Date(szYear, szMonth, 1);
var intDay = szStart.getDay();
var blSet = false;
var szCal;
szStart.setMonth(szMonth - 1);
var PrevMonth = szStart.getMonth();
var PrevYear = szStart.getFullYear();
szStart = new Date(szYear, szMonth, 1);
szStart.setMonth(szMonth + 1);
var NextMonth = szStart.getMonth();
var NextYear = szStart.getFullYear();
szStart = new Date(szYear, szMonth, 1);
szCal = "" ;
szCal = szCal + "<table id=tblBor width=100% border=0 bgcolor=#D6C7DA style=\"border-style:solid;border-width:1px;border-color:black\" cellspacing=0 cellpadding=0 align='center'><tr><td>";
szCal = szCal + "<table id=tblCal width=100% border=0 bgcolor=#E7EAE6 style=\"cursor:default;\" cellspacing=0 cellpadding=3 >";
if (szStart.getMonth() == (szMonth))
szCal = szCal + "<tr bgcolor=#BDE6E8 onmouseup=\"mouseup();\" onmousedown=\"mousedown()\"><td colspan=6 align=center id=title style=\"cursor:default;\">

"+MakeString(szStart.getMonth())+"10
" +""+ MakeStringT(szMonth)+"" + " " +""+ szYear + "年"+""+"</td><td><input type=button value=&times style=\"background-color: #DFECEC; width: 18; height: 18\" onclick=\"calendar.style.visibility='hidden'\"></td></tr>";
else
szCal = szCal + "<tr bgcolor=#BDE6E8 onmouseup=\"mouseup();\" onmousedown=\"mousedown()\"><td colspan=6 align=center id=title style=\"cursor:default;\">
"+MakeString(szStart.getMonth())+"10
" +""+ MakeStringT(szMonth)+"" + " " +""+ szYear + "年"+""+"</td><td><input type=button value=&times style=\"background-color: #DFECEC; width: 18; height: 18\" onclick=\"calendar.style.visibility='hidden'\"></td></tr>";
szCal = szCal + "<tr id=rowTitle style=\"cursor:default;\"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
for (x=1; x<43; x++) {
if (x % 7 == 1) {
szCal = szCal + "<tr>"
}
szStart = new Date(szYear, szMonth, 1);
intTemp = (-(intDay - x));
szStart.setDate(intTemp);
szId = MakeString(szStart.getMonth()) + x;
if (!blSet) {
if (szStart.getMonth() == (szMonth + 1)) {
blSet = true;
max = x;
}
if (szStart.getFullYear() == (szYear + 1)) {
blSet = true;
max = x;
}
}
blntoday = 0;
if (szStart.getDate() == today.getDate()) {
if (szStart.getMonth() == today.getMonth()) {
if (szStart.getYear() == today.getYear()) {
todayx = x;
blntoday = 1;
}
}
}
szCal = szCal + "<td "; if (szStart.getMonth() == (szMonth)) {
if (szStart.getDate() == today.getDate()) {
szCal = szCal + "onclick=\"setVal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','0');document.getElementById(whoactive.innerHTML).style.backgroundColor=\'#E7EAE6\';\"";
}
else
{
szCal = szCal + "onclick=\"setVal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','0');document.getElementById(whoactive.innerHTML).style.backgroundColor=\'#E7EAE6\';this.style.backgroundColor=\'#aaaaaa\';whoactive.innerHTML=this.id;\"";
}
}
else {
szCal = szCal + "onclick=\"MakeCal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','0')\"";
}
}
if(intCount == 1){
if (szStart.getMonth() == (szMonth)) {
if (szStart.getDate() == today.getDate()) {
szCal = szCal + "onclick=\"setVal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','1')document.getElementById(whoactive.innerHTML).style.backgroundColor=\'#E7EAE6\';\"";
}
else
{
szCal = szCal + "onclick=\"setVal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','1');document.getElementById(whoactive.innerHTML).style.backgroundColor=\'#E7EAE6\';this.style.backgroundColor=\'#aaaaaa\';whoactive.innerHTML=this.id;\"";
}
}
else {
szCal = szCal + "onclick=\"MakeCal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','1')\"";
}
}
if (blntoday == 1)
szCal = szCal + " id=" + szId + ">
" + szStart.getDate() + "</td>";
else
szCal = szCal + " id=" + szId + ">
" + szStart.getDate() + "</td>";

if (x % 7 == 0) {
szCal = szCal + "</tr>"
}
}
szCal = szCal + "</tr>";
szCal = szCal + "</table></td></tr>";
szCal = szCal + "<tr align=center><td><table border=0 bgcolor=#BDE6E8 width=100% cellspacing=0 cellpadding=3>";
szCal = szCal + "<tr>";
if(intCount == 0){
szCal = szCal + "<td align=center style=\"cursor:hand;\">7</td>";
szCal = szCal + "<td align=center style=\"cursor:hand;\">3</td>";
szCal = szCal + "<td align=center style=\"cursor:hand;\">4</td>";
szCal = szCal + "<td align=center style=\"cursor:hand;\">8</td>";
}
if(intCount == 1){
szCal = szCal + "<td align=center style=\"cursor:hand;\">7</td>";
szCal = szCal + "<td align=center style=\"cursor:hand;\">3</td>";
szCal = szCal + "<td align=center style=\"cursor:hand;\">4</td>";
szCal = szCal + "<td align=center style=\"cursor:hand;\">8</td>";
}
szCal = szCal + "</tr></table>";
szCal = szCal + "</td></tr></table>";
calendar.innerHTML = szCal;
for (x=intDay; x>0; x--) {
eval(MakeString(PrevMonth) + x + ".style.color = \"909090\"")
}
for (x=max; x<43; x++) {
eval(MakeString(NextMonth) + x + ".style.color = \"909090\"")
}
if (szMonth == today.getMonth()) {
if (szYear == today.getFullYear()) {
eval(MakeString(szMonth) + todayx + ".style.backgroundColor = \"#7F7F7F\"");
eval(MakeString(szMonth) + todayx + ".style.Color = \"yellow\"");
}
}
tblCal.style.color = "#00009F";
tblCal.style.fontFamily = "arial";
tblCal.style.cursor = "hand";
tblCal.style.fontSize = "10";
rowTitle.style.backgroundColor = "#BBD1EA";
//event.cancelBubble = true;
}

function MakeString(intMonth) {
var Month
switch (intMonth) {
case 0 :
Month = "JANUARY";
break;
case 1 :
Month = "FEBUARY";
break;
case 2 :
Month = "MARCH";
break;
case 3 :
Month = "APRIL";
break;
case 4 :
Month = "MAY";
break;
case 5 :
Month = "JUNE";
break;
case 6 :
Month = "JULY";
break;
case 7 :
Month = "AUGUST";
break;
case 8 :
Month = "SEPTEMBER";
break;
case 9 :
Month = "OCTOBER";
break;
case 10 :
Month = "NOVEMBER";
break;
case 11 :
Month = "DECEMBER";
}
return (Month);
}

function MakeStringT(intMonth) {
var Month
switch (intMonth) {
case 0 :
Month = "一月";
break;
case 1 :
Month = "二月";
break;
case 2 :
Month = "三月";
break;
case 3 :
Month = "四月";
break;
case 4 :
Month = "五月";
break;
case 5 :
Month = "六月";
break;
case 6 :
Month = "七月";
break;
case 7 :
Month = "八月";
break;
case 8 :
Month = "九月";
break;
case 9 :
Month = "十月";
break;
case 10 :
Month = "十一月";
break;
case 11 :
Month = "十二月";
}
return (Month);
}

function keepCal() {
event.cancelBubble = true;
}

function public_get_txtDate() {
return txtDate;
}

function public_get_value() {
return txtDate.value;
}
function getCal(intCount){

today=new Date();
nowyear=today.getYear();
nowmonth=today.getMonth()+1;
nowday=today.getDate();
currdate = nowmonth+'/'+nowday+'/'+nowyear;
MakeCal(currdate, 0)
intFlag = 1;
//calendar.style.left = iLeft;
//calendar.style.top = iTop;
calendar.style.visibility = 'visible';
//event.cancelBubble = true;
}
function setVal(date, intCount){
z1 = date.indexOf("/");
z2 = date.indexOf("/", 3);
var szMonth = date.slice(0,z1);
if (szMonth.length<2)
szMonth="0"+szMonth;
var szYear = date.slice(z2 + 1, z2+ 5);
/*
if(szMonth < 0){
szMonth = 11;
szYear = szYear - 1;
}
else if(szMonth > 11){
szMonth = 0;
szYear = szYear + 1;
}
*/
var szDate = date.slice(z1 + 1,z2);
if (szDate.length<2)
szDate = "0"+szDate;
text.value=szYear+'-'+szMonth+'-'+szDate;
calendar.style.display='none'
}
function hideCal(){
calendar.style.visibility = 'hidden';
}
function show_calendar()
{
calendar.style.visibility='hidden'
//calendar.style.visibility='display'
}
function show_cal(get_time)
{
if(event.clientX+163> document.body.clientWidth)
calendar.style.left=event.clientX+document.body.scrollLeft-150;
else calendar.style.left=event.clientX+document.body.scrollLeft;
if(event.clientY+200 > document.body.clientHeight)
calendar.style.top=event.clientY+document.body.scrollTop-200;
else calendar.style.top=event.clientY+document.body.scrollTop;
//calendar.style.left=event.clientX;
//calendar.style.top=event.clientY;
calendar.style.visibility='visible';
MM_showHideLayers('calendar','','show')
calendar.style.display='list-item';
text=get_time;
flag=1;
return false;
}
//document.onclick = hideCal;
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i for(i=0;!x&&d.layers&&i if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
function hide_cal()
{
if (flag==1)
{
flag=0;
if(!calendar.focus())
calendar.style.display='none'
}
return false;
}

程序调用页面代码:


<head>
....................
</head>
<script src="cal.js"></script>
<body MS_POSITIONING="GridLayout">

style="DISPLAY: none; Z-INDEX: 1; LEFT: 0px; VISIBILITY: hidden; OVERFLOW: visible; WIDTH: 150px; POSITION: absolute; TOP: 100px; HEIGHT: 225px"
name="calendar">
<script language=javascript>getCal(0);</script>

<body>
.............................................................
<input onclick=show_cal(this) readOnly size=12 name=startdate>
至 <input onclick=show_cal(this) readOnly size=12 name=enddate>
.........................................
</body>