JavaScript虽然不是工作中的服务端语言,但是在做客户端验证的时候会经常用到,把遇见的问题贴到blog上方便查阅。
这个页面是把开始时间和结束时间之间的时间段限制在7天内,如果查询时间段超过7天就提示。
别看一个小小的功能,用到了js的
1。时间比较
2。得到指定日期的时间
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function resetEndTime(arg){
//获得startTime和endTime的时间值
var startTime=document.all.item("startTime").value;
var endTime=document.all.item("endTime").value;
//分别得出它们的year,month,day
var sYear=startTime.substring(0,4);
var sMonth=startTime.substring(5,7);
var sDay=startTime.substring(8,10);
var eYear=endTime.substring(0,4);
var eMonth=endTime.substring(5,7);
var eDay=endTime.substring(8,10);
//把startTime和endTime转化为Date
var sDate=new Date();
var eDate=new Date();
sDate.setFullYear(sYear);
sDate.setMonth(sMonth);
sDate.setDate(sDay);
eDate.setFullYear(eYear);
eDate.setMonth(eMonth);
eDate.setDate(eDay);
//设置7天后的日期
var calYear;
var calMonth;
var calDay;
//这里是重点地方,sDate.getTime()是获得以数字表示的精确到微秒的(millisecond)时间。
//6*1000*60*60*24是6天的微秒累计值,相加就是得到6天后时间微秒表示的数值
var calDate=new Date((sDate.getTime()+6*1000*60*60*24));
calMonth=sMonth;
calYear=sYear;
//因为js的月是0-11,没有12,0就代表12,而且当月为12时,js的年自动+1,所以要设置要显示
//月为12,年要-1。注意,这只是设置显示的值,当前时间还是对的。
if(calDate.getMonth()==0){
calMonth=12;
calYear=calDate.getFullYear()-1;
}
window.alert("开始时间: "+sDate.getFullYear()+"年"+sDate.getMonth()+"月"+sDate.getDate()+"日");
window.alert("结束时间: "+eDate.getFullYear()+"年"+eDate.getMonth()+"月"+eDate.getDate()+"日");
window.alert("6天之后的时间: "+calYear+"年"+calMonth+"月"+calDate.getDate()+"日");
window.alert("结束时间小时数/6天后时间小时数"+
parseInt(eDate.getTime()/3600000)+"/"+parseInt(calDate.getTime()/3600000));
if(parseInt(eDate.getTime()/3600000)>parseInt(calDate.getTime()/3600000)){
window.alert("结束时间比开始时间的6天后的时间大..");
return false;
}else{
window.alert("结束时间比开始时间的6天后的时间小");
return true;
}
}
</script>
<BODY>
<form>
<table>
<tr>
<td>start time</td>
<td><input type="text" name="startTime"/></td>
<td>(input format is yyyy-MM-dd)</td>
</tr>
<tr>
<td>end time</td>
<td><input type="text" name="endTime" /></td>
<td>(input format is yyyy-MM-dd)</td>
</tr>
<tr>
<td>
search
</td>
<td>
<input type="submit" value="search" οnclick="return resetEndTime(this);"/>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>