发信人: dongbao()
整理人: dongbao(2000-09-17 18:05:30), 站内信件
|
目前在动态网页上使用时间已经是一个必须，但由于时间具有很多的特殊性，所
以判断和录入都很麻烦，其中可能包括的问题有：时间的有效性检测、有效时间
范围的检测、输入界面的美观等等（这个程序都可以解决），如果我们自己来做
这个工作将花费很多时间，并且没有效率。所以我把我做的一个用div做的日历给
大家，希望大家可以利用这个用javascript写的程序来完善自己的程序。但别忘
了是Adong无偿提供的：:-)嘻嘻(本程序编写和调试时间为1.5天包括写这篇文章
，如果大家在使用过程中发现有什么问题请写信给我mailto:lidong.zhang@263.
net),下面就是我的程序，我就不做具体介绍了，自己体会吧：（本程序不能在n
etscape上运行，但稍做改动就可以实现，需要的话大家可以自己动手做。:-)）
cele_date.js
/*
本程序由Adong制作 2000年8月22日 mailto:[email protected]
*/
//有效的时间范围
var date_start,date_end,g_object
var disble_ground=new Image;
var a1=new Image;
var a2=new Image;
a1.src="a1.gif";
a2.src="a2.gif";
disble_ground.src="bg.gif";
//mode :时间变换的类型0-年 1-月 2-直接选择月
function change_date(temp,mode)
{var t_month,t_year
if (mode){
if(mode==1)
t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
else
t_month=parseInt(temp)
if (t_month<cele_date_month.options(0).text) {
cele_date_month.value=cele_date_month.options(cele_date_mo
nth.length-1).text;
change_date(parseInt(cele_date_year.value,10)-1,0);
}
else{
if (t_month>cele_date_month.options(cele_date_month.length
-1).text){
cele_date_month.value=cele_date_month.options(0).text;
change_date(parseInt(cele_date_year.value,10)+1,0);
}
else
{cele_date_month.value=t_month;
set_cele_date(cele_date_year.value,cele_date_month.va
lue);
}
}
}
else{
t_year=parseInt(temp,10);
if (t_year<cele_date_year.options(0).text) {
cele_date_year.value=cele_date_year.options(0).text;
set_cele_date(cele_date_year.value,1);
}
else{
if (parseInt(t_year,10)>parseInt(cele_date_year.options(ce
le_date_year.length-1).text,10)){
cele_date_year.value=cele_date_year.options(cele_date_
year.length-1).text;
set_cele_date(cele_date_year.value,12);
}
else
{cele_date_year.value=t_year;
set_cele_date(cele_date_year.value,cele_date_month.va
lue);
}
}
}
}
//初始化日历
function init(d_start,d_end)
{
var temp_str;
var i=0
var j=0
date_start=new Date(2000,7,1)
date_end=new Date(2004,8,1)
//必须要有内容（奇怪）
document.writeln("<div name=\"cele_date\" id=\"cele_date\" style
=\"display:none\" style=\"LEFT: 69px; POSITION: absolute; TOP: 159p
x\" onClick=\"event.cancelBubble=true;\" > </div>");
window.cele_date.innerHTML="";
temp_str="<table border=1><tr><td colspan=7>";
temp_str+="<img id=s_a1 name=s_a1 src=\"a1.gif\" language=\"javas
cript\" onclick=\"change_date(-1,1)\" >";//左面的箭头
temp_str+=""//年
temp_str+="<select name=\"cele_date_year\" id=\"cele_date_year\"
language=\"javascript\" onchange=\"change_date(this.value,0)\">"
for (i=2000;i<=2005;i++)
{
temp_str+="<OPTION value=\""+i.toString()+"\">"+i.toString()+"</O
PTION>";
}
temp_str+="</select> ";
temp_str+=""//月
temp_str+="<select name=\"cele_date_month\" id=\"cele_date_month\
" language=\"javascript\" onchange=\"change_date(this.value,2)\" >"
for (i=1;i<=12;i++)
{
temp_str+="<OPTION value=\""+i.toString()+"\">"+i.toString()+"</O
PTION>";
}
temp_str+="</select> ";
temp_str+=""//右箭头
temp_str+="<img id=s_a2 name=s_a2 src=\"a2.gif\" language=\"javas
cript\" onclick=\"change_date(1,1)\" >";
temp_str+="</td></tr><tr><td>"
temp_str+="Su</td><td>";temp_str+="Mo</td><td>"; temp_str+="Tu</t
d><td>"; temp_str+="We</td><td>"
temp_str+="Th</td><td>";temp_str+="Fr</td><td>"; temp_str+="Sa</t
d></tr>";
for (i=1 ;i<=6 ;i++)
{
temp_str+="<tr>";
for(j=1;j<=7;j++){
temp_str+="<td name=\"c"+i+"_"+j+"\"id=\"c"+i+"_"+j+"\" st
yle=\"CURSOR: hand\" language=\"javascript\" onclick=\"td_click(this)
\"> </td>"
}
temp_str+="</tr>"
}
temp_str+="</td></tr></table>";
window.cele_date.innerHTML=temp_str;
document.all("s_a1").src=a1.src
document.all("s_a2").src=a2.src
}
function set_cele_date(year,month)
{
var i,j,p,k
var nd=new Date(year,month-1,1);
event.cancelBubble=true;
cele_date_year.value=year;
cele_date_month.value=month;
k=nd.getDay()-1
for (i=1;i<=6;i++)
for(j=1;j<=7;j++)
{
eval("c"+i+"_"+j+".innerHTML=\"\"");
eval("c"+i+"_"+j+".bgColor=\"white\"");
eval("c"+i+"_"+j+".style.cursor=\"hand\"");
}
while(month-1==nd.getMonth())
{ j=(nd.getDay() +1);
p=parseInt((nd.getDate()+k) / 7)+1;
eval("c"+p+"_"+j+".innerHTML="+"\""+nd.getDate()+"\"");
if (nd>date_end || nd<date_start)
{
eval("c"+p+"_"+j+".style.backgroundImage.src=disble_ground.src")
;
eval("c"+p+"_"+j+".bgColor=\"DarkGray\"");
eval("c"+p+"_"+j+".style.cursor=\"text\"");
}
nd=new Date(nd.valueOf() + 86400000)
}
}
//s_object：点击的对象；d_start-d_end有效的时间区段；需要存放值的控件；
function show_cele_date(eP,d_start,d_end,t_object)
{
var s,cur_d
var eT = eP.offsetTop;
var eH = eP.offsetHeight;
var dH = window.cele_date.style.pixelHeight;
var sT = document.body.scrollTop;
event.cancelBubble=true;
window.cele_date.style.left = eP.offsetLeft;
if(eT-dH >= sT && eT+eH+dH > document.body.clientHeight+sT)
window.cele_date.style.top = eT-dH;
else window.cele_date.style.top = eT+eH;
s=d_start.split("-")
date_start=new Date(s[0],s[1]-1,s[2])
s=d_end.split("-")
date_end=new Date(s[0],s[1]-1,s[2])
g_object=t_object
cur_d=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
window.cele_date.style.display="block";
}
function td_click(t_object)
{
var t_d
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,
10)<=31 )
{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.i
nnerHTML)
if (t_d<=date_end && t_d>=date_start)
{g_object.value=cele_date_year.value+"-"+cele_date_month.value+"-"+t_o
bject.innerHTML
window.cele_date.style.display="none";}
}
}
function h_cele_date()
{
window.cele_date.style.display="none";
}
HTML文件如下：
<html>
<head>
<title>cele date</title>
<script language="javascript" src="cele_date.js">
</script>
</head>
<body onclick="h_cele_date()">
<script language="javascript">
init();
</script>
<INPUT id=text1 name=text1 style="CURSOR: text" >
<INPUT type="button" value="select date" id=button1 name=button1 langu
age="javascript" onclick="show_cele_date(button1,'2001-1-1','2004-1-1'
,text1)">
</body>
</html>
--
明知道爱你不会有结果 为何还如此执著
为你付出所有 你竟不顾一切就走
明知道爱你只是继续错 为何还如此脆弱
已经习惯有你 已经不能將你摆脱
也许当一场梦 梦醒一切都随风
※ 来源:．月光程序代码网 http://www.moon-soft.com．[FROM: 211.101.144.65]
|
|