javascript：制作日歷導航欄

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時，調用calender函數時，您將重寫整個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 個解決方案

解決方案1
1 2013-09-04 00:49:39

javascript：制作日歷導航欄

問題描述

1 個解決方案

解決方案1 1 2013-09-04 00:49:39

解決方案1
1 2013-09-04 00:49:39