JavaScript极品小日历

代码如下： <script language='javascript' src='http://www.adsenser.org/js/calendar.js'></script><input type="text" name=date title="单击弹出日历" style='widt

happmaoo

72人浏览 · 2005-06-02 22:44:00

happmaoo · 2005-06-02 22:44:00 发布

代码如下：
<script language='javascript' src='http://www.adsenser.org/js/calendar.js'></script> <input type="text" name=date title="单击弹出日历" style='width:80;cursor:pointer;' οnfοcus="javascript:calendar()">
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]

其中用到一个Calendar.js文件代码如下：

document.write( " <divid=meizzCalendarLayerstyle='position:absolute;z-index:9999;width:144;height:193;display:none'> " );
2

document.write( " <iframename=meizzCalendarIframescrolling=noframeborder=0width=100%height=100%></iframe></div> " );
3

function writeIframe(){
4

var strIframe = " <html><head><metahttp-equiv='Content-Type'content='text/html;charset=gb2312'><style> " +
5

" *{font-size:12px;font-family:宋体} " +
6

" .bg{color: " + WebCalendar.lightColor + " ;cursor:default;background-color: " + WebCalendar.darkColor + " ;} " +
7

" table#tableMain{width:142;height:180;} " +
8

" table#tableWeektd{color: " + WebCalendar.lightColor + " ;} " +
9

" table#tableDaytd{font-weight:bold;} " +
10

" td#meizzYearHead,td#meizzYearMonth{color: " + WebCalendar.wordColor + " } " +
11

" .out{text-align:center;border-top:1pxsolid " + WebCalendar.DarkBorder + " ;border-left:1pxsolid " + WebCalendar.DarkBorder + " ; " +
12

" border-right:1pxsolid " + WebCalendar.lightColor + " ;border-bottom:1pxsolid " + WebCalendar.lightColor + " ;} " +
13

" .over{text-align:center;border-top:1pxsolid#FFFFFF;border-left:1pxsolid#FFFFFF; " +
14

" border-bottom:1pxsolid " + WebCalendar.DarkBorder + " ;border-right:1pxsolid " + WebCalendar.DarkBorder + " } " +
15

" input{border:1pxsolid " + WebCalendar.darkColor + " ;padding-top:1px;height:18;cursor:hand; " +
16

" color: " + WebCalendar.wordColor + " ;background-color: " + WebCalendar.btnBgColor + " } " +
17

" </style></head><bodyonselectstart='returnfalse'style='margin:0px'οncοntextmenu='returnfalse'><formname=meizz> " ;
18

if (WebCalendar.drag){strIframe += " <scr " + " iptlanguage=javascript> " +
19

" vardrag=false,cx=0,cy=0,o=parent.WebCalendar.calendar;functiondocument.onmousemove(){ " +
20

" if(parent.WebCalendar.drag&&drag){if(o.style.left=='')o.style.left=0;if(o.style.top=='')o.style.top=0; " +
21

" o.style.left=parseInt(o.style.left)+window.event.clientX-cx; " +
22

" o.style.top=parseInt(o.style.top)+window.event.clientY-cy;}} " +
23

" functiondocument.onkeydown(){switch(window.event.keyCode){case27:parent.hiddenCalendar();break; " +
24

" case37:parent.prevM();break;case38:parent.prevY();break;case39:parent.nextM();break;case40:parent.nextY();break; " +
25

" case84:document.forms[0].today.click();break;}window.event.keyCode=0;window.event.returnValue=false;} " +
26

" functiondragStart(){cx=window.event.clientX;cy=window.event.clientY;drag=true;}</scr " + " ipt> " }
27

strIframe += " <selectname=tmpYearSelectοnblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:18;display:none' " +
28

" οnchange='parent.WebCalendar.thisYear=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select> " +
29

" <selectname=tmpMonthSelectοnblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:74;display:none' " +
30

" οnchange='parent.WebCalendar.thisMonth=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select> " +
31

" <tableid=tableMainclass=bgborder=0cellspacing=2cellpadding=0> " +
32

" <tr><tdwidth=140height=19bgcolor=' " + WebCalendar.lightColor + " '> " +
33

" <tablewidth=140id=tableHeadborder=0cellspacing=1cellpadding=0><tralign=center> " +
34

" <tdwidth=15height=19class=bgtitle='向前翻1月快捷键：←'style='cursor:hand'οnclick='parent.prevM()'><b><</b></td> " +
35

" <tdwidth=60id=meizzYearHeadtitle='点击此处选择年份'οnclick='parent.funYearSelect(parseInt(this.innerText,10))' " +
36

" οnmοuseοver='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor' " +
37

" οnmοuseοut='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td> " +
38

" <tdwidth=50id=meizzYearMonthtitle='点击此处选择月份'οnclick='parent.funMonthSelect(parseInt(this.innerText,10))' " +
39

" οnmοuseοver='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor' " +
40

" οnmοuseοut='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td> " +
41

" <tdwidth=15class=bgtitle='向后翻1月快捷键：→'οnclick='parent.nextM()'style='cursor:hand'><b>></b></td></tr></table> " +
42

" </td></tr><tr><tdheight=20><tableid=tableWeekborder=1width=140cellpadding=0cellspacing=0 " ;
43

if (WebCalendar.drag){strIframe += " οnmοusedοwn='dragStart()'οnmοuseup='drag=false'οnmοuseοut='drag=false' " ;}
44

strIframe += " borderColorLight=' " + WebCalendar.darkColor + " 'borderColorDark=' " + WebCalendar.lightColor + " '> " +
45

" <tralign=center><tdheight=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table> " +
46

" </td></tr><tr><tdvalign=topwidth=140bgcolor=' " + WebCalendar.lightColor + " '> " +
47

" <tableid=tableDayheight=120width=140border=0cellspacing=1cellpadding=0> " ;
48

for ( var x = 0 ;x < 5 ;x ++ ){strIframe += " <tr> " ;
49

for ( var y = 0 ;y < 7 ;y ++ )strIframe += " <tdclass=outid='meizzDay " + (x * 7 + y) + " '></td> " ;strIframe += " </tr> " ;}
50

strIframe += " <tr> " ;
51

for ( var x = 35 ;x < 39 ;x ++ )strIframe += " <tdclass=outid='meizzDay " + x + " '></td> " ;
52

strIframe += " <tdcolspan=3class=outtitle=' " + WebCalendar.regInfo + " '><inputstyle='background-color: " +
53

WebCalendar.btnBgColor + " ;cursor:hand;padding-top:4px;width:100%;height:100%;border:0'οnfοcus='this.blur()' " +
54

" type=buttonvalue='  关闭'οnclick='parent.hiddenCalendar()'></td></tr></table> " +
55

" </td></tr><tr><tdheight=20width=140bgcolor=' " + WebCalendar.lightColor + " '> " +
56

" <tableborder=0cellpadding=1cellspacing=0width=140> " +
57

" <tr><td><inputname=prevYeartitle='向前翻1年快捷键：↑'οnclick='parent.prevY()'type=buttonvalue='<<' " +
58

" οnfοcus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input " +
59

" οnfοcus='this.blur()'name=prevMonthtitle='向前翻1月快捷键：←'οnclick='parent.prevM()'type=buttonvalue='< '> " +
60

" </td><tdalign=center><inputname=todaytype=buttonvalue='Today'οnfοcus='this.blur()'style='width:50'title='当前日期快捷键：T' " +
61

" οnclick=\ " parent.returnDate( new Date().getDate() + ' / ' + ( new Date().getMonth() + 1 ) + ' / ' + new Date().getFullYear())\ " > " +
62

" </td><tdalign=right><inputtitle='向后翻1月快捷键：→'name=nextMonthοnclick='parent.nextM()'type=buttonvalue=' >' " +
63

" οnfοcus='this.blur()'><inputname=nextYeartitle='向后翻1年快捷键：↓'οnclick='parent.nextY()'type=buttonvalue='>>' " +
64

" οnfοcus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table> " +
65

" </td></tr><table></form></body></html> " ;
66

with (WebCalendar.iframe)
67

{
68

document.writeln(strIframe);document.close();
69

for ( var i = 0 ;i < 39 ;i ++ )
70

{
71

WebCalendar.dayObj[i] = eval( " meizzDay " + i);
72

WebCalendar.dayObj[i].onmouseover = dayMouseOver;
73

WebCalendar.dayObj[i].onmouseout = dayMouseOut;
74

WebCalendar.dayObj[i].onclick = returnDate;
75

}
76

}
77

}
78

function WebCalendar() // 初始化日历的设置
79

{
80

this .regInfo = " WEBCalendarver3.0关闭的快捷键：[Esc] " ;
81

this .daysMonth = new Array( 31 , 28 , 31 , 30 , 31 , 30 , 31 , 31 , 30 , 31 , 30 , 31 );
82

this .day = new Array( 39 ); // 定义日历展示用的数组
83

this .dayObj = new Array( 39 ); // 定义日期展示控件数组
84

this .dateStyle = null ; // 保存格式化后日期数组
85

this .objExport = null ; // 日历回传的显示控件
86

this .eventSrc = null ; // 日历显示的触发控件
87

this .inputDate = null ; // 转化外的输入的日期(d/m/yyyy)
88

this .thisYear = new Date().getFullYear(); // 定义年的变量的初始值
89

this .thisMonth = new Date().getMonth() + 1 ; // 定义月的变量的初始值
90

this .thisDay = new Date().getDate(); // 定义日的变量的初始值
91

this .today = this .thisDay + " / " + this .thisMonth + " / " + this .thisYear; // 今天(d/m/yyyy)
92

this .iframe = window.frames( " meizzCalendarIframe " ); // 日历的iframe载体
93

this .calendar = getObjectById( " meizzCalendarLayer " ); // 日历的层
94

this .dateReg = "" ; // 日历格式验证的正则式
95

this .yearFall = 50 ; // 定义年下拉框的年差值
96

this .format = " yyyy-mm-dd " ; // 回传日期的格式
97

this .timeShow = false ; // 是否返回时间
98

this .drag = true ; // 是否允许拖动
99

this .darkColor = " #408080 " ; // 控件的暗色
100

this .lightColor = " #FFFFFF " ; // 控件的亮色
101

this .btnBgColor = " #ededed " ; // 控件的按钮背景色
102

this .wordColor = " #000000 " ; // 控件的文字颜色
103

this .wordDark = " #DCDCDC " ; // 控件的暗文字颜色
104

this .dayBgColor = " #F5F5FA " ; // 日期数字背景色
105

this .todayColor = " #ff3300 " ; // 今天在日历上的标示背景色
106

this .DarkBorder = " #D4D0C8 " ; // 日期显示的立体表达色
107

} var WebCalendar = new WebCalendar();
108

function calendar() // 主调函数
109

{
110

var e = window.event.srcElement;
111

writeIframe();
112

var o = WebCalendar.calendar.style;WebCalendar.eventSrc = e;
113

if (arguments.length == 0 )WebCalendar.objExport = e;
114

else WebCalendar.objExport = eval(arguments[ 0 ]);
115

WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? " move " : " default " ;
116

var t = e.offsetTop,h = e.clientHeight,l = e.offsetLeft,p = e.type;
117

while (e = e.offsetParent){t += e.offsetTop;l += e.offsetLeft;}

AI编程社区

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

用Cursor 来提升你的开发效率

AI编程社区

【Cursor】如何在Cursor试用期结束后继续使用？全方位指南！

AI编程社区

VSCode 和 Cursor：运行和调试指南

AI编程社区

所有评论(0)

查看更多评论

happmaoo

@happmaoo

已为社区贡献2条内容