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

本文链接：https://blog.csdn.net/xiayanjun/article/details/5619852

JS文件：

//
//对下拉列表框年的计算！
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' οnchange='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' οnchange='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=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
  }
  timeCyc.innerHTML="<select id='selectCyc' οnchange='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' οnchange='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' οnchange='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' οnchange='selectquarter()'>"+selectHTML+"</select>";
   selectquarter();
}
}

}

/
//半年计划

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' οnchange='selecthalfYear()'>"+selectHTML+"</select>";
   selecthalfYear();
}else{

  var selectHTML="";
   selectHTML=selectHTML+"<option value='"+2+"'>下半年</option>";
   timeCyc.innerHTML="<select id='selectCyc' οnchange='selecthalfYear()'>"+selectHTML+"</select>";
   selecthalfYear();
}
}

///
//显示时间的间隔的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" οnchange="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" οnchange="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" οnclick="topCyc()" class="ButtonCss">上个周期的计划内容</button></td>
    <td colspan="2"><button name="topCycSum" οnclick="planTopSum()" class="ButtonCss">上个周期的计划总结</button></td>
    <td><button name="planCommit" οnclick="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>