精梳多个Javascript阵列

问题描述:

我想构建一个结合两个数组的数据的下拉菜单 - 一个旨在确定并返回即将到来的几个月的第三个星期四,另一个旨在确定并返回哪个20个主办机构将在每个星期四举办一次活动。精梳多个Javascript阵列

这是我得到的 - 它获得星期四的权利,但它没有循环回来并在第一个主机(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> 

至于我可以看到,整个事情可以简化为:

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并更改它们)

+0

感谢您的快速回复,Jonas!有几件事情:它拉动Weds,而不是周四(简单修复),如果没有所有的时间细节(我可以修复),它会显示日期。此外,在周五或周六开始的几个月内,它将拉动第二个周四而不是第三个周四。而主机需要命名,不能只按数字列出。再次谢谢你!!! –

+0

@Jo yeah was not shure,edited ..请检查更多的错误 –