打印

发一个比较漂亮的日历

mozart0 [楼主]

匪徒田老大

荣誉管理团队

帖子: 2378
体力: 6376
威望: 180
当前: 上海长宁
离线: 6 天

1^# 大中小发表于 2007-3-12 18:11

很久以前的东西，整理文件时偶然发现
好像也是帮论坛上某人写的，外观的设计者是当时的某位版主
写得有点乱
css用了expression，若放在有较多内容的页面里，会影响页面加载和运行速度
ie only

<base href=http://mozart0.uni.cc/cal/ >
<style>
.cal_0 table{
	border:none;
	font-family:tahoma;
	font-size:9px;
	text-align:center;
	}
.cal_0 th{
	height:17;
	background-image:expression("url("+MyCal.color+"_h.gif)");
	border-bottom:expression("1 solid "+MyCal.ca);
	}
.cal_0{
	background-image:url(shadow.gif);
	width:168;
	height:131;
	cursor:default;
	padding:3 4 5 3;
	position:absolute;
	}
.cal_1{
	border:expression("1 solid "+MyCal.ca);
	width:100%;
	height:100%;
	}
.d1{
	position:absolute;
	color:expression(MyCal.cb);
	font-size:96px;
	font-family:Arial black;
	font-weight:bolder;
	left:0;
	top:-9;
	width:160;
	text-align:center;
	overflow:hidden;
	z-index:-1;
	}
.d5{
	position:absolute;
	left:45;
	top:108;
	width:60;
	height:13;
	}
.d6{
	position:absolute;
	left:108;
	top:108;
	width:48;
	height:13;
	}
.cc{
	border-color:expression(MyCal.ca);
	border-width:1;
	border-style:solid;
	line-height:9px;
	}
.sel{
	position:absolute;
	border-top:none;
	top:121;
	height:135;
	overflow:hidden;
	background-color:white;
	overflow-y:auto;
	display:none;
	}
.selitem{
	font-family:tahoma;
	font-size:9px;
	line-height:11px;
	text-align:left;
	}
.p1{
	padding-left:19;
	}
.p2{
	padding-left:16;
	}
.scroll{
	scrollbar-3dlight-color:expression(MyCal.ca);
	scrollbar-arrow-color:white;
	scrollbar-face-color:white;
	scrollbar-shadow-color:white;
	scrollbar-track-color:white;
	}
</style>
<script>
	MyCal.color="green";
	MyCal.ca="#99cc00";
	MyCal.cb="#e5f5e5";
function MyCal(numYear,numMonth,numDate){
	if(typeof(oMain)!='undefined'){
		alert("one instance of MyCal per page only")
		return null;
		}
	var arg=MyCal.arguments;
	if(arg.length==3){
		this.year=arg[0];
		this.month=arg[1];
		this.date=arg[2];
		}
	else{
		var t=new Date();
		this.year=t.getYear();
		this.month=t.getMonth();
		this.date=t.getDate();
		}
	this.green=["#99cc00","#e5f5e5"];
	this.blue=["#00ccff","#e5eff5"];
	this.yellow=["#ffcc00","#ffefef"];
	this.gray=["#999999","#f0f0f0"];
	this.DayName="Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
	this.MonthDay=[[31,28,31,30,31,30,31,31,30,31,30,31],[31,29,31,30,31,30,31,31,30,31,30,31]];
	this.MonthName="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(",");
	for(var i in this.MonthName)
		this.MonthName[this.MonthName[i]]=i;
	this.setColor=function(str){
		if(typeof(this[str])=="undefined"){
			alert("no such color:"+str);
			return;
			}
		if(typeof(oYear)!="undefined"){
			var t=document.all("imgArr");
			for(var i=0;i<t.length;i++)
				t[i].src=t[i].src.replace(MyCal.color,str);
			}
		MyCal.color=str;
		MyCal.ca=this[str][0];
		MyCal.cb=this[str][1];
		}
	this.chgYear=function(d){
		var m=oYear.innerText;
		this.year=parseInt(m)+d;
		this.refresh();
		}
	this.chgMonth=function(d){
		var i=parseInt(this.MonthName[oMonth.innerText])+d;
		if(i==12)
			i=0;
		else if(i==-1)
			i=11;
		this.month=i;
		this.refresh();
		}
	this.chgDate=function(ob){
		if(ob==event.srcElement)
			return;
		var x=event.srcElement.innerText;
		if(x==" ")
			return;
		oDate.cells[this.date+this.day+7].style.fontWeight="normal";
		this.date=parseInt(x);
		event.srcElement.style.fontWeight="bold";
		}
	this.setDate=function(ob){
		var y0=this.year,m0=this.month;
		if(ob==event.srcElement)
			return;
		var t=ob.id.replace("sel","").toLowerCase();
		var x=event.srcElement.innerText;
		this[t]=parseInt(t=="year"?x:this.MonthName[x]);
		ob.style.display="none";
		if(y0!=this.year||m0!=this.month)
			this.refresh();
		}
	this.refresh=function(){
		oMonth.innerText=this.MonthName[this.month];		
		oYear.innerText=this.year;
		oBg.innerText=this.month+1;
		oMain.filters[0].apply();
		oMain.innerHTML=this.drawTable();
		oDate.cells[this.date+this.day+7].style.fontWeight="bold";
		oMain.filters[0].play();
		}
	this.outPut=function(){
		var str='<div class="cal_0" id=oCal onselectstart="return false;">'+
		'	<div class=d1 id=oBg>'+(this.month+1)+'</div>'+
		'	<table class="cal_1" cellspacing=0 cellpadding=0>'+
		'		<tr>';
				for(var i=0;i<7;i++)
					str+='<th>'+this.DayName[i]+'</th>';
				str+=
		'		</tr>'+
		'		<tr><td colspan=7 align=left id=oMain style="filter:blendtrans(duration=0.5)">'+
						this.drawTable()+
		'		</td><tr>'+
		'		<td colspan=7>&nbsp;</td>'+
		'		</tr>'+
		'	</table>'+
		'	<div class="d5 cc">'+
		'		<table cellpadding=0 cellspacing=0><tr>'+
		'			<td><img id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgYear(-1)"></td>'+
		'			<td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oYear>'+this.year+'</td>'+
		'			<td><img id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgYear(1)""></td>'+
		'		</tr></table>'+
		'	</div>'+
		'	<div class="d6 cc">'+
		'		<table cellpadding=0 cellspacing=0><tr>'+
		'			<td><img id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgMonth(-1)"></td>'+
		'			<td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oMonth>'+this.MonthName[this.month]+'</td>'+
		'			<td><img id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgMonth(1)"></td>'+
		'		</tr></table>'+
		'	</div>'+
		'	<div class="sel cc scroll" id=selYear style="left:45;width:60" onclick="CalOb.setDate(this)">';
				for(var i=2001;i<2050;i++)
					str+='<div class="selitem p1">'+i+'</div>';
				str+=
		'	</div>'+
		'	<div class="sel cc" id=selMonth style="left:108;width:48" onclick="CalOb.setDate(this)">';
				for(var i=0;i<12;i++)
					str+='<div class="selitem p2">'+this.MonthName[i]+'</div>';
				str+=
		'	</div>'+
		'</div>';
		document.write(str);
		CalOb=this;
		oDate.cells[this.date+this.day+7].style.fontWeight="bold";
		oDate.cells[this.date+this.day+7].style.fontSize="12px";
		attchEvent();
		}
	this.drawTable=function(){
		var day=new Date(this.year,this.month,1);
		day=day.getDay();
		this.day=day-1;
		var m=this.year%4==0&&this.year%100||this.year%400==0?1:0;
		m=this.MonthDay[m][this.month];	
		var r="<table style='table-layout:fixed' cellpadding=0 cellpacing=0 id=oDate onclick='CalOb.chgDate(this)'>";
		r+="<tr height=3><td width=20></td><td width=23></td><td width=23></td>"+
			"<td width=23></td><td width=20></td><td></td><td></td></tr>";
		for(var i=0,k=0;i<6;i++){
			r+="<tr>";
			for(var j=0;j<7;j++){
				var k=i*7+j+1;
				var ts="<td>&nbsp;</td>"
				if(k>day&&k<=m+day){
					ts="<td";
					if(j==0||j==6)
						ts+=" style='color:red'";
					ts+=">"+(k-day)+"</td>";
					}
				r+=ts;
				}
			r+="</tr>";
			}
		r+="</table>";
		return r;
		}
	function attchEvent(){
		oYear.onmouseover=function(){
			selYear.style.display="block";
			}
		oYear.onmouseout=function(){
			if(event.offsetY<10)
				selYear.style.display="none";
			}
		oMonth.onmouseover=function(){
			selMonth.style.display="block";
			}
		oMonth.onmouseout=function(){
			if(event.offsetY<10)
				selMonth.style.display="none";
			}
		selYear.onmouseout=selOut;
		selYear.onmouseover=selOver;
		selMonth.onmouseout=selOut;
		selMonth.onmouseover=selOver;
		var t=document.all.imgArr;
		for(var i=0;i<t.length;i++){
			t[i].onmousedown=imgDown;
			t[i].onmouseup=imgUp;
			}
		}
	function imgDown(){
		this.src=this.src.replace(/.{5}$/,"1.gif");
		}
	function imgUp(){
		this.src=this.src.replace(/.{5}$/,"0.gif");
		}
	function selOver(){
		var ob=event.srcElement;
		if(ob==this)
			return;
		ob.style.backgroundColor=MyCal.cb;
		}
	function selOut(){
		var ob=event.srcElement;
		if(ob==this)
			this.style.display="none";
		else 
			ob.style.backgroundColor="white";
		}
	}
</script>
<script>
var tt=new MyCal();
tt.setColor("blue");//
tt.outPut();
var colortable=["green","blue","yellow","gray"];
var cc=0;
document.body.onclick=function(){
	if(event.srcElement.tagName!=="BODY")
		return;
	tt.setColor(colortable[cc++]);
	if(cc==colortable.length)
		cc=0;
	}
document.body.title="单击页面空白以更换颜色"
</script>

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

[ 本帖最后由 mozart0 于 2007-6-21 13:12 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

居处恭执事敬与人忠

TOP

西部数码分布式集群主机傲视群雄 | 韩国主机，快速稳定免备案，讯网科技

newsdyanshan

新手上路

帖子: 16
体力: 18
威望: 0
离线: 667 天

2^# 大中小发表于 2007-3-12 20:15

非常好，收藏了。谢谢！

TOP

PSD网页模板下载,高端实用 | 免费自助建站

esefei

阿飚

中级会员

帖子: 368
体力: 474
威望: 0
当前: 湖北武汉
离线: 61 天

专长 PHP,项目管理,市场

3^# 大中小发表于 2007-3-12 21:48

赞个~

帆已扬，起航~

TOP

xiaohe83

中级会员

帖子: 77
体力: 237
威望: 0
离线: 27 天

4^# 大中小发表于 2007-3-12 21:58

有点flash的感觉。

TOP

tianlanbb

柠檬水

高级会员

帖子: 822
体力: 751
威望: 0
当前: 北京昌平区
离线: 4 天

专长 网页设计,策划,网站运营

5^# 大中小发表于 2007-3-12 22:18

收藏非常感谢楼主

售茶叶

TOP

csshtm

初级会员

帖子: 50
体力: 106
威望: 0
离线: 21 天

6^# 大中小发表于 2007-3-12 22:25

用expression , 少了没关系 , 多了怕影响效率

TOP

asgardmoon

笑笑十年

银牌会员

帖子: 1056
体力: 1259
威望: 1
当前: 北京海淀区

专长 JS,JAVA

7^# 大中小发表于 2007-3-12 23:28

expression 还有这个好效果帅气

TOP

icebirds

冰鸟

中级会员

帖子: 201
体力: 253
威望: 3
当前: 北京通州区
离线: 61 天

专长 前端制作,AS

8^# 大中小发表于 2007-3-13 08:43

我这里完全不能用啊。点什么都没反应。
Ubuntu 6.10系统，浏览器是Firefox 2.002

以下是firebug给出的调试错误信息。

复制内容到剪贴板

代码:

oDate.cells has no properties

[Break on this error] <a href="###" class="bold" onclick="window.clipboardData.setData('text','http:/...

event is not defined

(no name)(table#oDate)thread-2726443-1-... (line 150)

onclick(click clientX=0, clientY=0)thread-2726443-1-... (line 1)

[Break on this error] &raquo; <a href="forum-1-1.html">&#199;°&#204;¨&#214;&#198;×÷&#211;&#235;&#189;&#197;±&#190;×¨&#192;&#184;</a> &raquo; ·&#162;&#210;&#187;&#184;&#246;±&#200;&#189;&#207;&#198;&#175;&#193;&#193;&#181;...

HiMii.com ,电子杂志隆重上线！

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8332
体力: 19609
威望: 187
当前: 福建厦门

专长 JS,JAVA,Oracle

9^# 大中小发表于 2007-3-13 08:56

楼主已经标明ie only了……

子叶：子乌的叶子

TOP

icebirds

冰鸟

中级会员

帖子: 201
体力: 253
威望: 3
当前: 北京通州区
离线: 61 天

专长 前端制作,AS

10^# 大中小发表于 2007-3-13 13:21

引用:

原帖由 Sheneyan 于 2007-3-13 08:56 发表
楼主已经标明ie only了……

哦，抱歉，还真没看到。

TOP

luzhuqin

中级会员

帖子: 146
体力: 232
威望: 0
当前: 浙江杭州
离线: 423 天

11^# 大中小发表于 2007-3-13 13:39

淡入淡出的.喜欢

TOP

psart

初级会员

帖子: 71
体力: 145
威望: 0
离线: 289 天

12^# 大中小发表于 2007-3-13 14:08

不错，收藏先！

中国八景旅游网

TOP

百威

初级会员

帖子: 39
体力: 115
威望: 0
离线: 64 天

13^# 大中小发表于 2007-3-13 14:13

很漂亮，收藏了

TOP

windkoo

中级会员

帖子: 169
体力: 372
威望: 0
当前: 四川成都
离线: 133 天

专长 前端制作,JS,PHP

14^# 大中小发表于 2007-3-13 14:15

很是漂亮啊

TOP

ztwz

新手上路

帖子: 22
体力: 39
威望: 0
离线: 829 天

15^# 大中小发表于 2007-3-13 14:21

非常谢谢。
收藏！

TOP

zibet

初级会员

帖子: 39
体力: 89
威望: 0
当前: 四川成都
离线: 1 天

16^# 大中小发表于 2007-4-2 17:34

精彩！！！！支持你！

TOP

xbang

新手上路

帖子: 12
体力: 26
威望: 0
离线: 401 天

17^# 大中小发表于 2007-4-2 19:25

不错啊啊

TOP

comes

高级会员

帖子: 970
体力: 831
威望: 0
当前: 河南郑州
离线: 20 天

专长 SEO,网站运营

18^# 大中小发表于 2007-4-4 21:27

停美的!

TOP

辉色天空

初级会员

帖子: 51
体力: 109
威望: 0
离线: 365 天

19^# 大中小发表于 2007-4-4 22:35

很漂亮``谢谢```收藏了

空间便宜卖QQ79974181

TOP

FBI007FK

初级会员

帖子: 90
体力: 164
威望: 0
当前: 上海徐汇
离线: 119 天

20^# 大中小发表于 2007-4-5 08:57

相当好十分感谢，正需要呢。
楼主好人啊，鉴定完毕。

TOP

qingwubaobao

轻舞宝宝

高级会员

帖子: 1179
体力: 911
威望: 0

21^# 大中小发表于 2007-4-5 09:05

好漂亮哦。，谢谢，收藏了

我好像总是那么困

TOP

boooooy

初级会员

帖子: 141
体力: 138
威望: 0
离线: 566 天

22^# 大中小发表于 2007-4-5 09:28

确实漂亮！

TOP

FBI007FK

初级会员

帖子: 90
体力: 164
威望: 0
当前: 上海徐汇
离线: 119 天

23^# 大中小发表于 2007-4-9 16:22

这个漂亮的日历，如何用div+css实现呢我是菜鸟唉好久搞不定。
怎样可以插入到左侧的 div+css架构的网页呢！

TOP

max0960

中级会员

帖子: 130
体力: 429
威望: 0
离线: 75 天

24^# 大中小发表于 2007-4-10 00:04

非常好,顶一个

TOP

hucunzhi

初级会员

帖子: 70
体力: 128
威望: 0
离线: 23 天

25^# 大中小发表于 2007-4-10 08:52

非常好，收藏了。谢谢！

非常好，收藏了。谢谢！谢谢楼主

我就是我

TOP

moweijun

高级会员

帖子: 179
体力: 517
威望: 0
当前: 海南海口
离线: 72 天

26^# 大中小发表于 2007-4-10 08:57

很好%%%%%

QQ：34415097

TOP

xiaotian_s

六月阳光

高级会员

帖子: 620
体力: 561
威望: 2
当前: 北京东城区

专长 前端制作,JS,AS

27^# 大中小发表于 2007-4-10 09:26

在FF下变样了!

背景显得小了些,而且显示不了月份的背景!

得调调!

[ 本帖最后由 xiaotian_s 于 2007-4-10 09:27 编辑 ]

TOP

wdm1984

小猫钓鱼

中级会员

帖子: 278
体力: 235
威望: 0
当前: 海南海口
离线: 805 天

28^# 大中小发表于 2007-4-16 10:12

漂亮漂亮极了

TOP

ljy6957

初级会员

帖子: 64
体力: 140
威望: 0
当前: 湖北武汉
离线: 16 天

29^# 大中小发表于 2007-4-16 11:00

漂亮，除了漂亮还系漂亮！

收藏！

TOP

chensaidong

初级会员

帖子: 24
体力: 62
威望: 0
离线: 886 天

30^# 大中小发表于 2007-4-16 12:41

bu uco不错很好
收藏

TOP