关于JS下拉列表选择时间计算时间周期的问题解决

JS文件：

 

function planCycon(){
 var selectObj=document.getElementById("planCyc");
 var index=selectObj.selectedIndex
 var va=selectObj.options[index].value;
 if(va=="year"){
  year();
 }else if(va=="week"){
  week();
 }else if(va=="month"){
  month();
 }else if(va=="quarter"){
  quarter();
 }else if(va=="halfYear")
 halfYear();
 }

////////////////////////////////////////////////////////////////////////////////////// 
 //对下拉列表框年的计算！
function year(){

 var myDate = new Date();
 var year=myDate.getFullYear();
 //alert(year);   //获取完整的年份(4位,2010)
 var timeCyc= document.getElementById("timeCyc");
 //var label="<label> 年  ["+year+"-1-1——"+year+"-12-31]</label>"
 var label="["+year+"-1-1——"+year+"-12-31]"
 timeCyc.innerHTML="<select  disabled='disabled'><option>"+year+"</option></select>年";
 
 document.getElementById("starTime").value=year+"/1/1";
 document.getElementById("endTime").value=year+"/12/31";
 setLabel(label);
}

 

//////////////////////////////////////////////////////////////////////////////////////////
//对下拉列表框周的计算
function week(){
 //获取当前系统时间
 var myDate = new Date();
 var year=myDate.getFullYear();  //获取完整的年份(4位,2010)
 
 //根据两个日期获得间隔多少周
 //var t=getweek("2010/1/1",new Date("2010/12/1"));
 var t=getweek(year+"/1/1",new Date());
 //alert("第"+t+"周");
 
 var timeCyc= document.getElementById("timeCyc");
 
 var selectHTML="";
 for(var i=t;i<54;i++){
   selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"周</option>";
  }
  
 timeCyc.innerHTML="<select id='selectCyc' onchange='selectCycon()'>"+selectHTML+"</select>";
 selectCycon();
 
 
}

 //获得并显示第几周与7天后的日期
function selectCycon(){
 var selectObj=document.getElementById("selectCyc");
 var index=selectObj.selectedIndex
 var timeValue=selectObj.options[index].value;
 
 var myDate = new Date();
 var year=myDate.getFullYear();
 
 //通过getXDate(year,第几周,星期几)方法得到第几周的具体日期
 var nowyear=getXDate(year,timeValue,1).getFullYear();
 var nowmonth=getXDate(year,timeValue,1).getMonth();
 var nowdate=getXDate(year,timeValue,1).getDate();
 //在得到的具体日期上加上7天
 var date7=new Date(nowyear,nowmonth+1,String(nowdate+7));
 
 //拼写显示字符串
 var label="["+nowyear+"-"+(nowmonth+1)+"-"+nowdate+"——"+date7.getFullYear()+"-"+date7.getMonth()+"-"+date7.getDate()+"]"
 
 document.getElementById("starTime").value=nowyear+"/"+(nowmonth+1)+"/"+nowdate;
 document.getElementById("endTime").value=date7.getFullYear()+"/"+date7.getMonth()+"/"+date7.getDate();
 setLabel(label);
 
}
 

 

 
 //根据两个时间的差获得中间间隔多少个周，在初始第一周时不满一周也按1周计算。
 //供前端的week(),selectCycon()方法使用。
function getweek(a,b)
{
 var d1=new Date(a).getTime();
 var d2=new Date(b).getTime();
 if(d1>d2)
 {
  d1=d1+d2;
  d2=d1-d2;
  d1=d1-d2;
 }
 var differday=((d2-d1)/1000/3600/24);
 var d=new Date(d1).getDay();
 if(d!=0)
 {
  differday=differday+d;
 }
 if(differday%7==0)
 {
  differday+=7;
 }
 return Math.ceil(differday/7);
}

//通过getXDate(year,weeks,weekDay)和getNextDate(nowDate,weekDay)得到
//这个方法将取得某年(year)第几周(weeks)的星期几(weekDay)的日期
//供selectCycon()方法调用
function getXDate(year,weeks,weekDay){
//用指定的年构造一个日期对象，并将日期设置成这个年的1月1日
//因为计算机中的月份是从0开始的,所以有如下的构造方法
var date = new Date(year,"0","1");

//取得这个日期对象 date 的长整形时间 time
var time = date.getTime();

//将这个长整形时间加上第N周的时间偏移
//因为第一周就是当前周,所以有:weeks-1,以此类推
//7*24*3600000 是一星期的时间毫秒数,(JS中的日期精确到毫秒)
time+=(weeks-1)*7*24*3600000;

//为日期对象 date 重新设置成时间 time
date.setTime(time);
return getNextDate(date,weekDay);
}
//这个方法将取得 某日期(nowDate) 所在周的星期几(weekDay)的日期
function getNextDate(nowDate,weekDay){
//0是星期日,1是星期一,...
weekDay%=7;
var day = nowDate.getDay();
var time = nowDate.getTime();
var sub = weekDay-day;
time+=sub*24*3600000;
nowDate.setTime(time);
return nowDate;
}

 

 //根据两个时间的差获得中间间隔多少个周，在初始第一周时不满一周也按0周计算。
 //没有用到此方法，可用于后端维护使用
function show()  
  {    
  var CheckDate=new Date("2010",String(4-1),"28");  
  var yearBegin=new Date(2010,0,0);  
  alert(Math.floor(((CheckDate-yearBegin)/86400000+parseInt(("0654321".charAt(CheckDate.getDay()))))/7))  
  }

//////////////////////////////////////////////////////////////////////////
//月的计算

function month(){
 
 //alert("月的操作！");
 
 var myDate = new Date(new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate());
 var month=myDate.getMonth(); 
 
 var timeCyc= document.getElementById("timeCyc");
 
 var selectHTML="";
 for(var i=month;i<=12;i++){
   selectHTML=selectHTML+"<option value='"+i+"'>"+i+"月</option>";
  }
  
 timeCyc.innerHTML="<select id='selectCyc' onchange='selectmonth()'>"+selectHTML+"</select>";
 selectmonth();
 
}

function selectmonth(){
 var selectObj=document.getElementById("selectCyc");
 var index=selectObj.selectedIndex
 var timeValue=selectObj.options[index].value;
 
 var date1=new Date(new Date().getFullYear(),(timeValue-1),String(1));
 var dateyear=date1.getFullYear();
 var datemonth=date1.getMonth();
 var datedate=date1.getDate();
 //alert(date1.getMonth());
 var date2=new Date(dateyear,datemonth+1,datedate-1);
 //对日期月份操作时，月份从0月开始计算
 var label="["+dateyear+"-"+(datemonth+1)+"-"+datedate+"——"+date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate()+"]"
 
 document.getElementById("starTime").value=dateyear+"/"+(datemonth+1)+"/"+datedate;
 document.getElementById("endTime").value=date2.getFullYear()+"/"+(date2.getMonth()+1)+"/"+date2.getDate();
 setLabel(label);
}

 

//////////////////////////////////////////////////////////////////////////
//季度操作

function quarter(){

 //alert("季度操作！");
 var timeCyc= document.getElementById("timeCyc");
 
 var qDate=new Date();
 var qMonth=qDate.getMonth();
 if(qMonth<3){
  alert("第一季度");
  
  var selectHTML="";
  for(var i=1;i<=4;i++){
   selectHTML=selectH
4000
TML+"<option value='"+i+"'>第"+i+"季度</option>";
  }
  timeCyc.innerHTML="<select id='selectCyc' onchange='selectquarter()'>"+selectHTML+"</select>";
  selectquarter();
 }else if(qMonth>2&&qMonth<6){
   var selectHTML="";
   for(var i=2;i<=4;i++){
   selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
   }
   timeCyc.innerHTML="<select id='selectCyc' onchange='selectquarter()'>"+selectHTML+"</select>";
   selectquarter();
 }else if(qMonth>5&&qMonth<9){
   var selectHTML="";
   for(var i=3;i<=4;i++){
   selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
   }
   timeCyc.innerHTML="<select id='selectCyc' onchange='selectquarter()'>"+selectHTML+"</select>";
   selectquarter();
 }else if(qMonth>8){
   var selectHTML="";
   for(var i=4;i<=4;i++){
   selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
   }
   timeCyc.innerHTML="<select id='selectCyc' onchange='selectquarter()'>"+selectHTML+"</select>";
   selectquarter();
 }
}

 

function selectquarter(){
 var selectObj=document.getElementById("selectCyc");
 var index=selectObj.selectedIndex
 var timeValue=selectObj.options[index].value;
 var myDate = new Date();
 var label="";
 if(timeValue==1){
  label=label+"["+myDate.getFullYear()+"-1-1——"+myDate.getFullYear()+"-3-31]";
  
  document.getElementById("starTime").value=myDate.getFullYear()+"/1/1";
  document.getElementById("endTime").value=myDate.getFullYear()+"/3/31";
  
  setLabel(label);
 }else if(timeValue==2){
  label=label+"["+myDate.getFullYear()+"-4-1——"+myDate.getFullYear()+"-6-30]";
  
  document.getElementById("starTime").value=myDate.getFullYear()+"/4/1";
  document.getElementById("endTime").value=myDate.getFullYear()+"/6/30";
  setLabel(label);
 }else if(timeValue==3){
  label=label+"["+myDate.getFullYear()+"-7-1——"+myDate.getFullYear()+"-9-30]";
  
  document.getElementById("starTime").value=myDate.getFullYear()+"/7/1";
  document.getElementById("endTime").value=myDate.getFullYear()+"/9/30";
  setLabel(label);
 }else if(timeValue==4){
  label=label+"["+myDate.getFullYear()+"-10-1——"+myDate.getFullYear()+"-12-31]";
  
  document.getElementById("starTime").value=myDate.getFullYear()+"/10/1";
  document.getElementById("endTime").value=myDate.getFullYear()+"/12/31";
  setLabel(label);
 }

 }

/////////////////////////////////////////////////////////////////////////
//半年计划

function halfYear(){

 //alert("半年计划！");
 var timeCyc= document.getElementById("timeCyc");
 
 var hDate=new Date();
 var hMonth=hDate.getMonth();
 if(hMonth<6){
  var selectHTML="";
   selectHTML=selectHTML+"<option value='"+1+"'>上半年</option>";
   selectHTML=selectHTML+"<option value='"+2+"'>下半年</option>";
   timeCyc.innerHTML="<select id='selectCyc' onchange='selecthalfYear()'>"+selectHTML+"</select>"; 
   selecthalfYear();
 }else{
  
  var selectHTML="";
   selectHTML=selectHTML+"<option value='"+2+"'>下半年</option>";
   timeCyc.innerHTML="<select id='selectCyc' onchange='selecthalfYear()'>"+selectHTML+"</select>"; 
   selecthalfYear();
 }
}

function selecthalfYear(){
 var selectObj=document.getElementById("selectCyc");
 var index=selectObj.selectedIndex
 var timeValue=selectObj.options[index].value;
 var myDate = new Date();
 var label="";
 if(timeValue==1){
  label=label+"["+myDate.getFullYear()+"-1-1——"+myDate.getFullYear()+"-6-30]";
  
  document.getElementById("starTime").value=myDate.getFullYear()+"/1/1";
  document.getElementById("endTime").value=myDate.getFullYear()+"/6/30";
  
  setLabel(label);
 }else if(timeValue==2){
  label=label+"["+myDate.getFullYear()+"-7-1——"+myDate.getFullYear()+"-12-31]";
  
  document.getElementById("starTime").value=myDate.getFullYear()+"/7/1";
  document.getElementById("endTime").value=myDate.getFullYear()+"/12/31";
  setLabel(label);
  }
 }

 

///////////////////////////////////////////////////////////////////////
//显示时间的间隔的label
function setLabel(label){
 document.getElementById("showTime").innerHTML=label;
 }

 

 

 

 

 

JSP:文件

 

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>planEnact</title>

<jsp:include page="/common/jsp/meta.jsp" />
 <script type='text/javascript' src="planEnact.js"></script>
 <link type="text/css" href="/common/js/jquery/jquery.ui.all.css" rel="stylesheet" />
  
</head>

<body>
<form action="" name="f0">
<table border="0">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>计划标题：</td>
    <td colspan="4"><input type="text" name="planTitle" id="planTitle" class="text_short" style="width:80%;"/><font color="red">*</font></td>
    <td></td>
  </tr>
 
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td></td>
  </tr>
 
  <tr>
    <td align="right">计划类型：</td>
    <td><select name="planType" id="planType" onchange="selecton()">
    <option id="type" value="0">-请选择-</option>
    </select><font color="red">*</font></td>
    <td align="right">计划周期：</td>
    <td align="left"><select name="planCyc" id="planCyc" onchange="planCycon()">
    <option id="cyc" value="0">-请选择-</option>
    <option id="cyc" value="week">周计划</option>
    <option id="cyc" value="month">月计划</option>
    <option id="cyc" value="quarter">季度计划</option>
    <option id="cyc" value="halfYear">半年计划</option>
    <option id="cyc" value="year">年计划</option>
    </select><font color="red">*</font></td>
    <td colspan="2"><span id="timeCyc"></span>    <label id="showTime" name="showTime"></label>
     <input type="hidden" id="starTime" name="starTime">
     <input type="hidden" id="endTime" name="endTime">
    </td>
   
  </tr>
 
    <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
   
  </tr>
 
  <tr>
    <td colspan="2"><button name="topCycContent" onclick="topCyc()" class="ButtonCss">上个周期的计划内容</button></td>
    <td colspan="2"><button name="topCycSum" onclick="planTopSum()" class="ButtonCss">上个周期的计划总结</button></td>
    <td><button name="planCommit" onclick="check()" class="ButtonCss">提交计划</button>
    </td>
    <td></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td colspan="2">计划内容<font color="red">*</font></td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td colspan="5"><div id="planList"></div>
    <div id="planDiv" style="">
     <input type="hidden" id="count">
    </div>

 

 

</table>

</form>
</body>
</html>

 

希望这些能对大家有所帮助！