梳理多个Javascript阵列

时间:2017-08-16 17:48:10

标签: javascript

我正在尝试构建一个下拉菜单,该菜单结合了两个阵列的数据 - 一个用于确定并返回即将到来的几个月的第三个星期四,另一个旨在确定并返回20个主机组织中的哪一个在每个星期四举办活动。

这就是我得到的东西 - 它得到星期四的权利,但它没有循环回来并且在第一个之后拉出连续主机的名字(2017年8月应该是host10)。非常感谢提前。

        <body>
<p id="host"></p>

<script>
var date1=new Date(2015,1,1);
var date2=new Date();
var year1=date1.getFullYear();
var year2=date2.getFullYear();
var month1=date1.getMonth();
var month2=date2.getMonth();
if(month1===0){ 
  month1++;
  month2++;
}
var numberOfMonths = (year2 - year1) * 12 + (month2 - month1 - 1); 

var message1 = "- host1";
var message2 = "- host2";
var message3 = "- host3";
var message4 = "- host4";
var message5 = "- host5";
var message6 = "- host6";
var message7 = "- host7";
var message8 = "- host8";
var message9 = "- host9";
var message10 = "- host10";
var message11 = "- host11";
var message12 = "- host12";
var message13 = "- host13";
var message14 = "- host14";
var message15 = "- host15";
var message16 = "- host16";
var message17 = "- host17";
var message18 = "- host18";
var message19 = "- host19";
var message20 = "- host20";


if (numberOfMonths%20 == 0) {document.getElementById("host").innerHTML = message1;}
if (numberOfMonths%20 == 1) {document.getElementById("host").innerHTML = message2;}  
if (numberOfMonths%20 == 2) {document.getElementById("host").innerHTML = message3;}
if (numberOfMonths%20 == 3) {document.getElementById("host").innerHTML = message4;}
if (numberOfMonths%20 == 4) {document.getElementById("host").innerHTML = message5;}
if (numberOfMonths%20 == 5) {document.getElementById("host").innerHTML = message6;}
if (numberOfMonths%20 == 6) {document.getElementById("host").innerHTML = message7;}
if (numberOfMonths%20 == 7) {document.getElementById("host").innerHTML = message8;}
if (numberOfMonths%20 == 8) {document.getElementById("host").innerHTML = message9;}
if (numberOfMonths%20 == 9) {document.getElementById("host").innerHTML = message10;}
if (numberOfMonths%20 == 10) {document.getElementById("host").innerHTML = message11;}
if (numberOfMonths%20 == 11) {document.getElementById("host").innerHTML = message12;}
if (numberOfMonths%20 == 12) {document.getElementById("host").innerHTML = message13;}
if (numberOfMonths%20 == 13) {document.getElementById("host").innerHTML = message14;}
if (numberOfMonths%20 == 14) {document.getElementById("host").innerHTML = message15;}
if (numberOfMonths%20 == 15) {document.getElementById("host").innerHTML = message16;}
if (numberOfMonths%20 == 16) {document.getElementById("host").innerHTML = message17;}
if (numberOfMonths%20 == 17) {document.getElementById("host").innerHTML = message18;}
if (numberOfMonths%20 == 18) {document.getElementById("host").innerHTML = message19;}
if (numberOfMonths%20 == 19) {document.getElementById("host").innerHTML = message20;}

document.getElementById("host").innerHTML

var mName=["January","February","March","April","May","June", "July",
"August","September","October","November","December"];
var now=new Date();
now.setDate(1);
var month=now.getMonth();
var year=now.getFullYear();
var html="<select name=\"mySelect\" >\n";
var htmla="<select name=\"mySelect\" >\n";
for(var i=0;i<19;i++){
var firstDay=now.getDay();
var secondMon=8+(1-firstDay+7)%7;
var thirdThurs=15+(4-firstDay+7)%7;
var monthName=mName[now.getMonth()];
html+="<option>"+monthName+" "+secondMon+", "+year+"</option>\n";
htmla+="<option>"+monthName+" "+thirdThurs+", "+year+" "+document.getElementById("host").innerHTML+" </option>\n";

month++;
if(month==12){
month=0;
year++;
}
now=new Date(year,month,1);
}

htmla+="</select>\n";

document.write(htmla);
</script>

1 个答案:

答案 0 :(得分:1)

据我所知,整件事情可以简化为:

var date = new Date(), result = "<select>";
date.setDate(1);

//a helper function to get the host, may be inlined
function getHost(date){
  var hosts = ["adam","jack"];

 return hosts[ (date.getFullYear()*12 + date.getMonth()) % hosts.length ];
}
//a helper to beautify dates ( may be inlined)
function beautify(date){
 return date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
}

for(var i = 0; i < 20; i++){ //show 20
 //get the third thursday:
 date.setDate(date.getDate()-date.getDay()+14+4);
 //add an option:
 result +=
 `<option> 
   ${beautify(date)} - ${getHost(date)}
  </option>`;
 //increase month:
 date.setMonth(date.getMonth()+1);
 date.setDate(1);
}

result += "</select>";

document.write(result);

Try it

(注意:上面的代码使用字符串文字(真的很新,无处不在),你应该停止使用document.write,选择DOM中的elems并更改它们)