请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 发一个比较漂亮的日历

发新帖

查看: 31956|回复: 62

发一个比较漂亮的日历 [复制链接]

mozart0　楼主

匪徒田老大

帖子: 2382
体力: 13417
威望: 180

发表于 2007-3-12 18:11:18 |显示全部楼层

很久以前的东西，整理文件时偶然发现
好像也是帮论坛上某人写的，外观的设计者是当时的某位版主
写得有点乱
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 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

居处恭执事敬与人忠

西部数码顶级域名注册商39元抢注！

使用道具举报

newsdyanshan　

帖子: 16
体力: 23
威望: 0

发表于 2007-3-12 20:15:41 |显示全部楼层

非常好，收藏了。谢谢！

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

阿飚

帖子: 368
体力: 479
威望: 0
居住地: 湖北省武汉市

发表于 2007-3-12 21:48:02 |显示全部楼层

赞个~

帆已扬，起航~

使用道具举报

帖子: 78
体力: 489
威望: 0

发表于 2007-3-12 21:58:14 |显示全部楼层

有点flash的感觉。

使用道具举报

柠檬水

帖子: 827
体力: 1566
威望: 0

发表于 2007-3-12 22:18:58 |显示全部楼层

收藏非常感谢楼主

使用道具举报

帖子: 93
体力: 527
威望: 0

发表于 2007-3-12 22:25:18 |显示全部楼层

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

使用道具举报

笑笑十年

银牌会员 

帖子: 1171
体力: 2760
威望: 1

发表于 2007-3-12 23:28:28 |显示全部楼层

expression 还有这个好效果帅气

豁达是男人的海

使用道具举报

冰鸟

帖子: 201
体力: 514
威望: 3

发表于 2007-3-13 08:43:58 |显示全部楼层

我这里完全不能用啊。点什么都没反应。
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] » <a href="forum-1-1.html">Ç°Ì¨ÖÆ×÷Óë½Å±¾×¨À¸</a> » ·¢Ò»¸ö±È½ÏÆ¯ÁÁµ...

复制代码

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

使用道具举报

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-3-13 08:56:44 |显示全部楼层

楼主已经标明ie only了……

子叶：子乌的叶子
子乌书简

使用道具举报

冰鸟

帖子: 201
体力: 514
威望: 3

发表于 2007-3-13 13:21:17 |显示全部楼层

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

哦，抱歉，还真没看到。

使用道具举报

帖子: 146
体力: 237
威望: 0
居住地: 浙江省杭州市

发表于 2007-3-13 13:39:06 |显示全部楼层

淡入淡出的.喜欢

使用道具举报

帖子: 75
体力: 131
威望: 0

发表于 2007-3-13 14:08:48 |显示全部楼层

不错，收藏先！

GodYe.Com

使用道具举报

帖子: 39
体力: 120
威望: 0

发表于 2007-3-13 14:13:07 |显示全部楼层

很漂亮，收藏了

使用道具举报

帖子: 169
体力: 577
威望: 0
居住地: 四川省成都市

发表于 2007-3-13 14:15:43 |显示全部楼层

很是漂亮啊

使用道具举报

ztwz　

帖子: 22
体力: 44
威望: 0

发表于 2007-3-13 14:21:56 |显示全部楼层

非常谢谢。
收藏！

使用道具举报

帖子: 47
体力: 253
威望: 0
居住地: 四川省成都市

发表于 2007-4-2 17:34:25 |显示全部楼层

精彩！！！！支持你！

使用道具举报

帖子: 12
体力: 31
威望: 0

发表于 2007-4-2 19:25:11 |显示全部楼层

不错啊啊

使用道具举报

帖子: 1011
体力: 1143
威望: 0
居住地: 河南省郑州市

发表于 2007-4-4 21:27:53 |显示全部楼层

停美的!

使用道具举报

辉色天空　

帖子: 51
体力: 164
威望: 0

发表于 2007-4-4 22:35:13 |显示全部楼层

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

空间便宜卖QQ79974181

使用道具举报

帖子: 93
体力: 339
威望: 0

发表于 2007-4-5 08:57:37 |显示全部楼层

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

使用道具举报

qingwubaobao　

轻舞宝宝

帖子: 1376
体力: 4108
威望: 0

发表于 2007-4-5 09:05:55 |显示全部楼层

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

我好像总是那么困

使用道具举报

帖子: 140
体力: 143
威望: 0

发表于 2007-4-5 09:28:17 |显示全部楼层

确实漂亮！

使用道具举报

帖子: 93
体力: 339
威望: 0

发表于 2007-4-9 16:22:43 |显示全部楼层

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

使用道具举报

帖子: 131
体力: 875
威望: 0

发表于 2007-4-10 00:04:41 |显示全部楼层

非常好,顶一个

使用道具举报

帖子: 70
体力: 133
威望: 0

发表于 2007-4-10 08:52:22 |显示全部楼层

非常好，收藏了。谢谢！

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

我就是我

使用道具举报

帖子: 183
体力: 1017
威望: 0
居住地: 海南省海口市

发表于 2007-4-10 08:57:03 |显示全部楼层

很好%%%%%

QQ：34415097

使用道具举报

六月阳光

帖子: 869
体力: 2199
威望: 2

发表于 2007-4-10 09:26:01 |显示全部楼层

在FF下变样了!

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

得调调!

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

使用道具举报

小猫钓鱼

帖子: 276
体力: 240
威望: 0
居住地: 海南省海口市

发表于 2007-4-16 10:12:12 |显示全部楼层

漂亮漂亮极了

使用道具举报

帖子: 64
体力: 145
威望: 0
居住地: 湖北省武汉市

发表于 2007-4-16 11:00:39 |显示全部楼层

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

收藏！

使用道具举报

帖子: 24
体力: 67
威望: 0

发表于 2007-4-16 12:41:24 |显示全部楼层

bu uco不错很好
收藏

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 13:19 , Processed in 0.169595 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部