45fan.com - 路饭网
首页
路由器设置
无线路由器
路由器密码
网络频道
手机频道
电脑频道
图库频道
问答中心
搜索:
智能搜索
搜索标题
您的位置
:
主页
>
电脑频道
>
电脑教程
> 阅读资讯:怎么样使用梅花雨的js日历控件?
怎么样使用梅花雨的js日历控件?
2016-09-03 11:23:36 来源:www.45fan.com 【
大
中
小
】
怎么样使用梅花雨的js日历控件?
calendar.js脚本为:
<!--
document.write(
"
<divid=meizzCalendarLayerstyle='position:absolute;z-index:9999;width:144;height:193;display:none'>
"
);
document.write(
"
<iframename=meizzCalendarIframescrolling=noframeborder=0width=100%height=100%></iframe></div>
"
);
function
writeIframe()
...
{
var
strIframe
=
"
<html><head><metahttp-equiv='Content-Type'content='text/html;charset=gb2312'><style>
"
+
"
*{font-size:12px;font-family:宋体}
"
+
"
.bg{color:
"
+
WebCalendar.lightColor
+
"
;cursor:default;background-color:
"
+
WebCalendar.darkColor
+
"
;}
"
+
"
table#tableMain{width:142;height:180;}
"
+
"
table#tableWeektd{color:
"
+
WebCalendar.lightColor
+
"
;}
"
+
"
table#tableDaytd{font-weight:bold;}
"
+
"
td#meizzYearHead,td#meizzYearMonth{color:
"
+
WebCalendar.wordColor
+
"
}
"
+
"
.out{text-align:center;border-top:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
;border-left:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
;
"
+
"
border-right:1pxsolid
"
+
WebCalendar.lightColor
+
"
;border-bottom:1pxsolid
"
+
WebCalendar.lightColor
+
"
;}
"
+
"
.over{text-align:center;border-top:1pxsolid#FFFFFF;border-left:1pxsolid#FFFFFF;
"
+
"
border-bottom:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
;border-right:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
}
"
+
"
input{border:1pxsolid
"
+
WebCalendar.darkColor
+
"
;padding-top:1px;height:18;cursor:hand;
"
+
"
color:
"
+
WebCalendar.wordColor
+
"
;background-color:
"
+
WebCalendar.btnBgColor
+
"
}
"
+
"
</style></head><bodyonselectstart='returnfalse'style='margin:0px'oncontextmenu='returnfalse'><formname=meizz>
"
;
if
(WebCalendar.drag)
...
{strIframe
+=
"
<scr
"
+
"
iptlanguage=javascript>
"
+
"
vardrag=false,cx=0,cy=0,o=parent.WebCalendar.calendar;functiondocument.onmousemove(){
"
+
"
if(parent.WebCalendar.drag&&drag){if(o.style.left=='')o.style.left=0;if(o.style.top=='')o.style.top=0;
"
+
"
o.style.left=parseInt(o.style.left)+window.event.clientX-cx;
"
+
"
o.style.top=parseInt(o.style.top)+window.event.clientY-cy;}}
"
+
"
functiondocument.onkeydown(){switch(window.event.keyCode){case27:parent.hiddenCalendar();break;
"
+
"
case37:parent.prevM();break;case38:parent.prevY();break;case39:parent.nextM();break;case40:parent.nextY();break;
"
+
"
case84:document.forms[0].today.click();break;}window.event.keyCode=0;window.event.returnValue=false;}
"
+
"
functiondragStart(){cx=window.event.clientX;cy=window.event.clientY;drag=true;}</scr
"
+
"
ipt>
"
}
strIframe
+=
"
<selectname=tmpYearSelectonblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:18;display:none'
"
+
"
onchange='parent.WebCalendar.thisYear=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select>
"
+
"
<selectname=tmpMonthSelectonblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:74;display:none'
"
+
"
onchange='parent.WebCalendar.thisMonth=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select>
"
+
"
<tableid=tableMainclass=bgborder=0cellspacing=2cellpadding=0>
"
+
"
<tr><tdwidth=140height=19bgcolor='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tablewidth=140id=tableHeadborder=0cellspacing=1cellpadding=0><tralign=center>
"
+
"
<tdwidth=15height=19class=bgtitle='向前翻1月 快捷键:←'style='cursor:hand'onclick='parent.prevM()'><b><</b></td>
"
+
"
<tdwidth=60id=meizzYearHeadtitle='点击此处选择年份'onclick='parent.funYearSelect(parseInt(this.innerText,10))'
"
+
"
onmouseover='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor'
"
+
"
onmouseout='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td>
"
+
"
<tdwidth=50id=meizzYearMonthtitle='点击此处选择月份'onclick='parent.funMonthSelect(parseInt(this.innerText,10))'
"
+
"
onmouseover='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor'
"
+
"
onmouseout='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td>
"
+
"
<tdwidth=15class=bgtitle='向后翻1月 快捷键:→'onclick='parent.nextM()'style='cursor:hand'><b>></b></td></tr></table>
"
+
"
</td></tr><tr><tdheight=20><tableid=tableWeekborder=1width=140cellpadding=0cellspacing=0
"
;
if
(WebCalendar.drag)
...
{strIframe
+=
"
onmousedown='dragStart()'onmouseup='drag=false'onmouseout='drag=false'
"
;}
strIframe
+=
"
borderColorLight='
"
+
WebCalendar.darkColor
+
"
'borderColorDark='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tralign=center><tdheight=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>
"
+
"
</td></tr><tr><tdvalign=topwidth=140bgcolor='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tableid=tableDayheight=120width=140border=0cellspacing=1cellpadding=0>
"
;
for
(
var
x
=
0
;x
<
5
;x
++
)
...
{strIframe
+=
"
<tr>
"
;
for
(
var
y
=
0
;y
<
7
;y
++
)strIframe
+=
"
<tdclass=outid='meizzDay
"
+
(x
*
7
+
y)
+
"
'></td>
"
;strIframe
+=
"
</tr>
"
;}
strIframe
+=
"
<tr>
"
;
for
(
var
x
=
35
;x
<
39
;x
++
)strIframe
+=
"
<tdclass=outid='meizzDay
"
+
x
+
"
'></td>
"
;
strIframe
+=
"
<tdcolspan=3class=outtitle='
"
+
WebCalendar.regInfo
+
"
'><inputstyle='background-color:
"
+
WebCalendar.btnBgColor
+
"
;cursor:hand;padding-top:4px;width:100%;height:100%;border:0'onfocus='this.blur()'
"
+
"
type=buttonvalue=' 关闭'onclick='parent.hiddenCalendar()'></td></tr></table>
"
+
"
</td></tr><tr><tdheight=20width=140bgcolor='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tableborder=0cellpadding=1cellspacing=0width=140>
"
+
"
<tr><td><inputname=prevYeartitle='向前翻1年 快捷键:↑'onclick='parent.prevY()'type=buttonvalue='<<'
"
+
"
onfocus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input
"
+
"
onfocus='this.blur()'name=prevMonthtitle='向前翻1月 快捷键:←'onclick='parent.prevM()'type=buttonvalue='< '>
"
+
"
</td><tdalign=center><inputname=todaytype=buttonvalue='Today'onfocus='this.blur()'style='width:50'title='当前日期 快捷键:T'
"
+
"
onclick="parent.returnDate(newDate().getDate()+'/'+(newDate().getMonth()+1)+'/'+newDate().getFullYear())">
"
+
"
</td><tdalign=right><inputtitle='向后翻1月 快捷键:→'name=nextMonthonclick='parent.nextM()'type=buttonvalue=' >'
"
+
"
onfocus='this.blur()'><inputname=nextYeartitle='向后翻1年 快捷键:↓'onclick='parent.nextY()'type=buttonvalue='>>'
"
+
"
onfocus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>
"
+
"
</td></tr><table></form></body></html>
"
;
with
(WebCalendar.iframe)
...
{
document.writeln(strIframe);document.close();
for
(
var
i
=
0
;i
<
39
;i
++
)
...
{
WebCalendar.dayObj[i]
=
eval(
"
meizzDay
"
+
i);
WebCalendar.dayObj[i].onmouseover
=
dayMouseOver;
WebCalendar.dayObj[i].onmouseout
=
dayMouseOut;
WebCalendar.dayObj[i].onclick
=
returnDate;
}
}
}
function
WebCalendar()
//
初始化日历的设置
...
{
this
.regInfo
=
"
WEBCalendarver3.0 作者:meizz(梅花雪疏影横斜) 网站:http://www.meizz.com/ 关闭的快捷键:[Esc]
"
;
this
.regInfo
+=
"
Ver2.0:walkingpoison(水晶龙) Ver1.0:meizz(梅花雪疏影横斜)
"
;
this
.daysMonth
=
new
Array(
31
,
28
,
31
,
30
,
31
,
30
,
31
,
31
,
30
,
31
,
30
,
31
);
this
.day
=
new
Array(
39
);
//
定义日历展示用的数组
this
.dayObj
=
new
Array(
39
);
//
定义日期展示控件数组
this
.dateStyle
=
null
;
//
保存格式化后日期数组
this
.objExport
=
null
;
//
日历回传的显示控件
this
.eventSrc
=
null
;
//
日历显示的触发控件
this
.inputDate
=
null
;
//
转化外的输入的日期(d/m/yyyy)
this
.thisYear
=
new
Date().getFullYear();
//
定义年的变量的初始值
this
.thisMonth
=
new
Date().getMonth()
+
1
;
//
定义月的变量的初始值
this
.thisDay
=
new
Date().getDate();
//
定义日的变量的初始值
this
.today
=
this
.thisDay
+
"
/
"
+
this
.thisMonth
+
"
/
"
+
this
.thisYear;
//
今天(d/m/yyyy)
this
.iframe
=
window.frames(
"
meizzCalendarIframe
"
);
//
日历的iframe载体
this
.calendar
=
getObjectById(
"
meizzCalendarLayer
"
);
//
日历的层
this
.dateReg
=
""
;
//
日历格式验证的正则式
this
.yearFall
=
50
;
//
定义年下拉框的年差值
this
.format
=
"
yyyy-mm-dd
"
;
//
回传日期的格式
this
.timeShow
=
false
;
//
是否返回时间
this
.drag
=
true
;
//
是否允许拖动
this
.darkColor
=
"
#FF6347
"
;
//
控件的暗色
this
.lightColor
=
"
#FFFFFF
"
;
//
控件的亮色
this
.btnBgColor
=
"
#FFF5A0
"
;
本文地址:
http://www.45fan.com/dnjc/71717.html
Tags:
控件
日历
花雨
编辑:路饭网
上一篇:
J2EE 1.4基础指引介绍
下一篇:
在C#中实现图片缩放的步骤
相关文章列表
在Word2016中制作可爱的动物日历的方法
在Excel中使用滚动条控件计算动态面积的
使用人生日历抢春运车票的方法
使用Word2016内容控件的步骤
在Excel中制作带有多个图表控件的动态的
win10中Outlook邮件和日历的快捷键有哪些
在PPT幻灯片中利用Windows media player
解决win10下无法安装工行网银控件或助手
在outlook中将自己的日历共享给让人的方
在axure中上传自己下载好的怎么库/控件库
推广内容
推荐阅读
热门推荐
推荐文章
·
如何为Excel2010表格中的图表添加说明文
·
Win7系统看电影时,如果有QQ消息,电影声
·
WPS文字文档中,如何给指定的文字添加边
·
盘点制作PPT时常用的一些快捷键大全
·
分享一组Win8系统不太为人所知的小技巧
·
系统遇到特殊故障时,如何进入Win10系统
·
电脑系统损坏要如何修复?修复win10系统
·
想找回关闭的网页该怎么办?怎样查看360
·
实现电脑每天定时关机,借助Win7任务计划
·
什么是Telnet协议?Win7如何开启Telnet服
·
电脑时间出现差错时如何进行北京时间校准
·
电脑运行速度慢,C盘空间越来越小,如何
关于我们
|
联系我们
|
友情链接
|
网站地图
|
Sitemap
|
App
|
返回顶部