2017-08-16 63 views
0

我想構建一個結合兩個數組的數據的下拉菜單 - 一個旨在確定並返回即將到來的幾個月的第三個星期四,另一個旨在確定並返回哪個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> 

回答

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並更改它們)

+0

感謝您的快速回復,Jonas!有幾件事情:它拉動Weds,而不是週四(簡單修復),如果沒有所有的時間細節(我可以修復),它會顯示日期。此外,在週五或週六開始的幾個月內,它將拉動第二個週四而不是第三個週四。而主機需要命名,不能只按數字列出。再次謝謝你!!! –

+0

@Jo yeah was not shure,edited ..請檢查更多的錯誤 –