JavaScript循環表未放置正確

-1

我試圖做一個日曆，但上面的日子不是很適合他們應該在哪裏。週日箱「太陽」保持浮在左上角，我想有它旁邊的其他天（週一左）JavaScript循環表未放置正確

var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 
 
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 
 
    var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
 
    var today = new Date(); 
 
    var dag = today.getDay(); 
 
    var myMonth = today.getMonth(); 
 
    var jaar = today.getFullYear(); 
 
    var volBtn = document.getElementById('Volgende'); 
 
    var vorBtn = document.getElementById('Vorige'); 
 

 
    function Kalender() { 
 
     var myHTML = ''; 
 

 
     myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal">'; 
 
     for (var i = 0; i < dayNames.length; i++) { 
 
     myHTML += '<td>' + dayNames[i] + ' ' + '</td>'; 
 
     if (i % 6 == 0) { 
 
      myHTML += "</tr>"; 
 
     } 
 
     }; 
 
     for (var i = 1; i <= monthLength[myMonth]; i++) { 
 
     myHTML += "<td><a href='#'>" + i + "</a></td> "; 
 

 
     if (i % 7 == 0) { 
 
      myHTML += "</tr>"; 
 
     } 
 
     } 
 
     myHTML += '</table>'; 
 

 
     document.getElementById('div').innerHTML = myHTML; 
 
    } 
 

 
    var VolgendeFunc = function() { 
 
     myMonth = myMonth + 1; 
 

 
     if (myMonth == 11) { 
 
     volBtn.disabled = true; 
 
     vorBtn.disabled = false; 
 
     } else { 
 
     vorBtn.disabled = false; 
 
     volBtn.disabled = false; 
 
     } 
 

 
     document.getElementById('month').innerHTML = myMonth; 
 
     Kalender(); 
 
    } 
 
    var VorigeFunc = function() { 
 
     myMonth = myMonth - 1; 
 

 
     if (myMonth == 0) { 
 
     vorBtn.disabled = true; 
 
     volBtn.disabled = false; 
 
     } else { 
 
     vorBtn.disabled = false; 
 
     volBtn.disabled = false; 
 
     } 
 

 
     document.getElementById('month').innerHTML = myMonth; 
 
     Kalender(); 
 
    } 
 

 
    Kalender();

#div { 
 
     font-size: 19px; 
 
    } 
 
    #div tr { 
 
     color: #2b2b2b; 
 
     width: 30px; 
 
     height: 30px; 
 
     line-height: 30px; 
 
     text-align: center; 
 
     border: 1px solid #e6e6e6; 
 
     cursor: default; 
 
    } 
 
    #cal { 
 
     font-size: 30px; 
 
     -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); 
 
     -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); 
 
     margin: 50px auto; 
 
     font: "Helvetica Neue"; 
 
     display: table; 
 
    } 
 
    #cal td { 
 
     color: #2b2b2b; 
 
     width: 30px; 
 
     height: 30px; 
 
     line-height: 30px; 
 
     text-align: center; 
 
     border: 1px solid #e6e6e6; 
 
     cursor: default; 
 
    }

<center> 
 
    <button id="Vorige" onclick="VorigeFunc()">Vorige</button> 
 
    <button id="Volgende" onclick="VolgendeFunc()">Volgende</button> 
 
    <div id="div"> 
 
    <script type="text/javascript" src="Kal.js"> 
 
    </script> 
 

 
    </div> 
 
</center>

來源

2014-10-22 Niek

爲什麼鏈接標籤不在頭部？ – epascarello 2014-10-22 00:15:30

哎呦，固定。謝謝epascarello – Niek 2014-10-22 00:18:25

看起來你的代碼不正確計算行。 – epascarello 2014-10-22 00:22:33

-1

你for循環是不同的，這是造成 '太陽' 的偏移：

for (var i = 0; i < dayNames.length; i++){ 
    myHTML += '<td>' + dayNames[i] + ' ' + '</td>'; 
    if (i%6 == 0){ 
     myHTML += "</tr>"; 
    } 
}; 
for (var i=1; i <= monthLength[myMonth]; i++){ 
    myHTML+="<td><a href='#'>" + i + "</a></td> "; 

    if (i%7 == 0){ 
     myHTML += "</tr>"; 
    } 
}

他們更改爲：

for (var i = 0; i < dayNames.length; i++){ 
    myHTML += '<td>' + dayNames[i] + ' ' + '</td>'; 
    if ((i+1)%7 == 0){ 
     myHTML += "</tr>"; 
    } 
}; 
for (var i = 0; i < monthLength[myMonth]; i++){ 
    myHTML+="<td><a href='#'>" + (i + 1) + "</a></td> "; 

    if ((i+1)%7 == 0){ 
     myHTML += "</tr>"; 
    } 
}

應該可以解決您的問題：http://jsfiddle.net/166ea9n9/

來源

2014-10-22 00:22:45 logikal

不解決壞標記的實際問題。 – epascarello 2014-10-22 00:32:17

OP沒有要求修正壞標記 - OP要求'Sun'與本週的其他日期對齊。 – logikal 2014-10-22 00:53:39

您從不爲行增加開頭<tr>標籤，只關閉它們。

var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 
 
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 
 
    var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
 
    var today = new Date(); 
 
    var dag = today.getDay(); 
 
    var myMonth = today.getMonth(); 
 
    var jaar = today.getFullYear(); 
 
    var volBtn = document.getElementById('Volgende'); 
 
    var vorBtn = document.getElementById('Vorige'); 
 

 
    function Kalender() { 
 
     var myHTML = ''; 
 

 
     myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal"><thead><tr>'; 
 
    
 

 
     for (var i = 0; i < dayNames.length; i++) { 
 
     myHTML += '<td>' + dayNames[i] + ' ' + '</td>'; 
 
     }; 
 
     myHTML += "</tr></thead><tbody>"; 
 

 

 
     var rows = [] 
 
     var row = ""; 
 
     for (var i = 1; i <= monthLength[myMonth]; i++) { 
 
     row += "<td><a href='#'>" + i + "</a></td> "; 
 

 
     if (i % 7 == 0 || i===monthLength[myMonth]) { 
 
      rows.push(row); 
 
      row = ""; 
 
     } 
 
     } 
 
    
 
    myHTML += "<tr>" + rows.join("</tr><tr>") + "</tr>"; 
 

 
     myHTML += '</tbody></table>'; 
 

 
     document.getElementById('div').innerHTML = myHTML; 
 
    } 
 

 
    var VolgendeFunc = function() { 
 
     myMonth = myMonth + 1; 
 

 
     if (myMonth == 11) { 
 
     volBtn.disabled = true; 
 
     vorBtn.disabled = false; 
 
     } else { 
 
     vorBtn.disabled = false; 
 
     volBtn.disabled = false; 
 
     } 
 

 
     document.getElementById('month').innerHTML = myMonth; 
 
     Kalender(); 
 
    } 
 
    var VorigeFunc = function() { 
 
     myMonth = myMonth - 1; 
 

 
     if (myMonth == 0) { 
 
     vorBtn.disabled = true; 
 
     volBtn.disabled = false; 
 
     } else { 
 
     vorBtn.disabled = false; 
 
     volBtn.disabled = false; 
 
     } 
 

 
     document.getElementById('month').innerHTML = myMonth; 
 
     Kalender(); 
 
    } 
 

 
    Kalender();

#div { 
 
     font-size: 19px; 
 
    } 
 
    #div tr { 
 
     color: #2b2b2b; 
 
     width: 30px; 
 
     height: 30px; 
 
     line-height: 30px; 
 
     text-align: center; 
 
     border: 1px solid #e6e6e6; 
 
     cursor: default; 
 
    } 
 
    #cal { 
 
     font-size: 30px; 
 
     -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); 
 
     -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); 
 
     margin: 50px auto; 
 
     font: "Helvetica Neue"; 
 
     display: table; 
 
    } 
 
    #cal td { 
 
     color: #2b2b2b; 
 
     width: 30px; 
 
     height: 30px; 
 
     line-height: 30px; 
 
     text-align: center; 
 
     border: 1px solid #e6e6e6; 
 
     cursor: default; 
 
    }

<center> 
 
    <button id="Vorige" onclick="VorigeFunc()">Vorige</button> 
 
    <button id="Volgende" onclick="VolgendeFunc()">Volgende</button> 
 
    <div id="div"> 
 
    <script type="text/javascript" src="Kal.js"> 
 
    </script> 
 

 
    </div> 
 
</center>

來源

2014-10-22 00:24:30 epascarello

是否發生變化：

myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal">'; 
     for (var i = 0; i < dayNames.length; i++) { 
     myHTML += '<td>' + dayNames[i] + ' ' + '</td>'; 
     if (i % 6 == 0) { 
      myHTML += "</tr>"; 
     } 
     };

到：

myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal"><tr>'; 
    for (var i = 0; i < dayNames.length; i++) { 
    myHTML += '<td class="yo">' + dayNames[i] + ' ' + '</td>'; 
    }; 
    myHTML += '</tr>';

工作？

來源

2014-10-22 00:28:37

JavaScript循環表未放置正確

回答

相關問題