javascript: создание панели навигации по календарю

Когда я нажимаю на функцию, все идет не так. в чем моя проблема. Я несколько месяцев боюсь этого. Я нажимаю на кнопку и увеличиваю или уменьшу номер месяца. и показать мне правильный результат.javascript: создание панели навигации по календарю

<!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>

источник

2013-09-04 user2709845

При использовании 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>

источник

2013-09-04 00:49:39

большое спасибо Эран. вы - легенда. Я твой должник. я попробую завтра. – user2709845

Добро пожаловать. Хороший календарь :) –

javascript: создание панели навигации по календарю

ответ

Смежные вопросы