精美js日历控制代码效果

时间：2022-06-25 22:16:54 编辑：袖梨来源：一聚教程网

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

<base href="http://111com.net/">
<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-
	}
.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-
	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)+''+
		'	<table class="cal_1" cellspacing=0 cellpadding=0>'+
		'		<tr>';
				for(var i=0;i<7;i++)
					str+='<th>'+this.DayName[i]+'';
				str+=
		'		'+
		'		<tr><td colspan=7 align=left id=oMain style="filter:blendtrans(duration=0.5)">'+
						this.drawTable()+
		'		<tr>'+
		'		<td colspan=7> '+
		'		'+
		'	'+
		'	<div class="d5 cc">'+
		'		<table cellpadding=0 cellspacing=0><tr>'+
		'			<td><img  id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgYear(-1)">'+
		'			<td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oYear>'+this.year+''+
		'			<td><img  id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgYear(1)"">'+
		'		'+
		'	'+
		'	<div class="d6 cc">'+
		'		<table cellpadding=0 cellspacing=0><tr>'+
		'			<td><img  id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgMonth(-1)">'+
		'			<td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oMonth>'+this.MonthName[this.month]+''+
		'			<td><img  id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgMonth(1)">'+
		'		'+
		'	'+
		'	<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+'';
				str+=
		'	'+
		'	<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]+'';
				str+=
		'	'+
		'';
		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 width=23><td width=23>"+
			"<td width=23><td width=20><td><td>";
		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> "
				if(k>day&&k<=m+day){
					ts="<td";
					if(j==0||j==6)
						ts+=" style='color:red'";
					ts+=">"+(k-day)+"";
					}
				r+=ts;
				}
			r+="";
			}
		r+="";
		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>

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

推荐专题

最新下载

热门教程

精美js日历控制代码效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程