Question

当我点击该功能时，一切都会出错。我的问题是什么我为此奋斗了几个月。我点击按钮，发现月份数量会增加或减少。并告诉我正确的结果。

<!DOCTYPE html>
<html>
<style>
table
{
border-collapse:collapse;
}
table img
{
width:50px;
height:50px;
}
td,table
{
border-color:blue;
text-align:center;
}
td:hover
{
cursor:pointer;
background-color:yellow;
}
</style>
<head>
</head>
<body>
<script>


var date=new Date();
var mn=['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
y=date.getFullYear();
m=date.getMonth();

function preyear()
{
    y -= 1;
    calendar();
}
function premonth(){
    m -= 1;
    calendar();
}
function nextmonth(){
    m += 1;
    calendar();
}
function nextyear(){
    y += 1;
    calendar();
}
function today(){
    y=date.getFullYear();
    m=date.getMonth();
    calendar();
}

function calendar(){
document.write("<table border=1><tr><td colspan=8>"+mn[m]+' '+y+"</td></tr>");
document.write("<tr><td  colspan='8'><button value='preyear' onclick='preyear()'><button value='premonth' onclick='premonth()'><button value = 'today' onclick = 'today()'><button value = 'nextmonth' onclick='nextmonth()'><button value = 'nextyear' onclick = 'nextyear()'></td></tr>");
document.write ("<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td><td>W</td></tr>");
document.write("<tr>");
for (var i=1; i<43; i++){
var fday=new Date(y,m,1);
days=new Date(y,m,i-fday.getDay());
if (days.toDateString()== date.toDateString()){
    document.write("<td style=color:red>"+days.getDate()+"</td>");
    }
else{
    document.write("<td>"+days.getDate()+"</td>");
    }
if (i%7 == 0){
    var onejan=new Date(y,0,1);
    document.write("<td>"+Math.ceil(((days-onejan)/(60*60*24*1000)+1)/7)    +"</td></tr><tr>");
    }
}       
document.write("</tr></table>");    
}
calendar();
</script>

</body>
</html>

Answer 1

当您第二次使用document.write调用日历功能时，您将重写整个HTML并导致<head>标记丢失。

当你在页面加载完成后使用document.write时会发生这种情况，你应该使用它：

<!DOCTYPE html>
<html>
<style>
table
{
border-collapse:collapse;
}
table img
{
width:50px;
height:50px;
}
td,table
{
border-color:blue;
text-align:center;
}
td:hover
{
cursor:pointer;
background-color:yellow;
}
</style>
<head>
</head>
<body>
<script>


var date=new Date();
var mn=['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
y=date.getFullYear();
m=date.getMonth();

function preyear()
{
    y -= 1;
    calendar();
}
function premonth(){
    m -= 1;
    calendar();
}
function nextmonth(){
    m += 1;
    calendar();
}
function nextyear(){
    y += 1;
    calendar();
}
function today(){
    y=date.getFullYear();
    m=date.getMonth();
    calendar();
}

function calendar(){
    var html = "";

    html += "<table border=1><tr><td colspan=8>"+mn[m]+' '+y+"</td></tr>";
    html += "<tr><td  colspan='8'><button value='preyear' onclick='preyear()'><button value='premonth' onclick='premonth()'><button value = 'today' onclick = 'today()'><button value = 'nextmonth' onclick='nextmonth()'><button value = 'nextyear' onclick = 'nextyear()'></td></tr>";
    html += "<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td><td>W</td></tr>";
    html += "<tr>";
    for (var i=1; i<43; i++){
    var fday=new Date(y,m,1);
    days=new Date(y,m,i-fday.getDay());
    if (days.toDateString()== date.toDateString()){
        html += "<td style=color:red>"+days.getDate()+"</td>";
        }
    else{
        html += "<td>"+days.getDate()+"</td>";
        }
    if (i%7 == 0){
        var onejan=new Date(y,0,1);
        html += "<td>"+Math.ceil(((days-onejan)/(60*60*24*1000)+1)/7)    +"</td></tr><tr>";
        }
    }       
    html += "</tr></table>";    
    document.body.innerHTML = html;
}
calendar();
</script>

</body>
</html>

javascript：制作日历导航栏

1 个答案: