Question

我正在尝试使用JavaScript为学校作业制作日历，在我的Function Kalander循环中，我尝试生成本月内部和日期。我不太确定我如何适应循环内部的开放性。我想排7天。

HMTL：

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

</html>

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 VolgendeFunc = function(){
    myMonth = myMonth + 1;
    Kalender();
}

var VorigeFunc = function(){
    myMonth = myMonth -1;
    Kalender();
}

function Kalender(){
    var myHTML ='';
    myHTML+=monthNames[myMonth] + " " + jaar + "<br>";
    for (var i=1; i <= monthLength[myMonth]; i++)
    {
        myHTML+="<td><a href='#'>" + i + "</a></<td> ";
        if (i%7 == 0) { myHTML += "</tr>"; } 
    } 

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

Answer 1

要解决您的问题，您需要选择正确的容器。我已从标记中删除了您的表格，并使用您的JS动态添加它。

我已将月份放在另一个容器中，以免干扰桌子。您可以选择将月份放在thead标记内。

我向你扔了奖金，并在2014年添加了按钮功能和受限制的行为（采取此措施并将其改进为无限制的年度日历）。让它成为你的运动。

请参阅JsFiddle Demo

HTML

<button id="Vorige" onclick="VorigeFunc();">Vorige</button>
<button id="Volgende" onclick="VolgendeFunc();">Volgende</button>
<br>
<div id="div">
</div>

JS

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=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();

JavaScript循环

1 个答案: