日歷javascript_求一款js做的時間日歷控制項

① javascript實現的日歷控制項，為什麼不顯示

日期控制項，主要使用js的Date對象。下面是簡單是日期控制項，僅供參考：

<style>
*{margin:0;padding:0;}
.calander{position:relative;width:210px;border:1pxsolidred;margin:50pxauto;}
.calandera{position:absolute;top:0;height:40px;line-height:40px;}
.calander.prev{left:0;padding-left:10px;}
.calander.next{right:0;padding-right:10px;}
.calanderspan{display:block;height:40px;line-height:40px;text-align:center;font-weight:bold;}
.calanderul,.calanderol{overflow:hidden;}
.calanderli{float:left;width:30px;height:30px;line-height:30px;text-align:center;list-style:none;}
.calander.week{color:#f40;}
.calander.today{color:blue;}
.calander.past{color:#ccc;}
</style>
<script>
window.onload=function(){
	varoDiv=document.getElementById('calander');
	varoSpan=oDiv.getElementsByTagName('span')[0];
	varoUl=oDiv.getElementsByTagName('ul')[0];
	varoPrev=oDiv.getElementsByTagName('a')[0];
	varoNext=oDiv.getElementsByTagName('a')[1];
	
	varnow=0;
	create();
	
	oNext.onclick=function(){
		now++;
		create();
	};
	functioncreate()
	{
		oUl.innerHTML='';
		//span
		varoDate=newDate();//?
		oDate.setMonth(oDate.getMonth()+now,1);
		vary=oDate.getFullYear();
		varm=oDate.getMonth();
		oSpan.innerHTML=y+'年'+(m+1)+'月';
		
		//創建空格
		varoDate=newDate();//?
		oDate.setMonth(oDate.getMonth()+now,1);
		oDate.setDate(1);
		varweek=oDate.getDay();//0-6
		(week==0)&&(week=7);
	
		for(vari=0;i<week-1;i++)
		{
			varoLi=document.createElement('li');
			
			oUl.appendChild(oLi);
		}
		
		//創建真正日期
		varoDate=newDate();//?
		oDate.setMonth(oDate.getMonth()+now,1);
		oDate.setMonth(oDate.getMonth()+1,0);
		vartotal=oDate.getDate();
		for(vari=0;i<total;i++)
		{
			varoLi=document.createElement('li');
			
			oLi.innerHTML=i+1;	

			oUl.appendChild(oLi);
		}
		
		//處理周末
		varaLi=oUl.children;
		
		for(vari=0;i<aLi.length;i++)
		{
			if(i%7==5||i%7==6)
			{
				aLi[i].className='week';
			}
		}
		
		//今天
		if(now==0)
		{
			varoDate=newDate();
		
			for(vari=0;i<aLi.length;i++)
			{
				if(aLi[i].innerHTML==oDate.getDate())
				{
					aLi[i].className='today';
				}
				elseif(aLi[i].innerHTML<oDate.getDate())
				{
					aLi[i].className='past';
				}
			}
		}
		
	}
};
</script>
</head>
<body>
	<divclass="calander"id="calander">
		<ahref="javascript:;"class="prev">←</a>
		<ahref="javascript:;"class="next">→</a>
		
		<span>2015年04月</span>
		<ol>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<liclass="week">六</li>
			<liclass="week">日</li>
		</ol>
		<ul>
		</ul>
	</div>
</body>

② 求一款js做的時間日歷控制項

這是我找到的一個js做的日歷，不知道是不是你要的，裡面有包含時間，其實在日歷裡面加時間也是比較簡單的，只要調用DATE的方法就可以了，希望對你有用。下面是代碼段，效果圖附上。

<html>

<head>

<SCRIPTLANGUAGE="JavaScript"TYPE="text/javascript">

//定義月歷函數

functioncalendar(){

vartoday=newDate();//創建日期對象

year=today.getYear();//讀取年份

thisDay=today.getDate();//讀取當前日

//創建每月天數數組

varmonthDays=newArray(31,28,31,30,31,30,31,31,30,31,30,31);

//如果是閏年，2月份的天數為29天

if(((year%4==0)&&(year%100!=0))||(year%400==0))monthDays[1]=29;

daysOfCurrentMonth=monthDays[today.getMonth()];//從每月天數數組中讀取當月的天數

firstDay=today;//復制日期對象

firstDay.setDate(1);//設置日期對象firstDay的日為1號

startDay=firstDay.getDay();//確定當月第一天是星期幾

//定義周日和月份中文名數組

vardayNames=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

varmonthNames=newArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

//創建日期對象

varnewDate=newDate();

//創建表格

document.write("<TABLEBORDER='0'CELLSPACING='0'CELLPADDING='2'ALIGN='CENTER'BGCOLOR='#0080FF'>")

document.write("<TR><TD><tableborder='0'cellspacing='1'cellpadding='2'bgcolor='#88FF99'>");

document.write("<TR><thcolspan='7'bgcolor='#C8E3FF'>");

//顯示當前日期和周日

document.writeln("<FONTSTYLE='font-size:9pt;Color:#FF0000'>"+newDate.getYear()+"年"+monthNames[newDate.getMonth()]+""+newDate.getDate()+"日"+dayNames[newDate.getDay()]+"</FONT>");

//顯示月歷表頭

document.writeln("</TH></TR><TR><THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>日</FONT></TH>");

document.writeln("<thbgcolor='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>一</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>二</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>三</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>四</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>五</FONT></TH>");

document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>六</FONT></TH>");

document.writeln("</TR><TR>");

//顯示每月前面的"空日"

column=0;

for(i=0;i<startDay;i++){

document.writeln("<TD><FONTSTYLE='font-size:9pt'></FONT></TD>");

column++;

}

//如果是當前日就突出顯示(紅色)，否則正常顯示(黑色)

for(i=1;i<=daysOfCurrentMonth;i++){

if(i==thisDay){

document.writeln("</TD><TDALIGN='CENTER'><FONTSTYLE='font-size:9pt;Color:#ff0000'><B>")

}

else{

document.writeln("</TD><TDBGCOLOR='#88FF99'ALIGN='CENTER'><FONTSTYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000'>");

}

document.writeln(i);

if(i==thisDay)document.writeln("</FONT></TD>")

column++;

if(column==7){

document.writeln("<TR>");

column=0;

}

document.writeln("<TR><TDCOLSPAN='7'ALIGN='CENTER'VALIGN='TOP'BGCOLOR='#0080FF'>")

document.writeln("<FORMNAME='time'onSubmit='0'><FONTSTYLE='font-size:9pt;Color:#ffffff'>")

//顯示當前時間

document.writeln("當前時間:<INPUTTYPE='Text'NAME='textbox'ALIGN='TOP'></FONT></TD></TR></TABLE>")

document.writeln("</TD></TR></TABLE></FORM>");

}

</SCRIPT>

<SCRIPTLANGUAGE="JavaScript">

//初始化控制變數

vartimerID=null;

vartimerRunning=false;

//定義時間顯示函數

functionstoptime(){

if(timerRunning)

clearTimeout(timerID);

timerRunning=false;}

//定義顯示時間函數

functionshowtime(){

varnewDate=newDate();

varhours=newDate.getHours();

varminutes=newDate.getMinutes();

varseconds=newDate.getSeconds()

vartimeValue=""+((hours>12)?hours-12:hours)

timeValue+=((minutes<10)?":0":":")+minutes

timeValue+=((seconds<10)?":0":":")+seconds

timeValue+=(hours>=12)?"下午":"上午"

document.time.textbox.value=timeValue;

timerID=setTimeout("showtime()",1000);//設置超時,使時間動態顯示

timerRunning=true;}

//顯示當前時間

functionstarttime(){

stoptime();

showtime();}

</SCRIPT>

</head>

<BODYonLoad="starttime()"TEXT="#000000"TOPMARGIN="0">

<scriptlanguage="JavaScript"type="text/javascript">

calendar();//顯示月歷

</script>

</BODY>

</html>

導航:首頁 > 編程語言 > 日歷javascript

日歷javascript

與日歷javascript相關的資料

友情鏈接